{% extends "admin_base.html" %}
{% block extra_head %}
{{ super() }}
<link rel="stylesheet" href="{{ static_url('/static/css/gateway.css') }}">
{% endblock %}
{% block admin_content %}
<div class="admin-toolbar">
    <h2>{{ "Edit model route" if is_edit else "Add model route" }}</h2>
    <a class="admin-btn admin-btn-sm" href="/admin/gateway?tab=models">&larr; Back to model routes</a>
</div>

{% if error %}
<p class="gw-error" role="alert">{{ error }}</p>
{% endif %}

<form id="gateway-model-form" method="post" action="{{ '/admin/gateway/models/' + form.source_model + '/edit' if is_edit else '/admin/gateway/models/new' }}" class="gw-page-form" role="group" aria-label="{{ 'Edit model route' if is_edit else 'Add model route' }}">
    <fieldset class="gw-fieldset">
        <legend>Routing</legend>
        <p class="gw-section-hint">The source model is the name clients request; the target model is what is actually sent to the provider.</p>
        <div class="gw-field-grid">
            <div class="gw-field">
                <label for="gw-model-source">Source model (requested)</label>
                <input type="text" id="gw-model-source" name="source_model" placeholder="gpt-4o" value="{{ form.source_model }}" required aria-required="true" {% if is_edit %}readonly{% endif %}>
            </div>
            <div class="gw-field">
                <label for="gw-model-provider">Provider</label>
                <select id="gw-model-provider" name="provider">
                    <option value="" {% if not form.provider %}selected{% endif %}>default</option>
                    {% for p in providers %}
                    <option value="{{ p.name }}" {% if form.provider == p.name %}selected{% endif %}>{{ p.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="gw-field">
                <label for="gw-model-target">Target model (upstream)</label>
                <input type="text" id="gw-model-target" name="target_model" placeholder="openai/gpt-4o" value="{{ form.target_model }}" required aria-required="true">
                <select id="gw-model-target-select" name="target_model" required aria-required="true" hidden disabled></select>
                <p class="gw-field-hint" id="gw-model-target-hint" hidden>Loaded live from the selected provider's model list.</p>
            </div>
            <div class="gw-field">
                <label for="gw-model-kind">Kind</label>
                <select id="gw-model-kind" name="kind">
                    <option value="chat" {% if form.kind == "chat" %}selected{% endif %}>chat</option>
                    <option value="embed" {% if form.kind == "embed" %}selected{% endif %}>embed</option>
                    <option value="image" {% if form.kind == "image" %}selected{% endif %}>image</option>
                </select>
            </div>
            <div class="gw-field">
                <label for="gw-model-context">Context window</label>
                <input type="number" id="gw-model-context" name="context_window" min="0" value="{{ form.context_window }}">
            </div>
            <div class="gw-field">
                <label for="gw-model-active">Active</label>
                <select id="gw-model-active" name="is_active">
                    <option value="1" {% if form.is_active == "1" %}selected{% endif %}>Yes</option>
                    <option value="0" {% if form.is_active == "0" %}selected{% endif %}>No</option>
                </select>
            </div>
            <div class="gw-field">
                <label for="gw-model-fallback">Fallback model</label>
                <select id="gw-model-fallback" name="fallback_model" title="Tried automatically when this model fails after its own retries. Only another route of the same kind is a valid choice.">
                    <option value="" {% if not form.fallback_model %}selected{% endif %}>(none)</option>
                    {% for group in fallback_groups %}
                    <optgroup label="{{ group.kind }}">
                        {% for name in group.options %}
                        <option value="{{ name }}" {% if form.fallback_model == name %}selected{% endif %}>{{ name }}</option>
                        {% endfor %}
                    </optgroup>
                    {% endfor %}
                </select>
            </div>
        </div>
    </fieldset>

    <fieldset class="gw-fieldset">
        <legend>Vision augmentation (chat only)</legend>
        <p class="gw-section-hint">When set, image content is described by this vision model before the chat request is forwarded. Leave blank to disable image-to-text merging for this route.</p>
        <div class="gw-field-grid">
            <div class="gw-field">
                <label for="gw-model-vision-provider">Vision provider</label>
                <select id="gw-model-vision-provider" name="vision_provider">
                    <option value="" {% if not form.vision_provider %}selected{% endif %}>default</option>
                    {% for p in providers %}
                    <option value="{{ p.name }}" {% if form.vision_provider == p.name %}selected{% endif %}>{{ p.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="gw-field">
                <label for="gw-model-vision-model">Vision model</label>
                <input type="text" id="gw-model-vision-model" name="vision_model" placeholder="(optional) google/gemma-3-12b-it" value="{{ form.vision_model }}">
            </div>
        </div>
    </fieldset>

    <fieldset class="gw-fieldset">
        <legend>Pricing</legend>
        <p class="gw-section-hint">Chat uses cache-hit, cache-miss and output prices (USD per 1M tokens). Embeddings and the vision augmentation use the input price. Image routes use the input price as a flat USD amount per generated image.</p>
        <div class="gw-field-grid">
            <div class="gw-field">
                <label for="gw-model-price-cache-hit">Price cache-hit / 1M ($) - chat</label>
                <input type="number" id="gw-model-price-cache-hit" name="price_cache_hit_per_m" min="0" step="0.0001" value="{{ form.price_cache_hit_per_m }}">
            </div>
            <div class="gw-field">
                <label for="gw-model-price-cache-miss">Price cache-miss / 1M ($) - chat</label>
                <input type="number" id="gw-model-price-cache-miss" name="price_cache_miss_per_m" min="0" step="0.0001" value="{{ form.price_cache_miss_per_m }}">
            </div>
            <div class="gw-field">
                <label for="gw-model-price-output">Price output / 1M ($) - chat</label>
                <input type="number" id="gw-model-price-output" name="price_output_per_m" min="0" step="0.0001" value="{{ form.price_output_per_m }}">
            </div>
            <div class="gw-field">
                <label for="gw-model-price-input">Price input / 1M ($) - embed/vision, or $/image for image routes</label>
                <input type="number" id="gw-model-price-input" name="price_input_per_m" min="0" step="0.0001" value="{{ form.price_input_per_m }}">
            </div>
        </div>
    </fieldset>

    <fieldset class="gw-fieldset">
        <legend>Tiered pricing (chat &amp; embed, optional)</legend>
        <p class="gw-section-hint">Some providers charge a different rate once a request crosses a context-length threshold. Leave the tier-2 fields blank to keep the flat rates above at all times; 0 disables the threshold.</p>
        <div class="gw-field-grid">
            <div class="gw-field">
                <label for="gw-model-tier-threshold">Tier-2 threshold (input tokens)</label>
                <input type="number" id="gw-model-tier-threshold" name="context_tier_threshold_tokens" min="0" value="{{ form.context_tier_threshold_tokens }}" title="0 disables tiered pricing">
            </div>
            <div class="gw-field">
                <label for="gw-model-price-cache-hit-tier2">Tier-2 price cache-hit / 1M ($)</label>
                <input type="number" id="gw-model-price-cache-hit-tier2" name="price_cache_hit_per_m_tier2" min="0" step="0.0001" value="{{ form.price_cache_hit_per_m_tier2 }}" placeholder="same as tier 1">
            </div>
            <div class="gw-field">
                <label for="gw-model-price-cache-miss-tier2">Tier-2 price cache-miss / 1M ($)</label>
                <input type="number" id="gw-model-price-cache-miss-tier2" name="price_cache_miss_per_m_tier2" min="0" step="0.0001" value="{{ form.price_cache_miss_per_m_tier2 }}" placeholder="same as tier 1">
            </div>
            <div class="gw-field">
                <label for="gw-model-price-output-tier2">Tier-2 price output / 1M ($)</label>
                <input type="number" id="gw-model-price-output-tier2" name="price_output_per_m_tier2" min="0" step="0.0001" value="{{ form.price_output_per_m_tier2 }}" placeholder="same as tier 1">
            </div>
            <div class="gw-field">
                <label for="gw-model-price-input-tier2">Tier-2 price input / 1M ($)</label>
                <input type="number" id="gw-model-price-input-tier2" name="price_input_per_m_tier2" min="0" step="0.0001" value="{{ form.price_input_per_m_tier2 }}" placeholder="same as tier 1">
            </div>
        </div>
    </fieldset>

    <fieldset class="gw-fieldset">
        <legend>Off-peak discount (optional)</legend>
        <p class="gw-section-hint">A percentage discount applied to whichever tier's rates are active during a fixed UTC time window. Leave both times blank to disable.</p>
        <div class="gw-field-grid">
            <div class="gw-field">
                <label for="gw-model-off-peak-start">Off-peak start (UTC)</label>
                <input type="time" id="gw-model-off-peak-start" name="off_peak_start" value="{{ form.off_peak_start }}">
            </div>
            <div class="gw-field">
                <label for="gw-model-off-peak-end">Off-peak end (UTC)</label>
                <input type="time" id="gw-model-off-peak-end" name="off_peak_end" value="{{ form.off_peak_end }}">
            </div>
            <div class="gw-field">
                <label for="gw-model-off-peak-discount">Off-peak discount (%)</label>
                <input type="number" id="gw-model-off-peak-discount" name="off_peak_discount_pct" min="0" max="100" step="0.1" value="{{ form.off_peak_discount_pct }}">
            </div>
        </div>
    </fieldset>

    <div class="gw-page-actions">
        <button type="submit" class="admin-btn admin-btn-primary">{{ "Save model route" if is_edit else "Add model route" }}</button>
        <a class="admin-btn admin-btn-sm" href="/admin/gateway?tab=models">Cancel</a>
    </div>
</form>
{% endblock %}
{% block extra_js %}
<script type="module">
import { GatewayModelForm } from "{{ static_url('/static/js/GatewayModelForm.js') }}";
const gatewayModelForm = new GatewayModelForm(document.getElementById("gateway-model-form"));
gatewayModelForm.start();
window.app.gatewayModelForm = gatewayModelForm;
</script>
{% endblock %}