{{define "api_tokens"}}{{template "header" .}}
<div class="card mb-4">
  <div class="card-header">API Access</div>
  <div class="card-body">
    <p>The REST API is available under <code>/api/v1</code> on this admin listener, authenticated with a bearer token:</p>
    <pre class="bg-light p-3 rounded"><code>curl -H "Authorization: Bearer vp_xxxxxxxx" https://your-server:8081/api/v1/proxy-hosts</code></pre>
    <p class="mb-0 text-secondary">Resources: proxy-hosts, streams, certificates, access-lists, settings, logs/requests, logs/audit, stats, tokens.</p>
  </div>
</div>

<div class="d-flex justify-content-between align-items-center mb-3">
  <h6 class="mb-0">API Tokens</h6>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newTokenModal"><i class="bi bi-plus-lg"></i> New Token</button>
</div>
<div class="card">
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
      <thead class="table-light"><tr><th>Name</th><th>Prefix</th><th>Created</th><th>Last Used</th><th>Status</th><th></th></tr></thead>
      <tbody>
      {{range .Data}}
        <tr>
          <td>{{.Name}}</td>
          <td><code>{{.Prefix}}…</code></td>
          <td>{{fmtTime .CreatedAt}}</td>
          <td>{{if .LastUsedAt}}{{timeAgo (deref .LastUsedAt)}}{{else}}never{{end}}</td>
          <td>{{if .RevokedAt}}<span class="badge text-bg-secondary">revoked</span>{{else}}<span class="badge text-bg-success">active</span>{{end}}</td>
          <td class="text-end">
            {{if not .RevokedAt}}
            <form method="post" action="/api-tokens/{{.ID}}/revoke" id="rev-tok-{{.ID}}" class="d-inline">
              {{template "csrf_field" $.CSRFToken}}
            </form>
            <button type="button" class="btn btn-sm btn-outline-danger" data-confirm-delete-form="rev-tok-{{.ID}}" data-confirm-message="Revoke token &quot;{{.Name}}&quot;? Anything using it will stop working immediately.">Revoke</button>
            {{end}}
          </td>
        </tr>
      {{else}}
        <tr><td colspan="6" class="text-center text-secondary py-4">No API tokens yet.</td></tr>
      {{end}}
      </tbody>
    </table>
  </div>
</div>

<div class="modal fade" id="newTokenModal" tabindex="-1">
  <div class="modal-dialog"><div class="modal-content">
    <form method="post" action="/api-tokens/new">
      {{template "csrf_field" .CSRFToken}}
      <div class="modal-header"><h5 class="modal-title">New API Token</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">
        <label class="form-label">Name</label>
        <input class="form-control" name="name" placeholder="e.g. terraform, ci-pipeline" required>
        <p class="small text-secondary mt-2 mb-0">The token is shown once after creation — store it securely.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary">Create Token</button>
      </div>
    </form>
  </div></div>
</div>
{{template "confirm_delete_modal" .}}
{{template "footer" .}}{{end}}