<%= for post <- @posts do %>
  <article class="max-w-xl mx-auto <%= post_class(post) %> h-entry py-12">
    <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 class="Article-content <%= if post.format, do: post.format.slug %> e-content">
      <%= render "thumb.html", post: post, thumbs: @thumbs %>
      <div class="Article-content-words">
        <%= raw post |> Content.Post.content_page(1) |> Content.Post.before_more |> process_content |> raw %>
        <%= if post.content =~ "<!--more-->" do %>
          <p>
            <%= link "Keep Reading", to: Routes.posts_path(@conn, :show, post) %>
          </p>
        <% end %>
        <%= render "pagination.html", conn: @conn, post: post %>
      </div>
    </div>
    
    <%= case post.categories || [] do %>
      <% [] -> %>
        <%= "" %>
      <% categories -> %>
        <div class="flex pt-6">
          <h3 class="text-xl 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 %>
  </article>
<% end %>

<nav class="max-w-xl mx-auto flex justify-center">
  <div class="flex shadow rounded">
    <%= paginator(1..@last_page, @page, fn first..last, page ->
      link page, 
        to: paginated_posts_path(@conn, @category, page), 
        style: "min-width: 3.5rem",
        class: "#{if page == @page, do: "font-bold"} text-center flex-1 border bg-gray-100 hover:bg-gray-300 text-gray-500 p-4 #{group_rounding_class(first..last, page)}" 
    end)
    %>
  </div>
</nav>

<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>
