{% if best_keys %}
<div id="best-keys-panel"
     hx-get="/dashboard/api/inventory/best-keys/partial"
     hx-trigger="every 60s"
     hx-swap="outerHTML">
    <div class="mb-8">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-white">Best Keys by Provider</h2>
            <p class="text-xs text-gray-500">Highest credits per provider · refreshes every 60s</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            {% for key in best_keys %}
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                <div class="flex items-start justify-between gap-3 mb-3">
                    <div>
                        <p class="text-white font-medium">{{ key.provider_display_name }}</p>
                        <p class="text-xs text-gray-500">{{ key.key_label or 'Highest credit key' }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-xl font-bold text-green-400">${{ "%.2f"|format(key.credits_remaining) }}</p>
                        {% if key.credits_total %}<p class="text-xs text-gray-500">/ ${{ "%.2f"|format(key.credits_total) }}</p>{% endif %}
                    </div>
                </div>
                <div class="bg-gray-900 border border-gray-700 rounded-lg p-3 flex items-center gap-2">
                    <code class="best-key-mask text-xs font-mono text-gray-500 truncate flex-1">{{ key.key_masked }}</code>
                    <span class="best-key-full hidden">{{ key.key_value }}</span>
                    <button type="button" onclick="toggleBestKey(this)"
                            class="px-2 py-1 text-xs border border-gray-600 rounded hover:bg-gray-700 cursor-pointer">Reveal</button>
                    <button type="button" onclick="copyBestKey(this)"
                            class="px-2 py-1 text-xs border border-gray-600 rounded hover:bg-gray-700 cursor-pointer">Copy</button>
                </div>
                {% if key.rate_limit_rpm %}<p class="text-xs text-gray-500 mt-2">RPM {{ key.rate_limit_rpm }}</p>{% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
</div>
<script>
function toggleBestKey(btn) {
  const card = btn.closest('.bg-gray-900');
  if (!card) return;
  const mask = card.querySelector('.best-key-mask');
  const full = card.querySelector('.best-key-full');
  if (!mask || !full) return;
  const revealed = btn.dataset.revealed === '1';
  if (revealed) {
    mask.textContent = mask.dataset.masked || mask.textContent;
    mask.classList.remove('text-green-300');
    btn.textContent = 'Reveal';
    btn.dataset.revealed = '0';
  } else {
    mask.dataset.masked = mask.textContent;
    mask.textContent = full.textContent;
    mask.classList.add('text-green-300');
    btn.textContent = 'Hide';
    btn.dataset.revealed = '1';
  }
}
function copyBestKey(btn) {
  const card = btn.closest('.bg-gray-900');
  const full = card && card.querySelector('.best-key-full');
  if (!full) return;
  const value = full.textContent;
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(value);
  } else {
    const ta = document.createElement('textarea');
    ta.value = value;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    document.body.removeChild(ta);
  }
}
</script>
{% endif %}