{% set icon_map = {
    'openai': '🟢', 'anthropic': '🟠', 'gemini': '🔵',
    'groq': '⚡', 'together': '🤝', 'deepseek': '🔬',
    'openrouter': '🔀', 'mistral': '🌬️', 'fireworks': '🎆',
    'perplexity': '🔍', 'xai': '❌', 'qwen': '🌐',
    'opencode': '🆓', 'custom': '⚙️'
} %}
<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 %}"
         id="provider-card-{{ provider.id }}">
        <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, '') or logo_map.get(provider.prefix, '') %}
                    {% if logo_slug %}
                    <img src="{{ provider_logo_url(logo_slug) }}" alt="{{ provider.id }}" class="w-6 h-6" style="filter: invert(1) brightness(2)">
                    {% else %}
                    <span class="text-2xl">{{ icon_map.get(provider.id, icon_map.get(provider.prefix, '⚙️')) }}</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 class="text-blue-400 hover:text-blue-300 text-sm font-medium edit-provider-btn"
                    data-id="{{ provider.id }}"
                    data-prefix="{{ provider.prefix }}"
                    data-api-type="{{ provider.api_type }}"
                    data-base-url="{{ provider.base_url }}"
                    data-models="{{ provider.models_list | join(', ') }}"
                    data-has-key="{{ 'true' if provider.api_key else 'false' }}">Edit</button>
            <button hx-post="/dashboard/api/providers/{{ provider.id }}/test"
                    hx-target="#test-status-{{ provider.id }}"
                    hx-swap="innerHTML"
                    class="text-green-400 hover:text-green-300 text-sm font-medium">Test</button>
            <span id="test-status-{{ provider.id }}" class="text-sm"></span>
            <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 %}