div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
  h1 Admin // Posts

div class="max-w-prose mx-auto" x-data="{ activeTab:  0 }"
    div class="flex"
      a href="#" class="text-gray-200 cursor-pointer p-2 border-2 mr-2 rounded border-blue-400" :class="{ 'bg-blue-400 text-blue-900': activeTab === 0 }" @click="activeTab = 0" class="tab-control" Published
      a href="#" class="text-gray-200 cursor-pointer p-2 border-2 rounded border-blue-400" :class="{ 'bg-blue-400 text-blue-900': activeTab === 1 }" @click="activeTab = 1" class="tab-control" Un published
      div class="flex-1"
      a href="/admin/posts/new" class="text-gray-200 cursor-pointer p-2 border-2 rounded border-blue-400 bg-blue-400 text-blue-900" New Post
    table class="prose dark:prose-invert table-auto prose-a:text-blue-600 prose-a:no-underline"
      thead
        th Details
        th Date
        th Mentions
        th Reactions
        th colspan="2" Actions
      tbody class="{ 'active': activeTab === 0 }" x-show.transition.in.opacity.duration.600="activeTab === 0"
        - published_posts.each do |post|
          tr id="post-#{post.id}"
            td
              div
                = post.name
              a class="no-underline" href="/post/#{post.slug}"
                small class="text-gray-400 dark:text-gray-600" = post.slug
            td
              = post.published_at&.strftime("%d %b %Y")
            td
              = post.webmentions.count
            td
              = post.reactions.count
            td
              a href="/admin/posts/#{post.id}" edit
            td
              button class="text-red-600" hx-delete="/admin/posts/#{post.id}" hx-target="#post-#{post.id}" delete
            td
              button hx-post="/admin/posts/#{post.id}/archive" unpublish
      tbody class="{ 'active': activeTab === 1 }" x-show.transition.in.opacity.duration.600="activeTab === 1"
        - unpublished_posts.each do |post|
          tr id="post-#{post.id}"
            td
              div
                = post.name
              a class="no-underline" href="/post/#{post.slug}"
                small class="text-gray-400 dark:text-gray-600" = post.slug
            td
              = post.published_at&.strftime("%d %b %Y")
            td
              = post.webmentions.count
            td
              = post.reactions.count
            td
              a href="/admin/posts/#{post.id}" edit
            td
              button class="text-red-600" hx-delete="/admin/posts/#{post.id}" hx-target="#post-#{post.id}" delete
            td
              button hx-post="/admin/posts/#{post.id}/publish" publish

div class="max-w-screen-md mx-auto border-t border-solid border-gray-200 dark:border-gray-600"