{{template "header" .}}

{{if .NewKey}}
<section class="panel">
  <h1 class="glow">// key generated</h1>
  <p>copy it now — it is stored hashed and will not be shown again:</p>
  <pre class="keybox">{{.NewKey}}</pre>
</section>
{{end}}

<section class="panel">
  <h1 class="glow">// api keys</h1>
  <p class="muted">keys grant full API access via <code>X-API-Key</code> or <code>Authorization: Bearer</code>.</p>
  <form method="post" action="/keys/create" class="inline-form">
    <input type="text" name="name" placeholder="key name (e.g. laptop-cli)" required maxlength="60">
    <button type="submit" class="btn primary">generate ▸</button>
  </form>
  {{if not .Keys}}<p class="muted">no keys issued.</p>{{end}}
  <ul class="key-list">
    {{range .Keys}}
    <li class="key-row">
      <span class="key-name">{{.Name}}</span>
      <span class="muted">created {{dateFmt .CreatedAt}}</span>
      <span class="muted push">{{if .LastUsed.Valid}}last used {{dateFmt .LastUsed.String}}{{else}}never used{{end}}</span>
      <form method="post" action="/keys/{{.ID}}/delete" onsubmit="return confirm('revoke this key?')">
        <button type="submit" class="btn ghost">revoke ✕</button>
      </form>
    </li>
    {{end}}
  </ul>
</section>

{{template "footer" .}}