{{define "content"}}
<div class="container" style="max-width:23rem;padding-top:2rem;">
  <div class="card">
    <div class="card-header">
      <h1 class="text-base font-semibold" style="margin:0;">{{t .Lang "auth.register.title"}}</h1>
    </div>
    {{if not .RegistrationOpen}}
      <div class="card-body text-sm text-muted">
        <div class="flex items-center gap-2 text-destructive">
          {{icon "lock" "size-4"}}
          <span>{{t .Lang "auth.register.disabled"}}</span>
        </div>
      </div>
    {{else}}
      <form method="post" action="/register" class="card-body flex flex-col gap-3">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
        {{if eq .RegistrationMode "confirm"}}
          <div class="card p-2.5 text-xs text-muted" style="background:hsl(var(--muted) / 0.35);">
            {{t .Lang "auth.register.pending_notice"}}
          </div>
        {{end}}
        <div>
          <label class="label" for="username">{{t .Lang "auth.username"}}</label>
          <input id="username" name="username" type="text" class="input font-mono" value="{{.FormUsername}}" placeholder="polar" required autofocus pattern="^[a-zA-Z0-9](?:[a-zA-Z0-9]|[-_][a-zA-Z0-9]){1,31}$">
          <div class="field-hint">{{t .Lang "auth.username_hint"}}</div>
        </div>
        <div>
          <label class="label" for="email">{{t .Lang "auth.email"}}</label>
          <input id="email" name="email" type="email" class="input" value="{{.FormEmail}}" placeholder="user@example.com" required autocomplete="email">
        </div>
        <div>
          <label class="label" for="password">{{t .Lang "auth.password"}}</label>
          <input id="password" name="password" type="password" class="input" minlength="8" required autocomplete="new-password">
          <div class="field-hint">{{t .Lang "auth.password_hint"}}</div>
        </div>
        <button type="submit" class="btn btn-primary w-full mt-1">
          <span>{{t .Lang "auth.submit_register"}}</span>
        </button>
      </form>
    {{end}}
    <div class="card-footer text-xs text-muted flex items-center justify-between">
      <span>{{t .Lang "auth.have_account"}}</span>
      <a href="/login" class="font-medium" style="color:hsl(var(--foreground));">{{t .Lang "nav.login"}} →</a>
    </div>
  </div>
</div>
{{end}}