<div class="flex flex-col py-4 px-6">
  <header class="mb-4">
    <nav>
      <ul class="flex flex-row gap-x-4">
        <li>
          <.link navigate={~p"/admin/writing"}>
            writing
          </.link>
        </li>
        <li>
          <.link navigate={~p"/admin/microblog"}>
            microblog
          </.link>
        </li>
        <li>
          <.link class="underline" patch={~p"/admin/syndication"}>
            syndication
          </.link>
        </li>
      </ul>
    </nav>
  </header>

  <main class="flex flex-col">
    <div>
      <strong>Mastodon: </strong>
      <%= if @mastodon_account do %>
        <.link href={@mastodon_account.uid} target="_blank">{@mastodon_account.uid}</.link>
      <% else %>
        <.link href={~p"/auth/mastodon"}>Connect account</.link>
      <% end %>
    </div>
    <div>
      <strong>Bluesky: </strong>
      <%= if @bluesky_account do %>
        <.link href={"https://bsky.app/profile/#{@bluesky_account.handle}"} target="_blank">
          @{@bluesky_account.handle}
        </.link>
      <% else %>
        <.form :let={f} for={%{}} as={:bluesky_account} phx-submit="save_bluesky_account">
          <.input field={f[:identifier]} label="email" />
          <.input field={f[:password]} type="password" />
          <.button type="submit">Connect account</.button>
        </.form>
      <% end %>
    </div>
  </main>
</div>