{% if routing_live and routing_live.sticky %}
<div class="mb-6 bg-gray-800 rounded-xl border border-gray-700 p-4">
    <h3 class="text-sm font-semibold text-white mb-2">Sticky routing pins</h3>
    <p class="text-xs text-gray-500 mb-3">Strategy: <span class="text-gray-300 font-mono">{{ routing_live.account_strategy }}</span></p>
    <ul class="text-sm space-y-1">
        {% for row in routing_live.sticky %}
        <li class="text-gray-300 font-mono text-xs">
            {{ row.client_key }} → {{ row.account_id }} ({{ row.uses }} uses)
        </li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{% if overview.providers %}
{% for provider in overview.providers %}
<div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-700 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h3 class="text-white font-semibold font-mono">{{ provider.prefix }}</h3>
            <p class="text-gray-500 text-xs mt-1">
                Gateway provider <span class="text-gray-400">{{ provider.id }}</span>
                · inventory <span class="text-gray-400">{{ provider.inventory_provider_id }}</span>
            </p>
        </div>
        <div class="text-right text-sm">
            <p class="text-gray-400">{{ provider.account_count }} routable account(s)</p>
            {% if provider.quota %}
            <p class="text-xs mt-1 {% if provider.quota.status == 'exhausted' %}text-red-400{% elif provider.quota.status == 'warning' %}text-amber-400{% else %}text-gray-400{% endif %}">
                Quota: {{ "{:,}".format(provider.quota.used) }} / {{ "{:,}".format(provider.quota.limit) }} {{ provider.quota.metric }}
                ({{ provider.quota.status }}) · resets in {{ provider.quota.resets_in }}
            </p>
            {% endif %}
            {% if provider.models %}
            <p class="text-gray-500 text-xs mt-1 max-w-md truncate" title="{{ provider.models | join(', ') }}">
                Models: {{ provider.models | join(', ') }}
            </p>
            {% endif %}
        </div>
    </div>

    {% if provider.accounts %}
    {% set ns = namespace(next_shown=false) %}
    <ol class="divide-y divide-gray-700">
        {% for account in provider.accounts %}
        <li class="px-6 py-4 flex flex-wrap items-center gap-4 {% if account.cooldown_active %}bg-red-950/20{% endif %}">
            <div class="flex items-center gap-3 min-w-[4rem]">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-900 border border-gray-600 text-sm font-bold text-blue-300">
                    {{ account.order }}
                </span>
                <div class="text-xs text-gray-500 leading-tight">
                    <div>try order</div>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex flex-wrap items-center gap-2">
                    <code class="text-sm text-gray-200 font-mono">{{ account.key_masked }}</code>
                    {% if not ns.next_shown and not account.cooldown_active and not account.quota_deprioritized %}
                    {% set ns.next_shown = true %}
                    <span class="text-xs px-2 py-0.5 rounded bg-green-900 text-green-200 border border-green-700">Next</span>
                    {% endif %}
                    {% if account.key_label %}
                    <span class="text-xs text-gray-500">{{ account.key_label }}</span>
                    {% endif %}
                    <span class="text-xs px-2 py-0.5 rounded bg-gray-900 text-gray-400 border border-gray-700">
                        priority {{ account.priority }}
                    </span>
                    {% if account.source == 'config' %}
                    <span class="text-xs px-2 py-0.5 rounded bg-gray-900 text-gray-400">static config</span>
                    {% endif %}
                </div>
                <p class="text-xs text-gray-500 mt-1 font-mono">account {{ account.account_id }}</p>
            </div>
            <div class="text-sm text-right">
                {% if account.credits_remaining is not none %}
                <p class="text-gray-300">${{ "%.2f"|format(account.credits_remaining) }}</p>
                {% endif %}
                {% if account.cooldown_active %}
                <p class="text-red-400 text-xs mt-1 cooldown-timer" data-cooldown-secs="{{ account.cooldown_seconds | int }}">cooldown ~{{ account.cooldown_seconds | int }}s</p>
                {% elif account.quota_deprioritized %}
                <p class="text-amber-400 text-xs mt-1">deprioritized (quota)</p>
                {% else %}
                <p class="text-green-500 text-xs mt-1">available</p>
                {% endif %}
            </div>
            {% if account.key_id %}
            <button hx-get="/dashboard/api/inventory/keys/{{ account.key_id }}/partial"
                    hx-target="#key-detail-body"
                    hx-swap="innerHTML"
                    onclick="document.getElementById('key-detail-modal').classList.remove('hidden')"
                    class="px-2 py-1 text-xs border border-gray-600 rounded text-gray-300 hover:bg-gray-700 cursor-pointer shrink-0">
                View
            </button>
            {% endif %}
        </li>
        {% endfor %}
    </ol>
    {% else %}
    <div class="px-6 py-8 text-center text-gray-500 text-sm">
        No routable accounts. Add keys in Key Inventory or configure a provider API key.
    </div>
    {% endif %}
</div>
{% endfor %}
{% else %}
<div class="bg-gray-800 rounded-xl border border-gray-700 px-6 py-12 text-center text-gray-500">
    No enabled gateway providers. <a href="/dashboard/providers" class="text-blue-400 hover:text-blue-300">Add a provider</a>.
</div>
{% endif %}