{% 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-swap="none" 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>

<!-- Overrides Table -->
{% if overrides %}
<div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden mb-8">
    <div class="px-6 py-3 border-b border-gray-700">
        <h2 class="text-sm font-semibold text-white">Custom Overrides</h2>
    </div>
    <table class="w-full">
        <thead>
            <tr class="bg-gray-900 border-b border-gray-700">
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Model</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Input</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Output</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Cache Create</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Cache Read</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-700">
            {% for o in overrides %}
            <tr class="hover:bg-gray-750">
                <td class="px-4 py-3 text-sm text-white font-medium">{{ o.model }}</td>
                <td class="px-4 py-3 text-sm text-gray-300 text-right">${{ o.input_per_mtok }}</td>
                <td class="px-4 py-3 text-sm text-gray-300 text-right">${{ o.output_per_mtok }}</td>
                <td class="px-4 py-3 text-sm text-gray-300 text-right">${{ o.cache_creation_per_mtok }}</td>
                <td class="px-4 py-3 text-sm text-gray-300 text-right">${{ o.cache_read_per_mtok }}</td>
                <td class="px-4 py-3 text-right">
                    <button hx-delete="/dashboard/api/pricing/{{ o.model }}" hx-swap="none"
                            hx-confirm="Delete override for '{{ o.model }}'?"
                            class="text-red-400 hover:text-red-300 text-sm">Delete</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Builtin Pricing -->
<div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
    <div class="px-6 py-3 border-b border-gray-700">
        <h2 class="text-sm font-semibold text-white">Builtin Pricing</h2>
    </div>
    <table class="w-full">
        <thead>
            <tr class="bg-gray-900 border-b border-gray-700">
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Model</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Input</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Output</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Cache Create</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Cache Read</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-700">
            {% for p in builtin %}
            <tr class="hover:bg-gray-750">
                <td class="px-4 py-3 text-sm text-white font-medium">{{ p.model }}</td>
                <td class="px-4 py-3 text-sm text-gray-300 text-right">${{ p.input_per_mtok }}</td>
                <td class="px-4 py-3 text-sm text-gray-300 text-right">${{ p.output_per_mtok }}</td>
                <td class="px-4 py-3 text-sm text-gray-300 text-right">${{ p.cache_creation_per_mtok }}</td>
                <td class="px-4 py-3 text-sm text-gray-300 text-right">${{ p.cache_read_per_mtok }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}