{% extends 'base.html' %}
{% block title %}API Keys — Settings{% endblock %}

{% block content %}
<div class="settings-wrapper">
  <div class="settings-header">
    <h2 class="section-title">Settings</h2>
    <div class="settings-tabs">
      <a href="{{ url_for('settings.index') }}" class="tab-link">Users &amp; Access</a>
      <a href="{{ url_for('settings.api_keys') }}" class="tab-link active">API Keys</a>
      <a href="{{ url_for('settings.modules') }}" class="tab-link">Modules</a>
    </div>
  </div>

  <div class="settings-section">
    <div class="section-toolbar">
      <h3>API Keys</h3>
    </div>
    <p class="section-hint">
      API keys allow programmatic access to sub-applications.
      Pass the key as an <code>X-Api-Key</code> header in your requests.
    </p>

    <!-- New key form -->
    <form method="POST" action="{{ url_for('settings.new_api_key') }}" class="form-inline-card">
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">User</label>
          <select name="user_id" class="form-select" required>
            <option value="">— select user —</option>
            {% for u in users %}
            <option value="{{ u.id }}">{{ u.username }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Application</label>
          <select name="app_name" class="form-select" required>
            <option value="">— select app —</option>
            {% for app in registered_apps %}
            <option value="{{ app['id'] }}">{{ app.icon }} {{ app.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group form-group--grow">
          <label class="form-label">Description (optional)</label>
          <input type="text" name="description" class="form-input" placeholder="e.g. CI/CD integration" />
        </div>
        <div class="form-group form-group--action">
          <label class="form-label">&nbsp;</label>
          <button type="submit" class="btn btn-primary">Generate Key</button>
        </div>
      </div>
    </form>

    <!-- Keys table -->
    <div class="table-wrapper">
      <table class="data-table">
        <thead>
          <tr>
            <th>User</th>
            <th>Application</th>
            <th>Key</th>
            <th>Description</th>
            <th>Status</th>
            <th>Created</th>
            <th>Last Used</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for k in keys %}
          <tr class="{{ 'row-inactive' if not k.is_active }}">
            <td>{{ k.user.username }}</td>
            <td>{{ k.app_name }}</td>
            <td><code class="key-cell">{{ k.key[:16] }}…</code></td>
            <td class="text-muted">{{ k.description or '—' }}</td>
            <td>
              {% if k.is_active %}
                <span class="badge badge-active">active</span>
              {% else %}
                <span class="badge badge-inactive">revoked</span>
              {% endif %}
            </td>
            <td class="text-muted">{{ k.created_at.strftime('%Y-%m-%d') }}</td>
            <td class="text-muted">{{ k.last_used_at.strftime('%Y-%m-%d') if k.last_used_at else '—' }}</td>
            <td>
              {% if k.is_active %}
              <form method="POST" action="{{ url_for('settings.revoke_api_key', key_id=k.id) }}"
                    onsubmit="return confirm('Revoke this API key?')">
                <button type="submit" class="btn btn-sm btn-danger">Revoke</button>
              </form>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
          {% if not keys %}
          <tr><td colspan="8" class="empty-row">No API keys yet.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}