{% extends "base.html" %}
{% block title %}Add 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='add' %}{% include "inventory_nav.html" %}{% endwith %}

<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mb-6">
    <form id="inventory-add-form" class="space-y-4">
        <div>
            <label class="block text-sm text-gray-300 mb-2">API Keys (one per line)</label>
            <textarea name="keys_text" rows="10" required
                      placeholder="sk-proj-...&#10;sk-or-v1-...&#10;gsk_..."
                      class="w-full bg-gray-900 border border-gray-600 rounded-lg px-4 py-3 text-white font-mono text-sm"></textarea>
        </div>
        <div class="grid md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm text-gray-300 mb-2">Provider</label>
                <select name="provider_id" class="w-full bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm">
                    <option value="auto">Auto-detect from prefix</option>
                    {% for p in providers %}
                    <option value="{{ p.id }}">{{ p.display_name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-sm text-gray-300 mb-2">Custom base URL (for custom provider)</label>
                <input type="url" name="custom_base_url" placeholder="https://your-api.example.com/v1"
                       class="w-full bg-gray-900 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm">
            </div>
        </div>
        <button type="submit"
                hx-post="/dashboard/api/inventory/preview"
                hx-target="#submit-results"
                hx-swap="innerHTML"
                hx-include="#inventory-add-form"
                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium cursor-pointer">
            Preview &amp; Add Keys
        </button>
    </form>
</div>

<div id="submit-results" class="space-y-4"></div>
{% endblock %}