<div class="sticky top-0 z-50 flex flex-row bg-white justify-between py-1 md:mb-2 border-b border-gray-200">
  <div class="flex flex-col md:flex-row">
    <section class="flex flex-row gap-x-2 md:border-r border-gray-200 px-2">
      <.a href={~p"/"} class="font-bold">sloanelybutsurely.com</.a>
      <nav>
        <ul class="flex flex-row gap-x-2">
          <li>
            <.a href={~p"/writing"}>writing</.a>
          </li>
          <li>
            <.a href={~p"/microblog"}>microblog</.a>
          </li>
        </ul>
      </nav>
    </section>
    <section :if={@admin?} class="flex flex-row gap-x-2 px-2">
      <nav>
        <ul class="flex flex-row gap-x-2">
          <li>
            <.a navigate={~p"/admin"}>admin</.a>
          </li>
          <li>
            <.a href={~p"/admin/statuses/new"}>new status</.a>
          </li>
          <li>
            <.a href={~p"/admin/posts/new"}>new post</.a>
          </li>
          <li :if={post?(@current_path)}>
            <.a href={~p"/admin/posts/#{@post}"}>edit post</.a>
          </li>
          <li :if={status?(@current_path)}>
            <.a href={~p"/admin/statuses/#{@status}"}>edit status</.a>
          </li>
        </ul>
      </nav>
    </section>
  </div>

  <.a :if={@admin?} class="px-2" href={~p"/admin/session/destroy?return_to=#{@current_path}"}>
    sign out
  </.a>
  <.a
    :if={!@admin?}
    class="px-2 text-transparent hover:text-current"
    href={~p"/sign-in?return_to=#{@current_path}"}
  >
    sign in
  </.a>
</div>

<main class="p-2 max-w-2xl mx-auto">
  {@inner_content}
</main>