{{define "content"}}
<article class="post">
  <header class="post-header">
    <time class="post-date" datetime="{{.Post.Date.Format "2006-01-02"}}">{{.Post.Date.Format "January 2, 2006"}}</time>
    <h1 class="post-title">{{.Post.Title}}</h1>
    {{if .Post.Description}}
    <p class="post-description">{{.Post.Description}}</p>
    {{end}}
    {{if .Post.Tags}}
    <div class="post-tags">
      {{range .Post.Tags}}
      <a href="/tags/{{.}}" class="tag">#{{.}}</a>
      {{end}}
    </div>
    {{end}}
    {{if .Post.CoverImage}}
    <figure class="post-cover">
      <img src="{{.Post.CoverImage}}" alt="{{.Post.Title}}" loading="eager" />
    </figure>
    {{end}}
  </header>

  <div class="post-content prose">
    {{.ContentHTML}}
  </div>

  {{if .InteractionConfig.ReactionsEnabled}}
  <section id="reactions" class="reactions" data-slug="{{.Post.Slug}}">
    <div class="reactions-container"></div>
  </section>
  {{end}}

  {{if .InteractionConfig.CommentsEnabled}}
  <section id="comments" class="comments" data-slug="{{.Post.Slug}}">
    <h3 class="comments-title">Comments</h3>
    <div class="comments-list"></div>
    <div class="comment-form-container"></div>
  </section>
  {{end}}
</article>
{{end}}

{{define "scripts"}}
{{if or .InteractionConfig.ReactionsEnabled .InteractionConfig.CommentsEnabled}}
<script src="/static/js/post.js"></script>
<script>
  WriteKit.init({
    slug: "{{.Post.Slug}}",
    reactions: {{.InteractionConfig.ReactionsEnabled}},
    comments: {{.InteractionConfig.CommentsEnabled}},
    reactionMode: "{{.InteractionConfig.ReactionMode}}",
    reactionEmojis: "{{.InteractionConfig.ReactionEmojis}}".split(","),
    requireAuth: {{.InteractionConfig.ReactionsRequireAuth}}
  });
</script>
{{end}}
{{end}}