{% extends 'base.html' %}
{% block title %}API Keys — AgentForms{% endblock %}
{% block head_extra %}
<style nonce="{{ csp_nonce }}">
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #333; }
.container { max-width: 960px; margin: 0 auto; padding: 20px; }
nav { background: #1a1a2e; color: white; }
.card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.card h2 { font-size: 18px; margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; }
th { background: #f8f8f8; font-weight: 600; }
.btn { display: inline-block; padding: 8px 16px; background: #3b82f6; color: white; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; font-size: 14px; }
.btn:hover { background: #2563eb; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-danger { background: #dc3545; }
.btn-danger:hover { background: #bb2d3b; }
.btn-outline { background: #3b82f6; border: 1px solid #3b82f6; color: white; }
.btn-outline:hover { background: #2563eb; }
.badge { display: inline-block; padding: 2px 8px; background: #e9ecef; border-radius: 12px; font-size: 12px; }
.token { font-family: monospace; background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 12px; }
.success { background: #d4edda; color: #155724; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
.error { background: #f8d7da; color: #721c24; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
.info { background: #dbeafe; color: #1e40af; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
.empty { text-align: center; padding: 40px; color: #888; }
.back-link { display: inline-block; margin-bottom: 16px; color: #3b82f6; text-decoration: none; font-size: 14px; }
.back-link:hover { text-decoration: underline; }
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 12px 0; }
.perm-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.perm-item input[type="checkbox"] { width: 18px; height: 18px; }
.perm-item label { cursor: pointer; }
.new-key-display { background: #f0f9ff; border: 1px solid #93c5fd; padding: 16px; border-radius: 6px; margin-bottom: 16px; }
.new-key-display code { font-size: 15px; word-break: break-all; display: block; margin: 8px 0; background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #cbd5e1; }
.new-key-display .copy-btn { display: inline-block; margin-top: 8px; padding: 6px 12px; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; }
.new-key-display .copy-btn:hover { background: #2563eb; }
.new-key-display .warning { color: #d97706; font-size: 12px; margin-top: 8px; }
form input[type="text"] { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
td.text-trunc { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* MOBILE */
@media (max-width: 640px) {
.container { padding: 12px; }
.perm-grid { grid-template-columns: 1fr; }
/* Tables: card layout on mobile */
table { display: block; }
thead, tbody, tr, th, td { display: block; }
thead tr { display: none; }
tr { padding: 12px 0; border-bottom: 2px solid #e9ecef; }
td { text-align: right; padding: 6px 12px; border: none; position: relative; padding-left: 50%; }
td:before { content: attr(data-label); position: absolute; left: 12px; font-weight: 600; color: #666; text-align: left; }
td.text-trunc { max-width: none; overflow: visible; text-overflow: unset; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn-sm { min-height: 38px; }
}
</style>
{% endblock %}
{% block content %}
<div class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="{{ category }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<a href="{{ url_for('auth.dashboard') }}" class="back-link">← Back to Dashboard</a>
<div class="card">
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;">
<h2>API Keys</h2>
<button type="button" class="btn btn-sm" data-onclick="document.getElementById('createKeyForm').style.display='block'">+ New Key</button>
</div>
<!-- New key just created -->
{% if session.get('_new_api_key') %}
<div class="new-key-display">
<div style="font-weight:600; font-size:14px; color:#1e40af;">Your new API key (save now — you won't see it again):</div>
<code id="newApiKey">{{ session._new_api_key }}</code>
<button class="copy-btn" data-onclick="navigator.clipboard.writeText('{{ session._new_api_key }}'); this.textContent='Copied!'; setTimeout(() => this.textContent='Copy to clipboard', 2000);">Copy to clipboard</button>
<div class="warning">⚠ This key will not be shown again. Store it securely.</div>
</div>
{% endif %}
{% if keys %}
<table>
<thead>
<tr>
<th>Name</th>
<th>Prefix</th>
<th>Permissions</th>
<th>Last Used</th>
<th>Created</th>
<th></th>
</tr>
</thead>
<tbody>
{% for key in keys %}
<tr>
<td data-label="Name">{{ key.name }}</td>
<td data-label="Prefix"><code class="token">{{ key.key_prefix }}...</code></td>
<td data-label="Permissions">
{% set perms = key.permissions %}
{% if perms.read_forms %}<span class="badge">read</span> {% endif %}
{% if perms.write_forms %}<span class="badge">write</span> {% endif %}
{% if perms.read_submissions %}<span class="badge">subs</span> {% endif %}
{% if perms.delete_forms %}<span class="badge" style="background:#fee2e2;color:#991b1b;">delete</span> {% endif %}
{% if not perms.read_forms and not perms.write_forms and not perms.read_submissions and not perms.delete_forms %}<span class="badge" style="background:#f3f4f6;">none</span>{% endif %}
</td>
<td data-label="Last Used">{{ key.last_used_at[:16] if key.last_used_at else 'Never' }}</td>
<td data-label="Created">{{ key.created_at[:10] }}</td>
<td>
<form method="POST" action="{{ url_for('user_settings.revoke_api_key_route', key_id=key.id) }}" style="display:inline;" data-onsubmit="return confirm('Revoke this API key? It cannot be used again.')">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<button type="submit" class="btn btn-sm btn-danger">Revoke</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="empty">
<p>No API keys yet. Create one to access the programmatic form API.</p>
</div>
{% endif %}
</div>
<!-- Create key form (hidden by default) -->
<div class="card" id="createKeyForm" style="display:none;">
<h2>Create API Key</h2>
<form method="POST" action="{{ url_for('user_settings.create_api_key') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<label style="font-weight:600; font-size:14px;">Name</label>
<input type="text" name="name" placeholder="e.g. production, staging, my-agent" required>
<label style="font-weight:600; font-size:14px; margin-top:12px; display:block;">Permissions</label>
<div class="perm-grid">
<div class="perm-item">
<input type="checkbox" id="perm_read_forms" name="perm_read_forms" checked>
<label for="perm_read_forms">Read forms</label>
</div>
<div class="perm-item">
<input type="checkbox" id="perm_write_forms" name="perm_write_forms" checked>
<label for="perm_write_forms">Write forms</label>
</div>
<div class="perm-item">
<input type="checkbox" id="perm_read_submissions" name="perm_read_submissions" checked>
<label for="perm_read_submissions">Read submissions</label>
</div>
<div class="perm-item">
<input type="checkbox" id="perm_delete_forms" name="perm_delete_forms">
<label for="perm_delete_forms">Delete forms</label>
</div>
</div>
<div style="display:flex; gap:12px; margin-top:16px;">
<button type="submit" class="btn">Create Key</button>
<button type="button" class="btn" style="background:#6b7280;" data-onclick="document.getElementById('createKeyForm').style.display='none'">Cancel</button>
</div>
</form>
</div>
</div>
{% endblock %}
{% block scripts %}
<script id="data-api-keys" data-csrf="{{ csrf_token }}"></script>
<script src="/static/js/api-keys-inline.js"></script>
{% endblock %}