<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-sm">
    <div class="text-center">
      <.header>Welcome {@user.email}</.header>
    </div>

    <div class="mt-8 space-y-3">
      <.form
        :if={!@user.confirmed_at}
        for={@form}
        id="confirmation_form"
        action={~p"/users/log-in?_action=confirmed"}
        phx-mounted={JS.focus_first()}
      >
        <input type="hidden" name={@form[:token].name} value={@form[:token].value} />
        <div class="space-y-3">
          <.button
            name={@form[:remember_me].name}
            value="true"
            phx-disable-with="Confirming..."
            class="w-full"
            variant="primary"
          >
            Confirm and stay logged in
          </.button>
          <.button phx-disable-with="Confirming..." class="w-full">
            Confirm and log in only this time
          </.button>
        </div>
      </.form>

      <.form
        :if={@user.confirmed_at}
        for={@form}
        id="login_form"
        action={~p"/users/log-in"}
        phx-mounted={JS.focus_first()}
      >
        <input type="hidden" name={@form[:token].name} value={@form[:token].value} />
        <%= if @current_scope do %>
          <.button variant="primary" phx-disable-with="Logging in..." class="w-full">
            Log in
          </.button>
        <% else %>
          <div class="space-y-3">
            <.button
              name={@form[:remember_me].name}
              value="true"
              phx-disable-with="Logging in..."
              class="w-full"
              variant="primary"
            >
              Log in and stay logged in
            </.button>
            <.button phx-disable-with="Logging in..." class="w-full">
              Log in only this time
            </.button>
          </div>
        <% end %>
      </.form>
    </div>

    <p
      :if={!@user.confirmed_at}
      class="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-4 text-sm text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200"
    >
      Tip: If you prefer passwords, you can enable them in the user settings.
    </p>
  </div>
</Layouts.app>
