{% extends "_layout.html" %}
{% set active = "tokens" %}
{% block title %}beaver-gateway · tokens{% endblock %}
{% block content %}
  <h2>Create token</h2>
  <div class="card">
    <p class="muted">Plaintext is shown <strong>once</strong>, immediately after creation. Copy it before you navigate away — the database only ever holds the Argon2 hash.</p>
    <div id="token-create-result"></div>
    <form
      hx-post="{{ p }}/tokens"
      hx-target="#token-create-result"
      hx-swap="innerHTML"
      hx-on::after-request="if(event.detail.successful){this.reset();}"
    >
      <input type="hidden" name="csrf_token" value="{{ csrf }}">
      <div class="form-grid">
        <div>
          <label for="name">Name</label>
          <input id="name" name="name" type="text" placeholder="cursor / claude-desktop / mobile …" required>
        </div>
        <div>
          <label for="scope">Scope</label>
          <select id="scope" name="scope">
            {% for s in scopes %}
              <option value="{{ s }}" {% if s == "*" %}selected{% endif %}>{{ s }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <button class="primary" type="submit">Create</button>
        </div>
      </div>
    </form>
  </div>

  <h2>
    Tokens
    <span class="muted" style="font-size:0.8em; font-weight:400; margin-left:0.5rem;">
      {% if include_revoked %}
        <a href="{{ p }}/tokens">Hide revoked</a>
      {% else %}
        <a href="{{ p }}/tokens?include_revoked=1">Show revoked</a>
      {% endif %}
    </span>
  </h2>
  <div class="card">
    <table>
      <thead>
        <tr>
          <th>Name</th><th>Scope</th><th>Created</th><th>Last used</th><th>Revoked</th><th></th>
        </tr>
      </thead>
      {# Render the tbody unconditionally so the HTMX OOB swap on
         create has a target even when the table starts empty. #}
      <tbody id="tokens-rows">
        {% for token in tokens %}
          {% include "_token_row.html" %}
        {% else %}
          <tr id="tokens-empty"><td colspan="6" class="muted">No tokens yet. Create one above.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}