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

{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold text-white">Add Upstream Keys</h1>
    <a href="/dashboard/inventory/keys" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg text-sm">Back to Keys</a>
</div>

<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mb-6">
    <form hx-post="/dashboard/api/inventory/submit"
          hx-target="#submit-results"
          hx-swap="innerHTML"
          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" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium cursor-pointer">
            Submit & Validate
        </button>
    </form>
</div>

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