<div class="flex min-h-full items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
  <div class="w-full max-w-sm space-y-10">
    <div>
      <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-zinc-900 dark:text-zinc-200">
        {gettext("Welcome to your Music Library")}
      </h2>
    </div>
    <.form class="space-y-6" for={@form} action={~p"/sessions/create"}>
      <div class="relative -space-y-px rounded-md shadow-sm">
        <div>
          <label for="password" class="sr-only">{gettext("Password")}</label>
          <.input
            id="password"
            name="password"
            type="password"
            autocomplete="current-password"
            required
            placeholder="Password"
          />
        </div>
      </div>

      <div class="flex w-full justify-center">
        <.button variant="solid" type="submit">
          {gettext("Login")}
        </.button>
      </div>
    </.form>
  </div>
</div>
