{{define "content"}}
<div class="container-fluid p-3">
  <div class="d-flex align-items-center mb-3">
    <h4 class="mb-0">Users</h4>
    <a href="/users/new" class="btn btn-primary btn-sm ms-auto"><i class="bi bi-person-plus"></i> New User</a>
  </div>
  <div class="table-responsive">
    <table class="table table-hover align-middle">
      <thead><tr><th>Username</th><th>Role</th><th>Status</th><th>Created</th><th></th></tr></thead>
      <tbody>
        {{range .Users}}
        <tr>
          <td><a href="/users/{{.ID}}/edit">{{.Username}}</a></td>
          <td>{{if .IsAdmin}}<span class="badge text-bg-primary">Admin</span>{{else}}<span class="badge text-bg-secondary">User</span>{{end}}</td>
          <td>{{if .Enabled}}<span class="badge text-bg-success">Enabled</span>{{else}}<span class="badge text-bg-secondary">Disabled</span>{{end}}</td>
          <td>{{fmtDateShort .CreatedAt}}</td>
          <td class="text-end"><a href="/users/{{.ID}}/edit" class="btn btn-sm btn-outline-secondary">Edit</a></td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>
{{end}}