{% extends "base.html" %}
{% block title %}Upstream Keys - Janus{% endblock %}
{% block inventory_active %}bg-gray-700 text-white{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-white mb-4">Key Inventory</h1>
{% with active='keys' %}{% include "inventory_nav.html" %}{% endwith %}
{% include "inventory_keys_actions.html" %}

<div id="reclassify-panel" class="mb-4"></div>

<form id="inventory-filter-form"
      hx-get="/dashboard/api/inventory/keys/partial"
      hx-target="#inventory-keys-content"
      hx-swap="innerHTML"
      hx-sync="#inventory-keys-content:replace"
      class="bg-gray-800 rounded-xl p-4 border border-gray-700 mb-6 grid md:grid-cols-5 gap-3">
    <input type="hidden" name="sort" id="inventory-filter-sort" value="{{ sort }}">
    <input type="hidden" name="dir" id="inventory-filter-dir" value="{{ direction }}">
    <input type="hidden" name="limit" id="inventory-filter-limit" value="{{ limit }}">
    <input type="hidden" name="offset" value="0">
    <input type="text" name="search" value="{{ search }}" placeholder="Search label or key…"
           class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm md:col-span-2">
    <select name="provider_id" class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm">
        <option value="">All providers</option>
        {% for p in providers %}
        <option value="{{ p.id }}" {% if provider_id == p.id %}selected{% endif %}>{{ p.display_name }}</option>
        {% endfor %}
    </select>
    <select name="status" class="bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm">
        <option value="">All statuses</option>
        {% for s in ['active', 'invalid', 'pending_validation', 'error', 'daily_exhausted'] %}
        <option value="{{ s }}" {% if status == s %}selected{% endif %}>{{ s }}</option>
        {% endfor %}
    </select>
    <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm cursor-pointer">Filter</button>
</form>

<div id="inventory-keys-content">
    {% include "inventory_keys_partial.html" %}
</div>

<div id="key-detail-modal" class="hidden">
    {% include "inventory_key_detail_modal.html" %}
</div>
{% endblock %}