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

{% if results %}
{% if has_pending %}
<div hx-get="/dashboard/api/inventory/submit/status{% if poll_query %}?{{ poll_query }}{% endif %}"
     hx-trigger="every 3s"
     hx-target="#submit-results"
     hx-swap="innerHTML"
     class="hidden"
     aria-hidden="true"></div>
{% endif %}

<div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between gap-4">
        <div>
            <h2 class="text-lg font-semibold text-white">Submitted {{ results|length }} key(s)</h2>
            <p class="text-sm text-gray-400">
                {% if has_pending %}
                Validation in progress — statuses update automatically.
                {% else %}
                Validation complete.
                {% endif %}
            </p>
        </div>
        <a href="/dashboard/inventory/keys" class="text-sm text-blue-400 hover:text-blue-300 whitespace-nowrap">View all keys</a>
    </div>
    <table class="w-full">
        <thead>
            <tr class="bg-gray-900 border-b border-gray-700">
                <th class="px-4 py-2 text-left text-xs text-gray-400 uppercase">Key</th>
                <th class="px-4 py-2 text-left text-xs text-gray-400 uppercase">Provider</th>
                <th class="px-4 py-2 text-left text-xs text-gray-400 uppercase">Status</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-700">
            {% for item in results %}
            <tr class="{% if item.status == 'pending_validation' %}bg-yellow-900/10{% endif %}">
                <td class="px-4 py-2 text-sm font-mono text-gray-300">{{ item.key_masked }}</td>
                <td class="px-4 py-2 text-sm text-gray-400">{{ item.provider_display_name or item.provider_id }}</td>
                <td class="px-4 py-2 text-sm text-gray-300">
                    <span class="{% if item.status == 'pending_validation' %}text-yellow-300 animate-pulse{% elif item.status == 'active' %}text-green-300{% elif item.status == 'invalid' %}text-red-300{% endif %}">
                        {{ item.status }}{% if item.error %} — {{ item.error }}{% endif %}
                    </span>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}