{{define "key_detail"}}{{template "header" .}}
<p><a href="/admin/keys" class="text-decoration-none"><i class="fa-solid fa-arrow-left me-1"></i>All keys</a></p>
<div class="row g-3">
  <div class="col-md-6">
    <div class="card shadow-sm h-100">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="fa-solid fa-key me-1"></i>Key #{{.Key.ID}}</span>
        {{if .Key.Disabled}}<span class="badge text-bg-secondary">disabled</span>{{else if .Key.Expired}}<span class="badge text-bg-warning">expired</span>{{else}}<span class="badge text-bg-success">active</span>{{end}}
      </div>
      <div class="card-body">
        <form method="POST" action="/admin/keys/{{.Key.ID}}">
          <input type="hidden" name="csrf" value="{{csrf}}">
          <div class="mb-3">
            <label class="form-label" for="label">Label</label>
            <input class="form-control" id="label" name="label" value="{{.Key.Label}}">
          </div>
          <div class="mb-3">
            <label class="form-label" for="rate">Rate limit / min</label>
            <input class="form-control" id="rate" type="number" min="0" name="rate" value="{{.Key.RateLimitPerMin}}">
            <div class="form-text">0 = unlimited</div>
          </div>
          <div class="mb-3">
            <label class="form-label" for="expires">Expires</label>
            <input class="form-control" id="expires" type="date" name="expires" value="{{if not .Key.ExpiresAt.IsZero}}{{.Key.ExpiresAt.Format "2006-01-02"}}{{end}}">
            <div class="form-text">Blank = never expires</div>
          </div>
          <button class="btn btn-mk" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>Save</button>
        </form>
        <hr>
        {{if .Key.Disabled}}
        <form method="POST" action="/admin/keys/{{.Key.ID}}/enable">
          <input type="hidden" name="csrf" value="{{csrf}}">
          <button class="btn btn-outline-success" type="submit"><i class="fa-solid fa-circle-check me-1"></i>Re-enable key</button>
        </form>
        {{else}}
        <form method="POST" action="/admin/keys/{{.Key.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-outline-danger" type="submit"><i class="fa-solid fa-ban me-1"></i>Disable key</button>
        </form>
        {{end}}
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card shadow-sm h-100">
      <div class="card-header"><i class="fa-solid fa-chart-simple me-1"></i>Usage</div>
      <div class="card-body">
        <dl class="row mb-0">
          <dt class="col-6">Requests</dt><dd class="col-6">{{.Key.Requests}}</dd>
          <dt class="col-6">Chars proxied</dt><dd class="col-6">{{.Key.Chars}}</dd>
          <dt class="col-6">Rate limit</dt><dd class="col-6">{{if gt .Key.RateLimitPerMin 0}}{{.Key.RateLimitPerMin}}/min{{else}}<span class="text-body-secondary">unlimited</span>{{end}}</dd>
          <dt class="col-6">Created</dt><dd class="col-6 text-body-secondary">{{.Key.Created.Format "2006-01-02 15:04"}}</dd>
          <dt class="col-6">Last used</dt><dd class="col-6 text-body-secondary">{{if .Key.LastUsed.IsZero}}&mdash;{{else}}{{.Key.LastUsed.Format "2006-01-02 15:04"}}{{end}}</dd>
          <dt class="col-6">Expires</dt><dd class="col-6 text-body-secondary">{{if .Key.ExpiresAt.IsZero}}never{{else}}{{.Key.ExpiresAt.Format "2006-01-02"}}{{end}}</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

<h2 class="h5 mt-4 mb-2"><i class="fa-solid fa-chart-column fa-fw me-1"></i>Requests (last 24h)</h2>
<div class="card shadow-sm mb-3"><div class="card-body">
  <div class="d-flex align-items-end gap-1" style="height:100px;">
    {{range .Series}}
    <div class="flex-fill rounded-top" title="{{.Start.Format "15:04"}} — {{.Requests}} req, {{.Chars}} chars"
         style="background:var(--accent-color-primary); height:{{pct .Requests $.MaxReq}}%; min-height:2px;"></div>
    {{end}}
  </div>
</div></div>

<div class="d-flex justify-content-between align-items-center mt-4 mb-2">
  <h2 class="h5 mb-0"><i class="fa-solid fa-clock-rotate-left me-1"></i>Recent activity (this key)</h2>
  <a class="btn btn-sm btn-outline-secondary" href="/admin/keys/{{.Key.ID}}/events.csv"><i class="fa-solid fa-file-csv me-1"></i>Export CSV</a>
</div>
<div class="table-responsive">
  <table class="table table-sm table-hover align-middle">
    <thead><tr><th>Time (UTC)</th><th>Endpoint</th><th class="text-end">Chars</th><th>Status</th></tr></thead>
    <tbody>
    {{range .Events}}
      <tr>
        <td class="text-body-secondary">{{.Time.Format "01-02 15:04:05"}}</td>
        <td><code>{{.Endpoint}}</code></td>
        <td class="text-end">{{.Chars}}</td>
        <td>{{if ge .Status 400}}<span class="badge text-bg-danger">{{.Status}}</span>{{else}}<span class="badge text-bg-success">{{.Status}}</span>{{end}}</td>
      </tr>
    {{else}}
      <tr><td colspan="4" class="text-body-secondary">No activity recorded for this key.</td></tr>
    {{end}}
    </tbody>
  </table>
</div>
{{template "footer" .}}{{end}}