{{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 .OIDCError}}
      <div class="panel rounded-[7px] p-4 mb-5"
           style="border-color: color-mix(in oklch, var(--bad), transparent 60%);">
        <div class="text-bad text-[12.5px]">
          {{if eq .OIDCError "no_role_match"}}Your account does not match any role mapping. Contact your administrator.
          {{else if eq .OIDCError "username_taken"}}A local account with the same username already exists. Contact your administrator.
          {{else if eq .OIDCError "user_disabled"}}Your account has been disabled. Contact your administrator.
          {{else}}Sign-in via SSO failed ({{.OIDCError}}). Try again or use a local account.{{end}}
        </div>
      </div>
    {{end}}

    {{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}}

    {{if .OIDCEnabled}}
      <a href="/auth/oidc/login" class="btn btn-primary btn-block btn-lg mb-4">
        Sign in with {{.OIDCDisplayName}}
      </a>
      <div class="flex items-center gap-3 my-5 text-[11px] text-ink-fade uppercase tracking-[0.08em]">
        <div class="flex-1 border-t border-line-soft"></div>
        <span>or sign in with a local account</span>
        <div class="flex-1 border-t border-line-soft"></div>
      </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}}