<div
  :if={@admin?}
  class="sticky top-0 bg-white z-50 flex flex-row justify-between py-1 px-3 md:mb-2 border-b border-gray-200"
>
  <section class="flex flex-row gap-x-2">
    <div class="pr-2 border-r border-gray-200">
      <.a navigate={~p"/admin"} class="font-bold">admin</.a>
    </div>
    <nav>
      <ul class="flex flex-row gap-x-2">
        <li>
          <.a href={~p"/admin/microblog/new"}>new status</.a>
        </li>
        <li>
          <.a href={~p"/admin/writing/new"}>new draft</.a>
        </li>
      </ul>
    </nav>
  </section>

  <section class="flex flex-row">
    <.a href={~p"/admin/session/destroy?return_to=#{@current_path}"}>
      sign out
    </.a>
  </section>
</div>
<div class="flex flex-col md:flex-row mx-auto max-w-4xl">
  <section class="flex flex-col p-2 gap-y-1 border-gray-200 border-b md:border-b-0">
    <.a href={~p"/"} class="font-bold">sloanelybutsurely.com</.a>
    <nav>
      <ul>
        <li>
          <.a href={~p"/writing"}>writing</.a>
        </li>
        <li>
          <.a href={~p"/microblog"}>microblog</.a>
        </li>
      </ul>
    </nav>
  </section>
  <main class="p-2 w-full">
    {@inner_content}
  </main>
</div>
<div
  :if={not @admin?}
  class="fixed right-0 bottom-0 p-2 text-transparent underline hover:text-current"
>
  <.a href={~p"/sign-in?return_to=#{@current_path}"}>sign in</.a>
</div>