{% 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 provider" if is_edit else "Add provider" }}</h2>
    <a class="admin-btn admin-btn-sm" href="/admin/gateway?tab=providers">&larr; Back to providers</a>
</div>

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

<form method="post" action="{{ '/admin/gateway/providers/' + form.name + '/edit' if is_edit else '/admin/gateway/providers/new' }}" class="gw-page-form" role="group" aria-label="{{ 'Edit provider' if is_edit else 'Add provider' }}">
    <fieldset class="gw-fieldset">
        <legend>Provider</legend>
        <div class="gw-field-grid">
            <div class="gw-field">
                <label for="gw-provider-name">Name</label>
                <input type="text" id="gw-provider-name" name="name" placeholder="openrouter" value="{{ form.name }}" required aria-required="true" {% if is_edit %}readonly{% endif %}>
            </div>
            <div class="gw-field">
                <label for="gw-provider-base-url">Base URL (chat completions)</label>
                <input type="url" id="gw-provider-base-url" name="base_url" placeholder="https://openrouter.ai/api/v1/chat/completions" value="{{ form.base_url }}">
            </div>
            <div class="gw-field">
                <label for="gw-provider-protocol">Protocol</label>
                <select id="gw-provider-protocol" name="protocol">
                    <option value="chat_completions" {% if form.protocol == "chat_completions" %}selected{% endif %}>Chat Completions (forward verbatim)</option>
                    <option value="responses" {% if form.protocol == "responses" %}selected{% endif %}>Responses API (transpile both ways)</option>
                </select>
                <p class="gw-field-hint">Responses API providers take a base URL ending in /responses; inbound chat requests are transpiled to it and the answer is converted back to the normal OpenAI surface.</p>
            </div>
            <div class="gw-field">
                <label for="gw-provider-api-key">API key</label>
                <input type="password" id="gw-provider-api-key" name="api_key" value="{{ form.api_key }}" autocomplete="new-password">
            </div>
            <div class="gw-field">
                <label for="gw-provider-active">Active</label>
                <select id="gw-provider-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-provider-client-profile">Client profile</label>
                <select id="gw-provider-client-profile" name="client_profile">
                    <option value="" {% if form.client_profile == "" %}selected{% endif %}>Generic (no special headers)</option>
                    <option value="opencode" {% if form.client_profile == "opencode" %}selected{% endif %}>OpenCode Zen (spoof opencode CLI identity)</option>
                </select>
                <p class="gw-field-hint">Only needed for an upstream that rejects requests unless they look like they came from a specific client.</p>
            </div>
        </div>
    </fieldset>
    <div class="gw-page-actions">
        <button type="submit" class="admin-btn admin-btn-primary">{{ "Save provider" if is_edit else "Add provider" }}</button>
        <a class="admin-btn admin-btn-sm" href="/admin/gateway?tab=providers">Cancel</a>
    </div>
</form>
{% endblock %}