{{define "dashboard"}}{{template "header" .}}
<div class="row g-3 mb-4">
  <div class="col-sm-4">
    <div class="card card-metric shadow-sm h-100">
      <div class="card-body">
        <div class="text-body-secondary small text-uppercase"><i class="fa-solid fa-key fa-fw me-1"></i>API Keys</div>
        <div class="metric">{{.Keys}}</div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card card-metric shadow-sm h-100">
      <div class="card-body">
        <div class="text-body-secondary small text-uppercase"><i class="fa-solid fa-arrow-right-arrow-left fa-fw me-1"></i>Requests</div>
        <div class="metric">{{.Requests}}</div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="card card-metric shadow-sm h-100">
      <div class="card-body">
        <div class="text-body-secondary small text-uppercase"><i class="fa-solid fa-font fa-fw me-1"></i>Chars Proxied</div>
        <div class="metric">{{.Chars}}</div>
      </div>
    </div>
  </div>
</div>

<p class="text-body-secondary">
  <i class="fa-solid fa-server fa-fw me-1"></i>Public <code>{{.Public}}</code>
  <i class="fa-solid fa-arrow-right mx-1"></i> upstream engine <code>{{.Upstream}}</code>
  {{if .EngineUp}}<span class="badge text-bg-success ms-1">engine up</span>{{else}}<span class="badge text-bg-danger ms-1">engine down</span>{{end}}
</p>

<div class="d-flex justify-content-between align-items-center mt-4 mb-2">
  <h2 class="h5 mb-0"><i class="fa-solid fa-chart-column fa-fw me-1"></i>Requests</h2>
  <div class="btn-group btn-group-sm" role="group" aria-label="Range">
    <a class="btn btn-outline-secondary{{if eq .Range "24h"}} active{{end}}" href="/admin/?range=24h">24h</a>
    <a class="btn btn-outline-secondary{{if eq .Range "7d"}} active{{end}}" href="/admin/?range=7d">7d</a>
    <a class="btn btn-outline-secondary{{if eq .Range "30d"}} active{{end}}" href="/admin/?range=30d">30d</a>
  </div>
</div>
<div class="card shadow-sm mb-3"><div class="card-body">
  <div class="d-flex align-items-end gap-1" style="height:120px;">
    {{range .Series}}
    <div class="flex-fill rounded-top" title="{{.Start.Format "01-02 15:04"}} — {{.Requests}} req, {{.Chars}} chars"
         style="background:var(--accent-color-primary); height:{{pct .Requests $.MaxReq}}%; min-height:2px;"></div>
    {{end}}
  </div>
  <div class="d-flex justify-content-between text-body-secondary small mt-1">
    <span>{{(index .Series 0).Start.Format "01-02 15:04"}}</span>
    <span>now</span>
  </div>
</div></div>

<h2 class="h5 mt-4 mb-2"><i class="fa-solid fa-chart-simple fa-fw me-1"></i>Per-key usage</h2>
<div class="table-responsive">
  <table class="table table-sm table-hover align-middle">
    <thead><tr><th>ID</th><th>Label</th><th>Status</th><th class="text-end">Requests</th><th class="text-end">Chars</th><th>Last used</th></tr></thead>
    <tbody>
    {{range .KeyList}}
      <tr>
        <td>{{.ID}}</td>
        <td>{{.Label}}</td>
        <td>{{if .Disabled}}<span class="badge text-bg-secondary">disabled</span>{{else}}<span class="badge text-bg-success">active</span>{{end}}</td>
        <td class="text-end">{{.Requests}}</td>
        <td class="text-end">{{.Chars}}</td>
        <td class="text-body-secondary">{{if .LastUsed.IsZero}}&mdash;{{else}}{{.LastUsed.Format "2006-01-02 15:04"}}{{end}}</td>
      </tr>
    {{else}}
      <tr><td colspan="6" class="text-body-secondary">No keys yet — create one under <a href="/admin/keys">API Keys</a>.</td></tr>
    {{end}}
    </tbody>
  </table>
</div>

<h2 class="h5 mt-4 mb-2"><i class="fa-solid fa-clock-rotate-left fa-fw me-1"></i>Recent activity</h2>
<div class="table-responsive">
  <table class="table table-sm table-hover align-middle">
    <thead><tr><th>Time (UTC)</th><th>Key</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>{{.KeyLabel}} <span class="text-body-secondary">#{{.KeyID}}</span></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="5" class="text-body-secondary">No requests recorded yet.</td></tr>
    {{end}}
    </tbody>
  </table>
</div>
{{template "footer" .}}{{end}}