{% extends "base.html" %}
{% block title %}Pricing - Janus{% endblock %}
{% block pricing_active %}bg-gray-700 text-white{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-white mb-2">Pricing</h1>
<p class="text-gray-400 text-sm mb-6">Cost per million tokens. Override builtin pricing or add custom model rates.</p>

<!-- Add Override -->
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mb-8">
    <h2 class="text-lg font-semibold text-white mb-4">Add / Update Override</h2>
    <form hx-post="/dashboard/api/pricing" hx-target="#pricing-content" hx-swap="outerHTML" class="grid grid-cols-1 md:grid-cols-5 gap-3 items-end"
           onsubmit="setTimeout(() => this.reset(), 100)">
        <div>
            <label class="block text-gray-400 text-xs mb-1">Model</label>
            <input type="text" name="model" required placeholder="gpt-4o"
                   class="w-full bg-gray-900 text-white rounded-lg px-3 py-2 border border-gray-700 text-sm">
        </div>
        <div>
            <label class="block text-gray-400 text-xs mb-1">Input $/Mtok</label>
            <input type="number" name="input_per_mtok" step="0.01" min="0" value="2.50"
                   class="w-full bg-gray-900 text-white rounded-lg px-3 py-2 border border-gray-700 text-sm">
        </div>
        <div>
            <label class="block text-gray-400 text-xs mb-1">Output $/Mtok</label>
            <input type="number" name="output_per_mtok" step="0.01" min="0" value="10.00"
                   class="w-full bg-gray-900 text-white rounded-lg px-3 py-2 border border-gray-700 text-sm">
        </div>
        <div>
            <label class="block text-gray-400 text-xs mb-1">Cache Create</label>
            <input type="number" name="cache_creation_per_mtok" step="0.01" min="0" value="0"
                   class="w-full bg-gray-900 text-white rounded-lg px-3 py-2 border border-gray-700 text-sm">
        </div>
        <div>
            <label class="block text-gray-400 text-xs mb-1">Cache Read</label>
            <input type="number" name="cache_read_per_mtok" step="0.01" min="0" value="0"
                   class="w-full bg-gray-900 text-white rounded-lg px-3 py-2 border border-gray-700 text-sm">
        </div>
        <div class="md:col-span-5">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-5 py-2 text-sm font-medium transition-colors">
                Set Override
            </button>
        </div>
    </form>
</div>

{% include "pricing_partial.html" %}

<script>
function filterPricingTable(query) {
    var q = query.toLowerCase();
    document.querySelectorAll('#pricing-builtin-table .pricing-row').forEach(function(row) {
        var model = row.cells[0].textContent.toLowerCase();
        row.style.display = model.indexOf(q) >= 0 ? '' : 'none';
    });
}
</script>
{% endblock %}