{% if has_pending %}
<div hx-get="/dashboard/api/inventory/keys/partial{% if poll_query %}?{{ poll_query }}{% endif %}"
     hx-trigger="every 3s"
     hx-target="#inventory-keys-content"
     hx-swap="innerHTML"
     class="hidden"
     aria-hidden="true"></div>
<div class="mb-4 bg-yellow-900/50 border border-yellow-700 rounded-lg p-4 flex items-center gap-3">
    <span class="inline-block w-2 h-2 rounded-full bg-yellow-400 animate-pulse"></span>
    <p class="text-yellow-200 text-sm">Validation in progress — this table updates automatically.</p>
</div>
{% endif %}

{% if submit_message %}
<div class="mb-4 bg-blue-900 border border-blue-700 rounded-lg p-4 text-blue-200 text-sm">{{ submit_message }}</div>
{% endif %}

<div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden overflow-x-auto">
    {% if keys %}
    <table class="w-full">
        <thead>
            <tr class="bg-gray-900 border-b border-gray-700">
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">
                    <button hx-get="/dashboard/api/inventory/keys/partial?sort=provider&dir={{ sort_toggle(sort, direction, 'provider') }}&limit={{ limit }}&offset=0{% if provider_id %}&provider_id={{ provider_id }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if search %}&search={{ search|urlencode }}{% endif %}"
                            hx-target="#inventory-keys-content" hx-swap="innerHTML"
                            class="hover:text-white cursor-pointer">
                        Provider{% if sort == 'provider' %} {{ '↓' if direction == 'desc' else '↑' }}{% endif %}
                    </button>
                </th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">
                    <button hx-get="/dashboard/api/inventory/keys/partial?sort=priority&dir={{ sort_toggle(sort, direction, 'priority') }}&limit={{ limit }}&offset=0{% if provider_id %}&provider_id={{ provider_id }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if search %}&search={{ search|urlencode }}{% endif %}"
                            hx-target="#inventory-keys-content" hx-swap="innerHTML"
                            class="hover:text-white cursor-pointer">
                        Priority{% if sort == 'priority' %} {{ '↓' if direction == 'desc' else '↑' }}{% endif %}
                    </button>
                </th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Key</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">
                    <button hx-get="/dashboard/api/inventory/keys/partial?sort=status&dir={{ sort_toggle(sort, direction, 'status') }}&limit={{ limit }}&offset=0{% if provider_id %}&provider_id={{ provider_id }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if search %}&search={{ search|urlencode }}{% endif %}"
                            hx-target="#inventory-keys-content" hx-swap="innerHTML"
                            class="hover:text-white cursor-pointer">
                        Status{% if sort == 'status' %} {{ '↓' if direction == 'desc' else '↑' }}{% endif %}
                    </button>
                </th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">
                    <button hx-get="/dashboard/api/inventory/keys/partial?sort=credits&dir={{ sort_toggle(sort, direction, 'credits') }}&limit={{ limit }}&offset=0{% if provider_id %}&provider_id={{ provider_id }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if search %}&search={{ search|urlencode }}{% endif %}"
                            hx-target="#inventory-keys-content" hx-swap="innerHTML"
                            class="hover:text-white cursor-pointer">
                        Credits{% if sort == 'credits' %} {{ '↓' if direction == 'desc' else '↑' }}{% endif %}
                    </button>
                </th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">RPM</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">
                    <button hx-get="/dashboard/api/inventory/keys/partial?sort=last_checked&dir={{ sort_toggle(sort, direction, 'last_checked') }}&limit={{ limit }}&offset=0{% if provider_id %}&provider_id={{ provider_id }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if search %}&search={{ search|urlencode }}{% endif %}"
                            hx-target="#inventory-keys-content" hx-swap="innerHTML"
                            class="hover:text-white cursor-pointer">
                        Checked{% if sort == 'last_checked' %} {{ '↓' if direction == 'desc' else '↑' }}{% endif %}
                    </button>
                </th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-700">
            {% for key in keys %}
            <tr class="hover:bg-gray-700 {% if key.status == 'pending_validation' %}bg-yellow-900/10{% endif %}">
                <td class="px-4 py-3 text-sm text-white">
                    <div>{{ key.provider_display_name }}</div>
                    {% if key.source_node %}<div class="text-xs text-gray-500">{{ key.source_node }}</div>{% endif %}
                </td>
                <td class="px-4 py-3 text-sm text-gray-300 font-mono">{{ key.priority or 0 }}</td>
                <td class="px-4 py-3 text-sm text-gray-300 font-mono">
                    <div>{{ key.key_masked }}</div>
                    {% if key.key_label %}<div class="text-xs text-gray-500">{{ key.key_label }}</div>{% endif %}
                </td>
                <td class="px-4 py-3">
                    <span class="inline-flex px-2 py-0.5 rounded text-xs {{ status_badge(key.status) }}{% if key.status == 'pending_validation' %} animate-pulse{% endif %}">{{ key.status }}</span>
                    {% if key.usability_status and key.usability_status != 'unknown' %}
                    <div class="text-xs text-gray-500 mt-1">{{ key.usability_status }}</div>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-sm text-gray-300">
                    {% if key.credits_remaining is not none %}
                    ${{ "%.2f"|format(key.credits_remaining) }}
                    {% if key.provider_billing_model and key.provider_billing_model != 'credits' %}
                    <span class="text-xs text-gray-500">({{ key.provider_billing_model }})</span>
                    {% endif %}
                    {% else %}—{% endif %}
                </td>
                <td class="px-4 py-3 text-sm text-gray-400">
                    {% if key.rate_limit_rpm is not none %}{{ key.rate_limit_rpm }}{% else %}—{% endif %}
                </td>
                <td class="px-4 py-3 text-sm text-gray-500">{{ key.last_checked_at or '—' }}</td>
                <td class="px-4 py-3 text-right space-x-1 whitespace-nowrap">
                    <button hx-get="/dashboard/api/inventory/keys/{{ 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">
                        View
                    </button>
                    <a href="/dashboard/api/inventory/keys/{{ key.id }}/json"
                       class="inline-block px-2 py-1 text-xs border border-gray-600 rounded text-gray-300 hover:bg-gray-700">
                        JSON
                    </a>
                    <button hx-post="/dashboard/api/inventory/keys/{{ key.id }}/recheck{% if poll_query %}?{{ poll_query }}{% endif %}"
                            hx-target="#inventory-keys-content"
                            hx-swap="innerHTML"
                            class="px-2 py-1 text-xs border border-gray-600 rounded text-gray-300 hover:bg-gray-700 cursor-pointer">
                        Recheck
                    </button>
                    <button hx-delete="/dashboard/api/inventory/keys/{{ key.id }}{% if poll_query %}?{{ poll_query }}{% endif %}"
                            hx-target="#inventory-keys-content"
                            hx-swap="innerHTML"
                            hx-confirm="Delete this upstream key?"
                            class="px-2 py-1 text-xs border border-red-700 rounded text-red-400 hover:bg-red-900 cursor-pointer">
                        Delete
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="px-6 py-12 text-center">
        <p class="text-gray-400 mb-4">No upstream keys match your filters.</p>
        <a href="/dashboard/inventory/add" class="text-blue-400 hover:text-blue-300 text-sm">Add keys</a>
    </div>
    {% endif %}
</div>

{% if total > 0 %}
<div class="mt-4 flex items-center justify-between text-sm text-gray-400">
    <p>Showing {{ offset + 1 }}–{{ [offset + keys|length, total]|min }} of {{ total }}</p>
    <div class="flex gap-2">
        {% if offset > 0 %}
        <button hx-get="/dashboard/api/inventory/keys/partial?sort={{ sort }}&dir={{ direction }}&limit={{ limit }}&offset={{ [0, offset - limit]|max }}{% if provider_id %}&provider_id={{ provider_id }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if search %}&search={{ search|urlencode }}{% endif %}"
                hx-target="#inventory-keys-content" hx-swap="innerHTML"
                class="px-3 py-1 border border-gray-600 rounded hover:bg-gray-700 cursor-pointer">Previous</button>
        {% endif %}
        <span class="px-3 py-1">Page {{ page }} / {{ total_pages }}</span>
        {% if offset + limit < total %}
        <button hx-get="/dashboard/api/inventory/keys/partial?sort={{ sort }}&dir={{ direction }}&limit={{ limit }}&offset={{ offset + limit }}{% if provider_id %}&provider_id={{ provider_id }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% if search %}&search={{ search|urlencode }}{% endif %}"
                hx-target="#inventory-keys-content" hx-swap="innerHTML"
                class="px-3 py-1 border border-gray-600 rounded hover:bg-gray-700 cursor-pointer">Next</button>
        {% endif %}
    </div>
</div>
{% endif %}