{% extends 'base.html' %}
{% block content %}
  <div class="container my-4">
    <h3>API Tokens</h3>
    <div class="card mb-3">
      <div class="card-body">
        <form method="post">
          {% csrf_token %}
          <div class="row g-2">
            <div class="col-md-4">
              <input name="name" class="form-control" placeholder="Name (e.g. CLI)" />
            </div>
            <div class="col-md-4">
              <input name="scopes" class="form-control" placeholder="Scopes (space separated)" />
            </div>
            <div class="col-md-2">
              <input name="expires_days" type="number" min="0" class="form-control" placeholder="Days" />
            </div>
            <div class="col-md-2">
              <button class="btn btn-primary w-100" type="submit" name="action" value="create">Create</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    {% if created_token %}
      <div class="alert alert-info">Created token. Save it now — it won't be shown again.
    <pre class="mt-2">{{ created_token }}</pre>
      </div>
    {% endif %}

    <div class="card">
      <div class="card-header">Your tokens</div>
      <div class="card-body">
        <table class="table table-sm">
          <thead><tr><th>Name</th><th>Scopes</th><th>Created</th><th>Expires</th><th>Revoked</th><th></th></tr></thead>
          <tbody>
            {% for t in tokens %}
              <tr>
                <td>{{ t.name }}</td>
                <td>{{ t.scopes }}</td>
                <td>{{ t.created }}</td>
                <td>{{ t.expires }}</td>
                <td>{{ t.revoked }}</td>
                <td>
                  {% if not t.revoked %}
                    <form method="post" style="display:inline">
                      {% csrf_token %}
                      <input type="hidden" name="revoke_id" value="{{ t.id }}" />
                      <button class="btn btn-sm btn-outline-danger" type="submit" name="action" value="revoke">Revoke</button>
                    </form>
                  {% endif %}
                </td>
              </tr>
            {% empty %}
              <tr><td colspan="6" class="text-muted">No tokens</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
{% endblock %}