{% extends "base.html" %}
{% set active_nav = "my-organization" %}

{% block title %}API Tokens — {{ target_user_name }} — LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">API Tokens</h1>
        <p class="page-subtitle">{{ target_user_name }} ({{ target_user_email }})</p>
    </div>
    <div>
        <a href="/my-organization/users" class="btn btn-ghost">← Back to Users</a>
    </div>
</div>

{% if not has_api_access %}
<div class="card mb-lg" style="border-left: 4px solid var(--accent-yellow);">
    <div class="card-body">
        <p><strong>⚠ This user does not have API_ACCESS group membership.</strong></p>
        <p class="text-secondary">Tokens cannot be created until the user is added to the API_ACCESS group.</p>
    </div>
</div>
{% else %}
<!-- Create Token Form -->
<div class="card mb-lg">
    <div class="card-header">
        <h2 class="card-title">Create Token for {{ target_user_name }}</h2>
    </div>
    <div class="card-body">
        <form method="post" action="/my-organization/users/{{ target_user_id }}/api-tokens">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
            <div style="display: flex; gap: var(--space-md); align-items: flex-end; flex-wrap: wrap;">
                <div class="form-group" style="flex: 1; min-width: 200px;">
                    <label class="form-label" for="token_name">Token Name</label>
                    <input type="text" id="token_name" name="token_name" class="form-input"
                           placeholder="e.g. CI Integration" required minlength="1" maxlength="100" />
                </div>
                <div class="form-group" style="width: 160px;">
                    <label class="form-label" for="expires_in_days">Expires In (days)</label>
                    <input type="number" id="expires_in_days" name="expires_in_days" class="form-input"
                           value="90" min="1" max="365" />
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Create Token</button>
                </div>
            </div>
            <p class="text-muted text-sm">Scope is always <code style="background: var(--bg-tertiary); padding: 2px 6px; border-radius: 3px;">ext_org</code> (tenant-scoped, max EXTERNAL_USER permissions).</p>
        </form>
    </div>
</div>
{% endif %}

<!-- Existing Tokens -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">Existing Tokens ({{ tokens | length }})</h2>
    </div>
    {% if tokens %}
    <div class="table-container">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Prefix</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Expires</th>
                    <th>Last Used</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for t in tokens %}
                <tr>
                    <td>{{ t.token_name }}</td>
                    <td><code style="font-size: var(--text-sm);">{{ t.token_prefix }}</code></td>
                    <td>
                        {% if t.status == 'REVOKED' %}
                        <span class="badge badge-danger">Revoked</span>
                        {% elif t.is_expired %}
                        <span class="badge badge-warning">Expired</span>
                        {% else %}
                        <span class="badge badge-success">● Active</span>
                        {% endif %}
                    </td>
                    <td>{{ t.created_at | format_dt(user_preferences) }}</td>
                    <td>{{ t.expires_at | format_dt(user_preferences) }}</td>
                    <td>{{ t.last_used_at | format_dt(user_preferences) if t.last_used_at else '—' }}</td>
                    <td>
                        {% if t.status != 'REVOKED' and not t.is_expired %}
                        <form method="post"
                              action="/my-organization/users/{{ target_user_id }}/api-tokens/{{ t.id }}/revoke"
                              style="display:inline;"
                              onsubmit="return confirm('Revoke token {{ t.token_name }}?');">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
                            <button type="submit" class="btn btn-sm btn-danger">Revoke</button>
                        </form>
                        {% else %}
                        —
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="card-body">
        <p class="text-muted">No tokens found for this user.</p>
    </div>
    {% endif %}
</div>
{% endblock %}