{{define "title"}}Users{{end}}
{{define "content"}}
<h1 class="text-xl font-bold text-white mb-6">Users</h1>

<div class="card mb-6">
  <div class="text-sm font-semibold text-gray-300 mb-3">Create user</div>
  <form method="POST" action="/admin/users">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:.75rem;align-items:end">
      <div class="field" style="margin:0">
        <label>Domain</label>
        <select name="domain_id" required>
          <option value="">Select domain...</option>
          {{range .Domains}}
          <option value="{{.ID}}">{{.Name}}</option>
          {{end}}
        </select>
      </div>
      <div class="field" style="margin:0">
        <label>Username (local part)</label>
        <input type="text" name="username" required maxlength="64" placeholder="alice"
               pattern="[a-z0-9._\-]+">
      </div>
      <div class="field" style="margin:0">
        <label>Display name</label>
        <input type="text" name="display_name" maxlength="255" placeholder="Alice Smith">
      </div>
      <div class="field" style="margin:0">
        <label>Password</label>
        <input type="password" name="password" required minlength="8" maxlength="1024">
      </div>
      <button type="submit" class="btn btn-primary" style="white-space:nowrap">Create</button>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin-top:.75rem">
      <div class="field" style="margin:0">
        <label>Quota (MB, default 1024)</label>
        <input type="number" name="quota_mb" value="1024" min="0" max="1048576">
      </div>
      <div class="field" style="margin:0;display:flex;align-items:center;gap:.5rem;padding-top:1.25rem">
        <input type="checkbox" name="domain_admin" value="1" id="da" style="width:auto">
        <label for="da" style="margin:0;cursor:pointer">Domain admin</label>
      </div>
    </div>
  </form>
</div>

<div class="card" style="padding:0;overflow:hidden">
  {{if .Users}}
  <table>
    <thead>
      <tr>
        <th>Email</th>
        <th>Domain</th>
        <th>Display name</th>
        <th>Status</th>
        <th>Role</th>
        <th>Quota used</th>
        <th>Last login</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    {{range .Users}}
    <tr>
      <td><a href="/admin/users/{{.ID}}" class="text-blue-400 hover:underline">{{.Email}}</a></td>
      <td class="text-gray-400 text-xs">{{.DomainName}}</td>
      <td class="text-gray-300">{{.DisplayName}}</td>
      <td>
        {{if .Enabled}}<span class="badge badge-green">active</span>
        {{else}}<span class="badge badge-red">disabled</span>{{end}}
      </td>
      <td>
        {{if .Admin}}<span class="badge badge-yellow">admin</span>
        {{else if .DomainAdmin}}<span class="badge badge-gray">domain admin</span>
        {{else}}<span class="badge badge-gray">user</span>{{end}}
      </td>
      <td class="text-gray-400 text-xs">{{humanBytes .UsedBytes}} / {{if .QuotaBytes}}{{humanBytes .QuotaBytes}}{{else}}unlimited{{end}}</td>
      <td class="text-gray-400 text-xs">{{if isZero .LastLogin}}never{{else}}{{shortTime .LastLogin}}{{end}}</td>
      <td><a href="/admin/users/{{.ID}}" class="btn btn-primary btn-sm">Edit</a></td>
    </tr>
    {{end}}
    </tbody>
  </table>
  {{else}}
  <div class="p-8 text-center text-gray-500 text-sm">No users found.</div>
  {{end}}
</div>
{{end}}