{{define "title"}}Sign in · restic-manager{{end}}

{{define "content"}}
<div class="flex-1 flex flex-col items-center justify-center px-8 py-12">

  <div class="w-[360px]">
    <div class="flex justify-center mb-10">
      <div class="mono text-base text-ink font-medium tracking-[0.01em]">restic-manager</div>
    </div>

    <h2 class="text-lg font-medium tracking-[-0.005em] text-center mb-7">Sign in to continue</h2>

    {{if .Error}}
      <div class="mb-4 px-3 py-2.5 rounded-[5px] text-xs"
           style="background: color-mix(in oklch, var(--bad), transparent 88%); border: 1px solid color-mix(in oklch, var(--bad), transparent 70%); color: oklch(0.85 0.10 25);">
        {{.Error}}
      </div>
    {{end}}

    <form method="post" action="/login">
      <div class="mb-3.5">
        <label class="field-label" for="login-username">Username</label>
        <input id="login-username" name="username" type="text" class="field mono" autocomplete="username" autofocus required value="{{.Username}}">
      </div>
      <div class="mb-5">
        <label class="field-label" for="login-password">Password</label>
        <input id="login-password" name="password" type="password" class="field" autocomplete="current-password" required>
      </div>
      <button type="submit" class="btn btn-primary btn-block">Sign in</button>
    </form>

    <div class="mt-6 pt-5 border-t border-line-soft text-center">
      <p class="text-pretty text-xs text-ink-mute leading-[1.65]">
        Forgot your password? An admin can reset it from
        <span class="mono text-ink-mid">Settings → Users</span>.
        There’s no recovery email — this is self-hosted infrastructure.
      </p>
    </div>
  </div>

  <div class="mt-20 flex gap-3.5 items-center text-[11px] text-ink-fade">
    <span class="mono">restic-manager {{.Version}}</span>
  </div>

</div>
{{end}}