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

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

  <div class="flex items-baseline justify-between mt-3.5">
    <h1 class="text-[22px] font-medium tracking-[-0.005em]">
      Users
      <span class="text-ink-fade font-normal text-[14px] ml-2">{{len $page.Users}}</span>
    </h1>
    <div class="flex gap-2">
      <a href="/settings/users/new" class="btn btn-primary">+ Add user</a>
    </div>
  </div>

  <form method="get" action="/settings/users" class="mt-3 text-[12px] text-ink-mute">
    <label class="cursor-pointer flex items-center gap-2">
      <input type="checkbox" name="show_disabled" value="1"
             {{if $page.ShowDisabled}}checked{{end}}
             onchange="this.form.submit()" />
      Show disabled users
    </label>
  </form>

  <div class="panel mt-4 rounded-[7px] overflow-hidden">
    {{/* Header — Username/Email/Role/Last login are clickable sort
         links. Hrefs are pre-built server-side ($page.SortHrefs) so
         html/template's URL-attribute escaping doesn't trip on the
         '=' chars. Same pattern as the audit log. */}}
    <div class="user-row head">
      <div>
        <a href="{{index $page.SortHrefs "username"}}"
           class="sort-header">Username <span class="sort-glyph">{{sortGlyph "username" $page.Sort $page.Dir}}</span></a>
      </div>
      <div>
        <a href="{{index $page.SortHrefs "email"}}"
           class="sort-header">Email <span class="sort-glyph">{{sortGlyph "email" $page.Sort $page.Dir}}</span></a>
      </div>
      <div>
        <a href="{{index $page.SortHrefs "role"}}"
           class="sort-header">Role <span class="sort-glyph">{{sortGlyph "role" $page.Sort $page.Dir}}</span></a>
      </div>
      <div>
        <a href="{{index $page.SortHrefs "last_login_at"}}"
           class="sort-header">Last login <span class="sort-glyph">{{sortGlyph "last_login_at" $page.Sort $page.Dir}}</span></a>
      </div>
      <div>Status</div>
      <div></div>
    </div>
    {{range $page.Users}}
      <div class="user-row{{if .Disabled}} disabled{{end}}">
        <div class="mono text-ink">
          <a href="/settings/users/{{.ID}}/edit" class="hover:underline">{{.Username}}</a>
        </div>
        <div class="mono text-ink-mid text-[12px]">{{if .Email}}{{.Email}}{{else}}<span class="text-ink-fade">—</span>{{end}}</div>
        <div class="mono text-[12px] text-ink-mid">{{.Role}}</div>
        <div class="mono text-[12px] text-ink-mute">
          {{if eq .LastLoginAt "never"}}<span class="text-ink-fade">never</span>{{else}}{{.LastLoginAt}}{{end}}
        </div>
        <div>
          {{if .Disabled}}<span class="tag" style="color: var(--ink-fade);">disabled</span>
          {{else if .MustChangePassword}}<span class="tag" style="color: var(--warn); border-color: color-mix(in oklch, var(--warn), transparent 60%); background: color-mix(in oklch, var(--warn), transparent 92%);">setup pending</span>
          {{else}}<span class="tag" style="color: var(--ok);">enabled</span>{{end}}
          {{if eq .AuthSource "oidc"}}<span class="tag" style="color: var(--accent); border-color: color-mix(in oklch, var(--accent), transparent 60%); background: color-mix(in oklch, var(--accent), transparent 92%); margin-left: 4px;">oidc</span>{{end}}
        </div>
        <div class="text-right">
          <a href="/settings/users/{{.ID}}/edit" class="btn">Edit</a>
        </div>
      </div>
    {{end}}
  </div>
</div>
{{end}}