{{define "token_list"}}
<div id="token-list">
  {{if .Tokens}}
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>JTI</th><th>Issued</th><th>Expires</th><th>Status</th><th>Action</th>
        </tr>
      </thead>
      <tbody>
        {{range .Tokens}}
        <tr id="token-row-{{truncateJTI .JTI}}">
          <td><code style="font-size:.75rem">{{truncateJTI .JTI}}</code></td>
          <td class="text-small text-muted">{{formatTime .IssuedAt}}</td>
          <td class="text-small text-muted">{{formatTime .ExpiresAt}}</td>
          <td>
            {{if .IsRevoked}}
            <span class="badge badge-deleted">revoked</span>
            {{else if .IsExpired}}
            <span class="badge badge-inactive">expired</span>
            {{else}}
            <span class="badge badge-active">active</span>
            {{end}}
          </td>
          <td>
            {{if not .IsRevoked}}
            <button class="btn btn-sm btn-danger"
                    hx-delete="/token/{{.JTI}}"
                    hx-target="#token-row-{{truncateJTI .JTI}}"
                    hx-swap="outerHTML"
                    hx-confirm="Revoke this token?">Revoke</button>
            {{end}}
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{else}}
  <p class="text-muted text-small">No tokens issued.</p>
  {{end}}
</div>
{{end}}