{{define "keys"}}{{template "header" .}}
{{if .NewKey}}
<div class="alert alert-primary" role="alert">
  <div class="d-flex align-items-start">
    <i class="fa-solid fa-circle-check fa-fw me-2 mt-1"></i>
    <div class="flex-grow-1">
      <strong>Key created for &ldquo;{{.NewKeyLabel}}&rdquo;.</strong> Copy it now — it is shown only once:
      <div class="input-group input-group-sm my-2">
        <input class="form-control keycode" id="newkey" value="{{.NewKey}}" readonly>
        <button class="btn btn-outline-secondary" type="button"
                onclick="navigator.clipboard.writeText(document.getElementById('newkey').value)">
          <i class="fa-solid fa-copy me-1"></i>Copy
        </button>
      </div>
      <div class="small text-body-secondary">Clients authenticate with header <code>Authorization: Bearer {{.NewKey}}</code></div>
    </div>
  </div>
</div>
{{end}}

<form method="POST" action="/admin/keys" class="card card-body shadow-sm mb-4">
  <input type="hidden" name="csrf" value="{{csrf}}">
  <div class="row g-3 align-items-end">
    <div class="col-md-4">
      <label class="form-label" for="label">Label</label>
      <input class="form-control" id="label" type="text" name="label" placeholder="e.g. mokosuitecrm" required>
    </div>
    <div class="col-md-3">
      <label class="form-label" for="rate">Rate limit / min</label>
      <input class="form-control" id="rate" type="number" name="rate" min="0" value="{{.Default}}">
      <div class="form-text">0 = unlimited</div>
    </div>
    <div class="col-md-2">
      <label class="form-label" for="expires_days">Expires (days)</label>
      <input class="form-control" id="expires_days" type="number" name="expires_days" min="0" placeholder="never">
    </div>
    <div class="col-md-3 d-grid">
      <button class="btn btn-mk" type="submit"><i class="fa-solid fa-plus me-1"></i>Create key</button>
    </div>
  </div>
</form>

<div class="d-flex justify-content-between align-items-center mb-2 gap-2">
  <input type="search" id="keySearch" class="form-control form-control-sm" style="max-width:280px;"
         placeholder="Search keys…" oninput="filterKeys()">
  <a class="btn btn-sm btn-outline-secondary" href="/admin/keys.csv"><i class="fa-solid fa-file-csv me-1"></i>Export CSV</a>
</div>

<div class="table-responsive">
  <table id="keysTable" class="table table-hover align-middle">
    <thead>
      <tr><th>ID</th><th>Label</th><th>Status</th><th>Rate/min</th><th class="text-end">Requests</th><th class="text-end">Chars</th><th>Created</th><th>Expires</th><th></th></tr>
    </thead>
    <tbody>
    {{range .KeyList}}
      <tr>
        <td><a href="/admin/keys/{{.ID}}" class="text-decoration-none">{{.ID}}</a></td>
        <td><a href="/admin/keys/{{.ID}}" class="text-decoration-none">{{.Label}}</a></td>
        <td>{{if .Disabled}}<span class="badge text-bg-secondary">disabled</span>{{else if .Expired}}<span class="badge text-bg-warning">expired</span>{{else}}<span class="badge text-bg-success">active</span>{{end}}</td>
        <td>{{if gt .RateLimitPerMin 0}}{{.RateLimitPerMin}}{{else}}<span class="text-body-secondary">unlimited</span>{{end}}</td>
        <td class="text-end">{{.Requests}}</td>
        <td class="text-end">{{.Chars}}</td>
        <td class="text-body-secondary">{{.Created.Format "2006-01-02"}}</td>
        <td class="text-body-secondary">{{if .ExpiresAt.IsZero}}&mdash;{{else}}{{.ExpiresAt.Format "2006-01-02"}}{{end}}</td>
        <td class="text-end">
          {{if not .Disabled}}
          <form method="POST" action="/admin/keys/{{.ID}}/disable" onsubmit="return confirm('Disable this key? Clients using it will stop working.');">
            <input type="hidden" name="csrf" value="{{csrf}}">
            <button class="btn btn-sm btn-outline-danger" type="submit"><i class="fa-solid fa-ban me-1"></i>Disable</button>
          </form>
          {{end}}
        </td>
      </tr>
    {{else}}
      <tr><td colspan="9" class="text-body-secondary">No keys yet.</td></tr>
    {{end}}
    </tbody>
  </table>
</div>
<script>
function filterKeys() {
  var q = document.getElementById('keySearch').value.toLowerCase();
  document.querySelectorAll('#keysTable tbody tr').forEach(function (tr) {
    tr.style.display = tr.textContent.toLowerCase().indexOf(q) >= 0 ? '' : 'none';
  });
}
</script>
{{template "footer" .}}{{end}}