{{define "users.html"}}
{{template "shell-start" .}}
<header class="page-head">
  <div><p class="eyebrow">ADMIN</p><h1>Teammates</h1><p>Create local accounts and see who has access.</p></div>
</header>
{{template "notice" .}}
<div class="two-column users-layout">
  <section class="card form-card">
    <p class="eyebrow">NEW ACCOUNT</p><h2>Add a teammate</h2>
    <form method="post" action="/admin/users" class="stack-form">
      <input type="hidden" name="csrf" value="{{.CSRF}}">
      <label>Full name<input name="display_name" required maxlength="100" placeholder="Sara Ahmadi"></label>
      <div class="form-row">
        <label>Username<input name="username" required maxlength="40" autocomplete="off" placeholder="sara"></label>
        <label>Email <small>Optional</small><input type="email" name="email" maxlength="200" placeholder="sara@example.com"></label>
      </div>
      <label>Temporary password<input type="password" name="password" minlength="8" required autocomplete="new-password" placeholder="At least 8 characters"></label>
      <label>Access level
        <select name="role"><option value="member">Member</option><option value="admin">Admin</option></select>
      </label>
      <button class="button primary full">Create account</button>
    </form>
  </section>
  <section class="card">
    <header class="section-head"><div><p class="eyebrow">DIRECTORY</p><h2>{{len .Users}} teammates</h2></div></header>
    <div class="user-list">
      {{range .Users}}
      <div class="user-row">
        <span class="avatar">{{initial .DisplayName}}</span>
        <div><strong>{{.DisplayName}}</strong><small>@{{.Username}}{{if .Email}} · {{.Email}}{{end}}</small></div>
        <span class="badge {{if eq .Role "admin"}}approved{{else}}kind{{end}}">{{.Role}}</span>
      </div>
      {{end}}
    </div>
  </section>
</div>
{{template "shell-end" .}}
{{end}}