{% extends "base.html" %}
{% from "_hub.html" import hub %}

{% block title %}Ranker — Config — karyab{% endblock %}

{% block content %}
<h1>Config</h1>

{% if flash %}
{% if flash_error %}
<div class="flash-banner flash-error"
     style="background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;border-radius:6px;
            padding:0.6rem 1rem;margin-bottom:1rem;font-size:0.9rem">
  {{ flash }}
</div>
{% else %}
<div class="flash-banner"
     style="background:var(--badge-hi,#d1fae5);border:1px solid #6ee7b7;color:#065f46;
            border-radius:6px;padding:0.6rem 1rem;margin-bottom:1rem;font-size:0.9rem">
  {{ flash }}
</div>
{% endif %}
{% endif %}

{% call hub(hub_sections) %}
<form method="post" action="/config/ranker/save"
      style="display:grid;gap:2rem;max-width:36rem">

  <section id="ranker">
    <h2 style="margin:0 0 0.75rem;font-size:1.15rem;border-bottom:1px solid var(--border);
               padding-bottom:0.4rem">Ranker</h2>

    <div style="background:var(--badge-hi,#d1fae5);border:1px solid #6ee7b7;color:#065f46;
                border-radius:6px;padding:0.55rem 0.85rem;margin:0 0 0.85rem;font-size:0.85rem">
      ⓘ <strong>Web UI</strong> ranks with:
      <code>{{ effective_ui_backend }}{% if effective_ui_model %} / {{ effective_ui_model }}{% endif %}</code>
      {% if ranker_ui_backend %}<span style="opacity:0.8">(via <code>[ranker.ui]</code> overlay)</span>{% endif %}
      <br>
      <strong>CLI / MCP</strong> rank with:
      <code>{{ effective_cli_backend }}{% if effective_cli_model %} / {{ effective_cli_model }}{% endif %}</code>
      <br>
      <span style="opacity:0.85">The web rank button uses the first row — the
      <code>[ranker.ui]</code> overlay wins over the Backend dropdown below when set.</span>
    </div>

    <p style="margin:0 0 0.75rem;font-size:0.85rem;color:var(--muted)">
      Which LLM backend scores jobs. Anthropic/OpenCode API keys stay in
      <code>secrets.toml</code> — not entered here.
    </p>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="backend">Backend
        <span class="field-help">
          <code>anthropic</code> — Anthropic API (needs key in secrets.toml).
          <code>claude_cli</code> — uses the <code>claude</code> CLI, no API key needed.
          <code>opencode</code> — uses <code>opencode</code> CLI on host.
          <code>ollama</code> — local Ollama server, fully offline.
          <code>manual</code> — agent-in-the-loop via MCP tools.
        </span>
      </label>
      <select id="backend" name="backend">
        {% for b in valid_backends %}
        <option value="{{ b }}" {% if b == backend %}selected{% endif %}>{{ b }}</option>
        {% endfor %}
      </select>
      {% if anthropic_configured %}
      <span class="secret-status configured" style="display:block;margin-top:0.25rem">
        Anthropic API key configured ✓
      </span>
      {% endif %}
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="ranker_score_model">Score model
        <span class="field-help">Model used to score jobs (e.g. <code>claude-opus-4-8</code>).</span>
      </label>
      <input type="text" id="ranker_score_model" name="ranker_score_model"
             value="{{ ranker_score_model }}"
             style="width:100%;font-family:monospace;font-size:0.9rem">
    </div>

    <h3 style="margin:1rem 0 0.5rem;font-size:1rem">Ollama settings
      <span class="field-help" style="font-weight:normal">
        (used when backend = ollama)
      </span>
    </h3>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="ollama_host">Ollama host URL</label>
      <input type="text" id="ollama_host" name="ollama_host"
             value="{{ ollama_host }}" placeholder="http://localhost:11434"
             style="width:100%;font-family:monospace;font-size:0.9rem">
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="ollama_score_model">Ollama score model
        <span class="field-help">e.g. <code>llama3.1</code> or <code>minimax-m3:cloud</code></span>
      </label>
      <input type="text" id="ollama_score_model" name="ollama_score_model"
             value="{{ ollama_score_model }}"
             style="width:100%;font-family:monospace;font-size:0.9rem">
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="ollama_num_predict">Ollama num_predict
        <span class="field-help">
          Token cap for generated response. Reasoning models need ≥ 16384.
        </span>
      </label>
      <input type="number" id="ollama_num_predict" name="ollama_num_predict"
             value="{{ ollama_num_predict if ollama_num_predict else '' }}"
             min="0" style="width:8rem">
    </div>

    <h3 style="margin:1rem 0 0.5rem;font-size:1rem">
      <code>[ranker.ui]</code> overlay
      <span class="field-help" style="font-weight:normal">
        Overrides <code>[ranker]</code> for the web UI's own rank calls only.
        Leave blank to use the base ranker config.
      </span>
    </h3>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="ranker_ui_backend">UI backend (overrides base)
        <span class="field-help">
          Blank = use base backend. Only set if the UI should use a different backend.
        </span>
      </label>
      <select id="ranker_ui_backend" name="ranker_ui_backend">
        <option value="">— same as base —</option>
        {% for b in valid_backends %}
        <option value="{{ b }}" {% if b == ranker_ui_backend %}selected{% endif %}>{{ b }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="ranker_ui_ollama_host">UI Ollama host
        <span class="field-help">Only relevant when UI backend = ollama.</span>
      </label>
      <input type="text" id="ranker_ui_ollama_host" name="ranker_ui_ollama_host"
             value="{{ ranker_ui_ollama_host }}" placeholder="http://localhost:11434"
             style="width:100%;font-family:monospace;font-size:0.9rem">
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="ranker_ui_ollama_score_model">UI Ollama score model</label>
      <input type="text" id="ranker_ui_ollama_score_model" name="ranker_ui_ollama_score_model"
             value="{{ ranker_ui_ollama_score_model }}"
             style="width:100%;font-family:monospace;font-size:0.9rem">
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="ranker_ui_ollama_num_predict">UI Ollama num_predict</label>
      <input type="number" id="ranker_ui_ollama_num_predict" name="ranker_ui_ollama_num_predict"
             value="{{ ranker_ui_ollama_num_predict if ranker_ui_ollama_num_predict else '' }}"
             min="0" style="width:8rem">
    </div>

    <div style="padding-top:1rem;border-top:1px solid var(--border);margin-top:1rem">
      <button type="submit" class="btn btn-primary">Save ranker</button>
    </div>
  </section>

</form>

<span id="action-status"
      hx-get="/actions/status?format=html"
      hx-trigger="load, every 2s"
      hx-swap="outerHTML"
      hx-target="#action-status"
      style="display:block;margin-top:0.75rem"></span>

{% endcall %}
{% endblock %}