<Layouts.app flash={@flash} <%= scope_config.scope.assign_key %>={@<%= scope_config.scope.assign_key %>}>
  <div class="mx-auto max-w-sm space-y-4">
    <div class="text-center">
      <.header>
        <p>Log in</p>
        <:subtitle>
          <%%= if @<%= scope_config.scope.assign_key %> do %>
            You need to reauthenticate to perform sensitive actions on your account.
          <%% else %>
            Don't have an account? <.link
              navigate={~p"<%= schema.route_prefix %>/register"}
              class="font-semibold text-brand hover:underline"
              phx-no-format
            >Sign up</.link> for an account now.
          <%% end %>
        </:subtitle>
      </.header>
    </div>

    <div :if={local_mail_adapter?()} class="alert alert-info">
      <.icon name="hero-information-circle" class="size-6 shrink-0" />
      <div>
        <p>You are running the local mail adapter.</p>
        <p>
          To see sent emails, visit <.link href="/dev/mailbox" class="underline">the mailbox page</.link>.
        </p>
      </div>
    </div>

    <.form :let={f} for={@form} as={:<%= schema.singular %>} id="login_form_magic" action={~p"<%= schema.route_prefix %>/log-in"}>
      <.input
        readonly={!!@<%= scope_config.scope.assign_key %>}
        field={f[:email]}
        type="email"
        label="Email"
        autocomplete="username"
        spellcheck="false"
        required
        phx-mounted={JS.focus()}
      />
      <.button class="btn btn-primary w-full">
        Log in with email <span aria-hidden="true">→</span>
      </.button>
    </.form>

    <div class="divider">or</div>

    <.form :let={f} for={@form} as={:<%= schema.singular %>} id="login_form_password" action={~p"<%= schema.route_prefix %>/log-in"}>
      <.input
        readonly={!!@<%= scope_config.scope.assign_key %>}
        field={f[:email]}
        type="email"
        label="Email"
        autocomplete="username"
        spellcheck="false"
        required
      />
      <.input
        field={f[:password]}
        type="password"
        label="Password"
        autocomplete="current-password"
        spellcheck="false"
      />
      <.button class="btn btn-primary w-full" name={@form[:remember_me].name} value="true">
        Log in and stay logged in <span aria-hidden="true">→</span>
      </.button>
      <.button class="btn btn-primary btn-soft w-full mt-2">
        Log in only this time
      </.button>
    </.form>
  </div>
</Layouts.app>
