{% extends "base.html" %}

{% block title %}{% if connection %}Edit{% else %}Add{% endif %} Connection{% endblock %}
{% block page_title %}{% if connection %}Edit Connection{% else %}Add Connection{% endif %}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="mb-3">
        <a href="/ai/settings" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left"></i> Back to AI Settings
        </a>
    </div>

    {% if error %}
    <div class="alert alert-danger">{{ error }}</div>
    {% endif %}

    <form method="post" action="{% if connection %}/ai/settings/connections/{{ connection.id }}{% else %}/ai/settings/connections{% endif %}">
        <div class="card">
            <div class="card-body">
                <div class="mb-3">
                    <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="name" name="name" required
                           value="{{ connection.name if connection else '' }}"
                           placeholder="e.g. OpenAI GPT-4o, Local Llama, Claude Sonnet">
                    <div class="form-text">A label to identify this connection.</div>
                </div>

                <div class="mb-3">
                    <label for="base_url" class="form-label">API Base URL</label>
                    <input type="text" class="form-control" id="base_url" name="base_url"
                           value="{{ connection.base_url if connection else 'https://api.openai.com' }}"
                           placeholder="https://api.openai.com">
                    <div class="form-text">OpenAI-compatible endpoint (OpenAI, vLLM, Ollama, LiteLLM, etc.)</div>
                </div>

                {% set auth_type = (connection.auth_type if connection and connection.auth_type else 'api_key') %}
                <div class="mb-3">
                    <label for="auth_type" class="form-label">Authentication</label>
                    <select class="form-select" id="auth_type" name="auth_type"
                            onchange="document.getElementById('api_key_block').hidden = this.value !== 'api_key'; document.getElementById('keycloak_block').hidden = this.value !== 'keycloak';">
                        <option value="api_key" {% if auth_type == 'api_key' %}selected{% endif %}>API Key (static Bearer token)</option>
                        <option value="keycloak" {% if auth_type == 'keycloak' %}selected{% endif %}>Keycloak (OAuth2 client credentials)</option>
                    </select>
                    <div class="form-text">Choose how the chat call authenticates against the model server.</div>
                </div>

                <div id="api_key_block" {% if auth_type != 'api_key' %}hidden{% endif %}>
                    <div class="mb-3">
                        <label for="api_key" class="form-label">API Key</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="api_key" name="api_key"
                                   value="{% if connection and connection.api_key %}********{% endif %}"
                                   placeholder="sk-...">
                            <button class="btn btn-outline-secondary" type="button"
                                    onclick="this.previousElementSibling.type = this.previousElementSibling.type === 'password' ? 'text' : 'password'">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                        <div class="form-text">Sent as <code>Authorization: Bearer &lt;key&gt;</code>. Leave as <code>********</code> to keep the existing key.</div>
                    </div>
                </div>

                <div id="keycloak_block" {% if auth_type != 'keycloak' %}hidden{% endif %}>
                    <div class="mb-3">
                        <label for="keycloak_url" class="form-label">Token URL</label>
                        <input type="text" class="form-control" id="keycloak_url" name="keycloak_url"
                               value="{{ connection.keycloak_url if connection and connection.keycloak_url else '' }}"
                               placeholder="https://keycloak-aif.gt-t.net/realms/aif-llm/protocol/openid-connect/token">
                        <div class="form-text">Keycloak <code>openid-connect/token</code> endpoint for the realm hosting the model.</div>
                    </div>
                    <div class="mb-3">
                        <label for="keycloak_client_id" class="form-label">Client ID</label>
                        <input type="text" class="form-control" id="keycloak_client_id" name="keycloak_client_id"
                               value="{{ connection.keycloak_client_id if connection and connection.keycloak_client_id else '' }}"
                               placeholder="edgeui-dev">
                    </div>
                    <div class="mb-3">
                        <label for="keycloak_client_secret" class="form-label">Client Secret</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="keycloak_client_secret" name="keycloak_client_secret"
                                   value="{% if connection and connection.keycloak_client_secret %}********{% endif %}"
                                   placeholder="">
                            <button class="btn btn-outline-secondary" type="button"
                                    onclick="this.previousElementSibling.type = this.previousElementSibling.type === 'password' ? 'text' : 'password'">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                        <div class="form-text">Used with <code>grant_type=client_credentials</code>. Leave as <code>********</code> to keep the existing secret.</div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="model" class="form-label">Model</label>
                    <input type="text" class="form-control" id="model" name="model"
                           value="{{ connection.model if connection else 'gpt-4o-mini' }}"
                           placeholder="gpt-4o-mini">
                </div>

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="temperature" class="form-label">Temperature</label>
                        <input type="number" class="form-control" id="temperature" name="temperature"
                               value="{{ connection.temperature if connection else '0.7' }}"
                               step="0.1" min="0" max="2">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="max_tokens" class="form-label">Max Tokens</label>
                        <input type="number" class="form-control" id="max_tokens" name="max_tokens"
                               value="{{ connection.max_tokens if connection else '2048' }}">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="timeout" class="form-label">Timeout (seconds)</label>
                        <input type="number" class="form-control" id="timeout" name="timeout"
                               value="{{ connection.timeout if connection else '60' }}">
                    </div>
                </div>

                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" id="ssl_verify" name="ssl_verify"
                           {% if (connection and connection.ssl_verify) or not connection %}checked{% endif %}>
                    <label class="form-check-label" for="ssl_verify">Verify SSL certificates</label>
                    <div class="form-text">Disable for self-signed certificates (e.g. internal vLLM/Ollama endpoints).</div>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <a href="/ai/settings" class="btn btn-outline-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-lg me-1"></i> {% if connection %}Update{% else %}Create{% endif %} Connection
                </button>
            </div>
        </div>
    </form>
</div>
{% endblock %}