{% extends "base.html" %}

{% block title %}API Clients - LSMC Atlas{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold">API Clients</h1>
        <a href="/api-clients/new" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
            + New API Client
        </a>
    </div>

    {% if clients %}
    <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Client Name
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Permissions
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Rate Limit
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Expires
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Created
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for client, revision in clients %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <a href="/api-clients/{{ client.euid }}" class="text-blue-600 hover:text-blue-800 font-medium">
                            {{ client.client_name }}
                        </a>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if revision.is_active %}
                            {% if revision.expires_at and revision.expires_at < now %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                Expired
                            </span>
                            {% else %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                Active
                            </span>
                            {% endif %}
                        {% else %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                            Inactive
                        </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex flex-wrap gap-1">
                            {% for perm in revision.permissions[:3] %}
                            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded">
                                {{ perm }}
                            </span>
                            {% endfor %}
                            {% if revision.permissions|length > 3 %}
                            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
                                +{{ revision.permissions|length - 3 }} more
                            </span>
                            {% endif %}
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ revision.rate_limit_per_minute or 'None' }}
                        {% if revision.rate_limit_per_minute %}/min{% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {% if revision.expires_at %}
                        {{ revision.expires_at.strftime('%Y-%m-%d') }}
                        {% else %}
                        Never
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ client.created_at.strftime('%Y-%m-%d') }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="/api-clients/{{ client.euid }}" class="text-blue-600 hover:text-blue-900 mr-3">
                            View
                        </a>
                        <a href="/api-clients/{{ client.euid }}/edit" class="text-blue-600 hover:text-blue-900">
                            Edit
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="bg-white shadow-md rounded-lg p-8 text-center">
        <p class="text-gray-500 mb-4">No API clients yet.</p>
        <a href="/api-clients/new" class="text-blue-600 hover:text-blue-800">
            Create your first API client &rarr;
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}