<div class="max-w-2xl mx-auto">
  <div class="flex items-center py-2 px-4 border-x border-gray-200">
    <.link
      navigate={~p"/microblog"}
      class="mr-4 text-gray-500 hover:text-gray-800 flex items-center"
    >
      <.icon name="hero-arrow-left" class="h-5 w-5" />
    </.link>
    <h1 class="text-lg font-bold">Post</h1>
  </div>

  <article class="h-entry p-4 border border-gray-200">
    <header class="flex mb-3 justify-between">
      <div class="h-card flex items-center gap-3 p-author">
        <%= if Core.Author.get(:avatar_url) do %>
          <img
            src={Core.Author.get(:avatar_url)}
            alt={Core.Author.get(:name)}
            class="w-10 h-10 rounded-full u-photo"
          />
        <% else %>
          <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-xl u-photo">
            {Core.Author.get(:avatar_emoji)}
          </div>
        <% end %>
        <div class="flex flex-col">
          <p class="p-name font-bold">
            {Core.Author.get(:name)}
          </p>
          <p>
            <span class="p-nickname font-normal text-gray-600">
              @{Core.Author.get(:username)}
            </span>
          </p>
        </div>
      </div>

      <%= if @current_user do %>
        <.link class="text-sm text-gray-500" navigate={~p"/admin/posts/#{@status}"}>edit</.link>
      <% end %>
    </header>

    <div class="e-content my-4">
      <.markdown content={@status.body} />
    </div>

    <footer class="mt-4 border-t border-gray-200 pt-2 text-sm text-gray-500 flex flex-row justify-between">
      <div>
        <%= if @status.published_at do %>
          <.timex
            value={Core.Posts.publish_date_time(@status)}
            format="{Mfull} {D}, {YYYY} at {h12}:{m} {AM}"
            class="dt-published"
          />
        <% end %>
      </div>
      <div class="flex flex-row gap-x-2">
        <%= if @status.mastodon_post do %>
          <.link href={@status.mastodon_post.url} target="_blank" class="u-syndication">
            tech.lgbt
          </.link>
        <% end %>
      </div>
    </footer>
  </article>
</div>