<article class="max-w-xl mx-auto <%= post_class(@post) %> h-entry py-12">
  <div>
    <h1 class="text-4xl font-bold">
      <%= link to: Routes.posts_path(@conn, :show, @post), class: "u-url" do %>
        <%= raw @post.title %>
      <% end %>
    </h1>
    <%= post_topmatter(@conn, @post) %>
  </div>
  <div class="<%= if @post.format, do: @post.format.slug %> e-content py-12 Article-content">
    <%= render "thumb.html", post: @post, thumbs: @thumbs %>
    <%= @post |> Content.Post.content_page(@page) |> process_content |> raw %>
    <%= case @post.categories || [] do %>
      <% [] -> %>
        <%= "" %>
      <% categories -> %>
        <div class="flex pt-6">
          <h3 class="text-xl font-bold mr-4">Categories</h3>
        
          <%= for term <- categories do %>
            <%= link term.name, to: Routes.category_path(@conn, :index_posts, term.slug), class: "rounded-full bg-gray-300 px-4 py-1 mr-2" %>
          <% end %>
        </div>
    <% end %>
  </div>
  <%= render "pagination.html", conn: @conn, post: @post, current_page: @page %>
</article>
<%= if @post.comment_status == "open" do %>
  <div class="w-full bg-gray-800 py-12">
    <div class="max-w-xl mx-auto">
      <h3 class="text-3xl text-white">Comments</h3>
      <%= render "comments.html", post: @post, parent_id: 0, conn: @conn %>
      <%=
        render "reply_form.html",
          comment_changeset: comment_changeset_for_post(@post),
          post: @post,
          conn: @conn
      %>
    </div>
  </div>
<% end %>

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<script charset="UTF-8"
  src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/languages/elixir.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
