{% extends "base.html" %}

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

{% block content %}
<div class="content-header d-flex justify-content-between align-items-center">
    <div>
        <h1><i class="bi bi-key"></i> OAuth Clients</h1>
        <p class="lead">Manage OAuth 2.0 client registrations.</p>
    </div>
    <a href="/admin/oauth/clients/new" class="btn btn-primary">
        <i class="bi bi-plus-circle"></i> New Client
    </a>
</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">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Client ID</th>
                        <th scope="col">Name</th>
                        <th scope="col">Redirect URIs</th>
                        <th scope="col">Grant Types</th>
                        <th scope="col">Scopes</th>
                        <th scope="col">Status</th>
                        <th scope="col">Created</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for client in clients %}
                    <tr>
                        <td><span class="badge bg-secondary">#{{ client.id }}</span></td>
                        <td><code>{{ client.client_id }}</code></td>
                        <td>{{ client.name }}</td>
                        <td><small>{{ client.redirect_uris | join(', ') }}</small></td>
                        <td><span class="badge bg-info">{{ client.grant_types | join(', ') }}</span></td>
                        <td><span class="badge bg-secondary">{{ client.scopes | join(', ') }}</span></td>
                        <td>
                            {% if client.is_active %}
                            <span class="badge bg-success">Active</span>
                            {% else %}
                            <span class="badge bg-secondary">Inactive</span>
                            {% endif %}
                        </td>
                        <td><small class="text-muted">{{ client.created_at.strftime('%Y-%m-%d') }}</small></td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="/admin/oauth/clients/{{ client.id }}/edit" class="btn btn-outline-primary" title="Edit">
                                    <i class="bi bi-pencil-square"></i>
                                </a>
                                <form method="post" action="/admin/oauth/clients/{{ client.id }}/delete" style="display:inline;">
                                    <button type="submit" class="btn btn-outline-danger" onclick="return confirm('Are you sure you want to delete this client?')" title="Delete">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="9" class="text-center text-muted py-4">
                            <i class="bi bi-inbox display-4"></i>
                            <p class="mt-2">No OAuth clients found. <a href="/admin/oauth/clients/new">Create your first client</a>.</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/clients?page={{ page - 1 }}" 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/clients?page={{ p }}">{{ p }}</a></li>
                    {% endif %}
                {% endfor %}

                {% if page < total_pages %}
                <li class="page-item">
                    <a class="page-link" href="/admin/oauth/clients?page={{ page + 1 }}" 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 %}