{% extends "base.html" %}

{% block title %}OAuth Tokens - Mock API Admin{% endblock %}

{% block content %}
<div class="content-header d-flex justify-content-between align-items-center">
    <div>
        <h1><i class="bi bi-shield-lock"></i> OAuth Tokens</h1>
        <p class="lead">Manage OAuth 2.0 access and refresh tokens.</p>
    </div>
</div>

{% if error %}
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ error }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0">Filters</h5>
    </div>
    <div class="card-body">
        <form method="get" action="/admin/oauth/tokens" class="row g-3">
            <div class="col-md-3">
                <label for="client_id" class="form-label">Client ID</label>
                <input type="text" class="form-control" id="client_id" name="client_id" value="{{ client_id if client_id else '' }}" placeholder="client_identifier">
            </div>
            <div class="col-md-3">
                <label for="user_id" class="form-label">User ID</label>
                <input type="number" class="form-control" id="user_id" name="user_id" value="{{ user_id if user_id else '' }}" placeholder="123">
            </div>
            <div class="col-md-3">
                <label for="active" class="form-label">Status</label>
                <select class="form-select" id="active" name="active">
                    <option value="">All</option>
                    <option value="true" {% if active == true %}selected{% endif %}>Active</option>
                    <option value="false" {% if active == false %}selected{% endif %}>Expired</option>
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="submit" class="btn btn-primary me-2">Filter</button>
                <a href="/admin/oauth/tokens" class="btn btn-outline-secondary">Clear</a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Access Token</th>
                        <th scope="col">Client ID</th>
                        <th scope="col">User ID</th>
                        <th scope="col">Scopes</th>
                        <th scope="col">Expires</th>
                        <th scope="col">Status</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for token in tokens %}
                    <tr>
                        <td><span class="badge bg-secondary">#{{ token.id }}</span></td>
                        <td><code>{{ token.access_token[:20] }}...</code></td>
                        <td><code>{{ token.client_id }}</code></td>
                        <td>{% if token.user_id %}{{ token.user_id }}{% else %}<span class="text-muted">—</span>{% endif %}</td>
                        <td><span class="badge bg-secondary">{{ token.scopes | join(', ') }}</span></td>
                        <td><small class="text-muted">{{ token.expires_at.strftime('%Y-%m-%d %H:%M') }}</small></td>
                        <td>
                            {% if token.expires_at < now %}
                            <span class="badge bg-danger">Expired</span>
                            {% else %}
                            <span class="badge bg-success">Active</span>
                            {% endif %}
                        </td>
                        <td>
                            <form method="post" action="/admin/oauth/tokens/{{ token.id }}/revoke" style="display:inline;">
                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure you want to revoke this token?')" title="Revoke">
                                    <i class="bi bi-x-circle"></i> Revoke
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="text-center text-muted py-4">
                            <i class="bi bi-inbox display-4"></i>
                            <p class="mt-2">No OAuth tokens found.</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if total_pages > 1 %}
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if page > 1 %}
                <li class="page-item">
                    <a class="page-link" href="/admin/oauth/tokens?page={{ page - 1 }}{% if client_id %}&client_id={{ client_id }}{% endif %}{% if user_id %}&user_id={{ user_id }}{% endif %}{% if active is not none %}&active={{ active }}{% endif %}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% endif %}

                {% for p in range(1, total_pages + 1) %}
                    {% if p == page %}
                    <li class="page-item active"><a class="page-link" href="#">{{ p }}</a></li>
                    {% else %}
                    <li class="page-item"><a class="page-link" href="/admin/oauth/tokens?page={{ p }}{% if client_id %}&client_id={{ client_id }}{% endif %}{% if user_id %}&user_id={{ user_id }}{% endif %}{% if active is not none %}&active={{ active }}{% endif %}">{{ p }}</a></li>
                    {% endif %}
                {% endfor %}

                {% if page < total_pages %}
                <li class="page-item">
                    <a class="page-link" href="/admin/oauth/tokens?page={{ page + 1 }}{% if client_id %}&client_id={{ client_id }}{% endif %}{% if user_id %}&user_id={{ user_id }}{% endif %}{% if active is not none %}&active={{ active }}{% endif %}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
</div>
{% endblock %}