<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-sm">
    <div class="text-center">
      <.header>
        Log in
        <:subtitle>
          <%= if @current_scope do %>
            You need to reauthenticate to perform sensitive actions on your account.
          <% else %>
            Don't have an account?
            <.link
              navigate={~p"/users/register"}
              class="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
            >
              Sign up
            </.link>
            for an account now.
          <% end %>
        </:subtitle>
      </.header>
    </div>

    <div
      :if={local_mail_adapter?()}
      class="mt-6 rounded-lg bg-blue-50 p-4 dark:bg-blue-950"
    >
      <div class="flex">
        <.icon
          name="hero-information-circle"
          class="h-6 w-6 flex-shrink-0 text-blue-600 dark:text-blue-400"
        />
        <div class="ml-3">
          <p class="text-sm text-blue-700 dark:text-blue-200">
            You are running the local mail adapter.
          </p>
          <p class="mt-1 text-sm text-blue-700 dark:text-blue-200">
            To see sent emails, visit <.link href="/dev/mailbox" class="font-medium underline">the mailbox page</.link>.
          </p>
        </div>
      </div>
    </div>

    <div class="mt-8 space-y-6">
      <!-- Passkey Login (Discoverable) -->
      <div>
        <div
          id="passkey-discoverable-error"
          class="hidden mb-3 rounded-lg bg-red-50 p-3 dark:bg-red-900/20"
        >
          <p class="text-sm text-red-800 dark:text-red-200"></p>
        </div>
        <button
          type="button"
          id="passkey-discoverable-btn"
          class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <.icon name="hero-key" class="h-5 w-5" /> Log in with passkey
        </button>
      </div>

      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-zinc-300 dark:border-zinc-700"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="bg-zinc-50 px-2 text-zinc-600 dark:bg-zinc-950 dark:text-zinc-400">
            or use email
          </span>
        </div>
      </div>

      <.form :let={f} for={@form} as={:user} id="login_form_magic" action={~p"/users/log-in"}>
        <.input
          readonly={!!@current_scope}
          field={f[:email]}
          type="email"
          label="Email"
          autocomplete="email"
          required
        />
        <.button class="w-full" variant="primary">
          Log in with email <span aria-hidden="true">→</span>
        </.button>
      </.form>

      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-zinc-300 dark:border-zinc-700"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="bg-zinc-50 px-2 text-zinc-600 dark:bg-zinc-950 dark:text-zinc-400">
            or use password
          </span>
        </div>
      </div>

      <.form :let={f} for={@form} as={:user} id="login_form_password" action={~p"/users/log-in"}>
        <.input
          readonly={!!@current_scope}
          field={f[:email]}
          type="email"
          label="Email"
          autocomplete="email"
          required
        />
        <.input
          field={f[:password]}
          type="password"
          label="Password"
          autocomplete="current-password"
        />
        <div class="space-y-3">
          <.button class="w-full" variant="primary" name={@form[:remember_me].name} value="true">
            Log in and stay logged in <span aria-hidden="true">→</span>
          </.button>
          <.button class="w-full">
            Log in only this time
          </.button>
        </div>
      </.form>
    </div>
  </div>
</Layouts.app>
