{% set logo_map = {
    'openai': 'openai', 'anthropic': '', 'gemini': 'googlegemini',
    'groq': 'groq', 'together': 'togetherdotai', 'deepseek': 'deepseek',
    'openrouter': 'openrouter', 'mistral': 'mistralai', 'fireworks': 'fireworks',
    'perplexity': 'perplexity', 'xai': 'x', 'qwen': ''
} %}
{% set icon_map = {
    'openai': '🟢', 'anthropic': '🟠', 'gemini': '🔵',
    'groq': '⚡', 'together': '🤝', 'deepseek': '🔬',
    'openrouter': '🔀', 'mistral': '🌬️', 'fireworks': '🎆',
    'perplexity': '🔍', 'xai': '❌', 'qwen': '🌐'
} %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    {% for provider in providers %}
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 {% if not provider.is_enabled %}opacity-50{% endif %}">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center space-x-3">
                <div class="flex items-center justify-center w-8 h-8">
                    {% set logo_slug = logo_map.get(provider.id, '') %}
                    {% if logo_slug %}
                    <img src="https://cdn.simpleicons.org/{{ logo_slug }}/white" alt="{{ provider.id }}" class="w-6 h-6" style="filter: invert(1) brightness(2)">
                    {% else %}
                    <span class="text-2xl">{{ icon_map.get(provider.id, '⚙️') }}</span>
                    {% endif %}
                </div>
                <div>
                    <h3 class="text-lg font-bold text-white">{{ provider.id }}</h3>
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-700 text-gray-300">{{ provider.api_type }}</span>
                </div>
            </div>
            <div class="flex items-center space-x-2">
                <button hx-patch="/dashboard/api/providers/{{ provider.id }}/toggle" hx-target="#providers-grid"
                        class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium transition-colors
                        {% if provider.is_enabled %}bg-green-900 text-green-200{% else %}bg-gray-700 text-gray-400{% endif %}">
                    {{ 'Enabled' if provider.is_enabled else 'Disabled' }}
                </button>
            </div>
        </div>
        <div class="space-y-3">
            <div>
                <p class="text-gray-500 text-xs uppercase tracking-wide mb-1">Base URL</p>
                <p class="text-gray-300 text-sm font-mono break-all">{{ provider.base_url }}</p>
            </div>
            <div>
                <p class="text-gray-500 text-xs uppercase tracking-wide mb-2">Models</p>
                <div class="flex flex-wrap gap-2">
                    {% for model in provider.models_list %}
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-indigo-900 text-indigo-200">{{ model }}</span>
                    {% endfor %}
                    {% if not provider.models_list %}
                    <span class="text-gray-500 text-sm">No models configured</span>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="flex items-center space-x-3 mt-4 pt-4 border-t border-gray-700">
            <button onclick="editProvider('{{ provider.id }}', '{{ provider.prefix }}', '{{ provider.api_type }}', '{{ provider.base_url }}', '{{ provider.models_list | join(', ') }}', {% if provider.api_key %}true{% else %}false{% endif %})"
                    class="text-blue-400 hover:text-blue-300 text-sm font-medium">Edit</button>
            <button hx-delete="/dashboard/api/providers/{{ provider.id }}" hx-target="#providers-grid"
                    hx-confirm="Delete provider '{{ provider.id }}'?"
                    class="text-red-400 hover:text-red-300 text-sm font-medium">Delete</button>
        </div>
    </div>
    {% endfor %}
</div>

{% if not providers %}
<div class="bg-gray-800 rounded-xl p-8 border border-gray-700 text-center">
    <p class="text-gray-400">No providers configured. Click "Add Provider" to create one.</p>
</div>
{% endif %}