{{define "title"}}Account · restic-manager{{end}}

{{define "content"}}
{{$page := .Page}}
<div class="max-w-[520px] mx-auto px-8 pb-14">
  <div class="crumbs pt-6">
    <a href="/">Dashboard</a><span class="sep">/</span>
    <span class="text-ink-mid">account</span>
  </div>

  <h1 class="text-[22px] font-medium tracking-[-0.005em] mt-3.5">Account</h1>
  <div class="text-[12.5px] text-ink-mute mt-2 leading-[1.6]">
    Signed in as <span class="mono text-ink-mid">{{$page.Username}}</span>
    ({{$page.Role}}). Change your password below.
  </div>

  {{if $page.Saved}}
    <div class="mt-6 panel rounded-[7px] p-4"
         style="border-color: color-mix(in oklch, var(--ok), transparent 60%);">
      <div class="text-ok text-[13px]">Password updated.</div>
    </div>
  {{end}}

  <form method="post" action="/settings/account" class="mt-6 panel rounded-[7px] p-6 space-y-4">
    {{if not $page.MustChange}}
      <div>
        <label class="field-label" for="current">Current password</label>
        <input id="current" name="current_password" type="password" class="field"
               required autocomplete="current-password" />
      </div>
    {{end}}
    <div>
      <label class="field-label" for="new">New password</label>
      <input id="new" name="new_password" type="password" class="field"
             required minlength="12" autocomplete="new-password" />
    </div>
    <div>
      <label class="field-label" for="confirm">Confirm new password</label>
      <input id="confirm" name="confirm_password" type="password" class="field"
             required minlength="12" autocomplete="new-password" />
    </div>
    {{if $page.Error}}<div class="text-bad text-[12.5px]">{{$page.Error}}</div>{{end}}
    <button type="submit" class="btn btn-primary btn-block btn-lg">Update password</button>
  </form>
</div>
{{end}}