{{define "content"}}
<div class="container-fluid p-3">
  <h4 class="mb-3">Settings</h4>
  <div class="row g-3">
    <div class="col-md-3 col-lg-2">
      {{template "settings_nav" "users"}}
    </div>
    <div class="col-md-9 col-lg-10">
      <div class="d-flex align-items-center mb-3">
        <h5 class="mb-0">Users</h5>
        <a href="/settings/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="/settings/users/{{.ID}}/edit">{{.Username}}</a></td>
              <td>
                {{if eq .Role "admin"}}<span class="badge text-bg-primary">Admin</span>
                {{else if eq .Role "contact"}}<span class="badge text-bg-info">Contact</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="/settings/users/{{.ID}}/edit" class="btn btn-sm btn-outline-secondary">Edit</a></td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{{end}}