<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-sm">
    <div class="text-center">
      <.header>
        Register for an account
        <:subtitle>
          Already registered?
          <.link navigate={~p"/users/log-in"} class="font-semibold text-primary hover:underline">
            Log in
          </.link>
          to your account now.
        </:subtitle>
      </.header>
    </div>

    <.form :let={f} for={@changeset} action={~p"/users/register"}>
      <.input
        field={f[:callsign]}
        type="text"
        label="Callsign"
        autocomplete="off"
        autocapitalize="characters"
        spellcheck="false"
        required
        phx-mounted={JS.focus()}
      />
      <.input
        field={f[:name]}
        type="text"
        label="Name"
        autocomplete="name"
        required
      />
      <.input
        field={f[:email]}
        type="email"
        label="Email"
        autocomplete="username"
        spellcheck="false"
        required
      />
      <.input
        field={f[:password]}
        type="password"
        label="Password"
        autocomplete="new-password"
        spellcheck="false"
        required
      />
      <.input
        field={f[:password_confirmation]}
        type="password"
        label="Confirm password"
        autocomplete="new-password"
        spellcheck="false"
        required
      />

      <.button phx-disable-with="Creating account..." class="btn btn-primary w-full">
        Create an account
      </.button>
    </.form>
  </div>
</Layouts.app>
