{% extends "base.html" %}

{% block title %}Providers — didiAI Dashboard{% endblock %}

{% block content %}
<div class="mb-8 flex items-center justify-between">
    <div>
        <h1 class="text-2xl font-bold text-white">Providers</h1>
        <p class="mt-1 text-sm text-slate-400">Live quota, billing, and health status — refreshed from each provider's API</p>
    </div>
    <button onclick="location.reload()" class="px-4 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-white rounded-lg border border-slate-700 transition">
        ↻ Refresh
    </button>
</div>

<!-- Group by kind -->
{% set search_providers = providers | selectattr("kind", "equalto", "search") | list %}
{% set llm_providers = providers | selectattr("kind", "equalto", "llm") | list %}
{% set internal_providers = providers | selectattr("kind", "equalto", "internal") | list %}

{% if search_providers %}
<section class="mb-10">
    <h2 class="text-sm font-semibold text-slate-400 uppercase tracking-wide mb-4">🔍 Search Providers</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for provider in search_providers %}
            {% include "partials/provider_card.html" %}
        {% endfor %}
    </div>
</section>
{% endif %}

{% if llm_providers %}
<section class="mb-10">
    <h2 class="text-sm font-semibold text-slate-400 uppercase tracking-wide mb-4">🧠 LLM Providers</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for provider in llm_providers %}
            {% include "partials/provider_card.html" %}
        {% endfor %}
    </div>
</section>
{% endif %}

{% if internal_providers %}
<section class="mb-10">
    <h2 class="text-sm font-semibold text-slate-400 uppercase tracking-wide mb-4">🏠 Internal Services</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for provider in internal_providers %}
            {% include "partials/provider_card.html" %}
        {% endfor %}
    </div>
</section>
{% endif %}

<!-- Extras table -->
<section class="mt-8">
    <h2 class="text-sm font-semibold text-slate-400 uppercase tracking-wide mb-4">Raw Details</h2>
    <div class="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
        <table class="min-w-full divide-y divide-slate-800">
            <thead class="bg-slate-800/50">
                <tr>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-slate-300 uppercase">Provider</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-slate-300 uppercase">Plan</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-slate-300 uppercase">Quota</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-slate-300 uppercase">Rate Limit</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold text-slate-300 uppercase">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800 text-sm">
                {% for provider in providers %}
                <tr class="hover:bg-slate-800/30">
                    <td class="px-4 py-3 font-medium text-white">{{ provider.display_name }}</td>
                    <td class="px-4 py-3 text-slate-400">{{ provider.plan_name or '—' }}</td>
                    <td class="px-4 py-3 font-mono text-xs text-slate-300">
                        {% if provider.quota_limit %}
                            {% if provider.quota_unit == 'usd' %}${% endif %}{{ "%.2f"|format(provider.quota_used or 0) }} / {% if provider.quota_unit == 'usd' %}${% endif %}{{ "%.0f"|format(provider.quota_limit) }}
                        {% else %}—{% endif %}
                    </td>
                    <td class="px-4 py-3 text-slate-400 text-xs">{{ provider.rate_limit or '—' }}</td>
                    <td class="px-4 py-3">
                        {% if provider.healthy %}
                            <span class="inline-flex px-2 py-0.5 text-xs rounded-full bg-emerald-900/50 text-emerald-300 border border-emerald-800">healthy</span>
                        {% else %}
                            <span class="inline-flex px-2 py-0.5 text-xs rounded-full bg-rose-900/50 text-rose-300 border border-rose-800">down</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</section>
{% endblock %}