{{define "accounts"}}{{template "base" .}}{{end}}
{{define "title"}}Accounts — MCIAS{{end}}
{{define "content"}}
<div class="page-header d-flex align-center justify-between">
  <div>
    <h1>Accounts</h1>
    <p class="text-muted text-small">Manage user and service accounts</p>
  </div>
  <button class="btn btn-primary"
          onclick="var f=document.getElementById('create-form');f.style.display=f.style.display==='none'?'block':'none'">
    + New Account
  </button>
</div>
<div id="create-form" class="card mt-2" style="display:none">
  <h2 style="font-size:1rem;font-weight:600;margin-bottom:1rem">Create Account</h2>
  <form hx-post="/accounts" hx-target="#accounts-tbody" hx-swap="afterbegin">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem">
      <div class="form-group">
        <label for="new-username">Username</label>
        <input class="form-control" type="text" id="new-username" name="username" required>
      </div>
      <div class="form-group">
        <label for="new-password">Password</label>
        <input class="form-control" type="password" id="new-password" name="password">
        <span class="form-hint">Required for human accounts</span>
      </div>
      <div class="form-group">
        <label for="new-type">Type</label>
        <select class="form-control" id="new-type" name="account_type">
          <option value="human">Human</option>
          <option value="system">System</option>
        </select>
      </div>
    </div>
    <div class="form-actions">
      <button class="btn btn-primary" type="submit">Create</button>
      <button class="btn btn-secondary" type="button"
              onclick="document.getElementById('create-form').style.display='none'">Cancel</button>
    </div>
  </form>
</div>
<div class="table-wrapper mt-2">
  <table>
    <thead>
      <tr>
        <th>Username</th><th>Type</th><th>Status</th><th>TOTP</th><th>Created</th><th>Actions</th>
      </tr>
    </thead>
    <tbody id="accounts-tbody">
      {{range .Accounts}}{{template "account_row" .}}{{end}}
    </tbody>
  </table>
</div>
{{end}}