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

{% block title %}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 %}

<p style="font-size:0.85rem;color:var(--muted);margin:0 0 1rem">
  All sections are part of one form — the <strong>Save</strong> button at the bottom saves
  everything at once.
</p>

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

  {# ------------------------------------------------------------------ #}
  {# SECTION: Matching                                                   #}
  {# ------------------------------------------------------------------ #}
  <section id="matching">
    <h2 style="margin:0 0 0.75rem;font-size:1.15rem;border-bottom:1px solid var(--border);
               padding-bottom:0.4rem">Matching</h2>
    <p style="margin:0 0 0.75rem;font-size:0.85rem;color:var(--muted)">
      Controls the relevance gate and job list display defaults.
    </p>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="min_fit_score">Min fit score
        <span class="field-help">Jobs below this score are hidden from the digest.</span>
      </label>
      <input type="number" id="min_fit_score" name="min_fit_score"
             value="{{ min_fit_score }}" min="0" max="100" style="width:6rem">
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="digest_size">Digest size
        <span class="field-help">Max number of top matches shown in the daily digest.</span>
      </label>
      <input type="number" id="digest_size" name="digest_size"
             value="{{ digest_size }}" min="0" style="width:6rem">
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="followup_after_days">Follow-up after days
        <span class="field-help">Applied jobs silent this many days trigger a follow-up nudge.</span>
      </label>
      <input type="number" id="followup_after_days" name="followup_after_days"
             value="{{ followup_after_days }}" min="0" style="width:6rem">
    </div>

    <h3 style="margin:1rem 0 0.5rem;font-size:1rem">UI defaults</h3>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="min_score_default">Default min score
        <span class="field-help">Job list hides jobs below this score when no filter is applied.</span>
      </label>
      <input type="number" id="min_score_default" name="min_score_default"
             value="{{ min_score_default_cfg }}" min="0" max="100" style="width:6rem">
    </div>

    <div style="margin-bottom:0.75rem">
      <label style="font-size:0.75rem;color:var(--muted);font-weight:500;
                    text-transform:uppercase;letter-spacing:0.04em;
                    display:block;margin-bottom:0.35rem">
        Hidden statuses by default
      </label>
      <span class="field-help" style="display:block;margin-bottom:0.4rem">
        Statuses hidden in the job list filter when no explicit filter is chosen.
      </span>
      <div style="display:flex;flex-wrap:wrap;gap:0.3rem 0.75rem;padding:0.3rem 0">
        {% for st in all_statuses %}
        <label class="checkbox-item">
          <input type="checkbox" name="hidden_statuses" value="{{ st }}"
                 {% if st in hidden_statuses_cfg %}checked{% endif %}>
          {{ st|status_label if st != "untracked" else "New / untracked" }}
        </label>
        {% endfor %}
      </div>
    </div>

    <h3 style="margin:1rem 0 0.5rem;font-size:1rem">Relevance gate</h3>
    <p style="margin:0 0 0.75rem;font-size:0.85rem;color:var(--muted)">
      Title-based pre-filter — checked before LLM scoring. Off-target jobs get
      <code>fit_score=0</code> and are hidden from <em>/new</em>.
      Leave keyword lists blank to derive them from your Profile below.
    </p>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="exclude_title_keywords">Exclude title keywords (one per line)
        <span class="field-help">
          Jobs whose title contains any of these words are marked off-target (exclude beats target).
          {% if exclude_kws_hint %}Default when blank: <em>{{ exclude_kws_hint }}</em>{% endif %}
        </span>
      </label>
      <textarea id="exclude_title_keywords" name="exclude_title_keywords" rows="4"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="exclude_title_keywords"
>{{ exclude_title_keywords }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="target_title_keywords">Relevance-gate title keywords (one per line)
        <span class="field-help">
          Single words a job title must contain to pass the relevance gate (when
          "require title target" is on). Left blank, these are derived from your profile.
          {% if target_kws_hint %}Default when blank: <em>{{ target_kws_hint }}</em>{% endif %}
        </span>
      </label>
      <textarea id="target_title_keywords" name="target_title_keywords" rows="4"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="target_title_keywords"
>{{ target_title_keywords }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label class="checkbox-item">
        <input type="checkbox" id="require_title_target" name="require_title_target"
               value="true" {% if require_title_target %}checked{% endif %}>
        Require target keyword in title
        <span class="field-help">Uncheck to allow any non-excluded title.</span>
      </label>
    </div>

    <div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.5rem">
      <form method="post" action="/config/rerank" style="display:inline">
        <button type="submit" class="btn btn-action">Re-rank all jobs</button>
      </form>
      <form method="post" action="/config/backfill-relevance" style="display:inline">
        <button type="submit" class="btn btn-action">Clean off-target jobs</button>
      </form>
    </div>
    <p style="font-size:0.8rem;color:var(--muted);margin:0.4rem 0 0">
      Re-rank clears all scores and re-runs ranking. Clean off-target marks jobs failing
      location/role gates as score=0 (instant, no LLM).
    </p>
  </section>

  {# ------------------------------------------------------------------ #}
  {# SECTION: Profile                                                    #}
  {# ------------------------------------------------------------------ #}
  <section id="profile">
    <h2 style="margin:0 0 0.75rem;font-size:1.15rem;border-bottom:1px solid var(--border);
               padding-bottom:0.4rem">Profile</h2>
    <p style="margin:0 0 0.75rem;font-size:0.85rem;color:var(--muted)">
      Job-matching profile: drives ranking and filtering. Nested subtables
      (e.g. <code>[profile.requirements]</code>) are preserved on save.
    </p>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="summary">Summary
        <span class="field-help">Free-text description the ranker uses to judge fit.</span>
      </label>
      <textarea id="summary" name="summary" rows="3"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
>{{ profile_summary }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="target_roles">Target job titles (one per line)
        <span class="field-help">
          Full role titles you're targeting (e.g. "Senior DevOps Engineer"). Used by the
          keyword pre-filter and to derive relevance targets.
        </span>
      </label>
      <textarea id="target_roles" name="target_roles" rows="4"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="target_roles"
>{{ profile_target_roles }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="keywords_must">Must-have keywords (one per line)
        <span class="field-help">All of these must appear in a job to score above 0.</span>
      </label>
      <textarea id="keywords_must" name="keywords_must" rows="3"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="keywords_must"
>{{ profile_keywords_must }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="keywords_nice">Nice-to-have keywords (one per line)
        <span class="field-help">Extra positive signal; not required to score.</span>
      </label>
      <textarea id="keywords_nice" name="keywords_nice" rows="3"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="keywords_nice"
>{{ profile_keywords_nice }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="locations">Locations (one per line)
        <span class="field-help">Preferred work locations — used in location gate filtering.</span>
      </label>
      <textarea id="locations" name="locations" rows="2"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="locations"
>{{ profile_locations }}</textarea>
    </div>

    <div class="filter-group" style="margin-bottom:0.75rem">
      <label for="dealbreakers">Dealbreakers (one per line)
        <span class="field-help">Jobs containing any of these are automatically down-ranked.</span>
      </label>
      <textarea id="dealbreakers" name="dealbreakers" rows="2"
                style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                data-list-drawer="dealbreakers"
>{{ profile_dealbreakers }}</textarea>
    </div>
  </section>

  {# ------------------------------------------------------------------ #}
  {# SECTION: Sources                                                    #}
  {# ------------------------------------------------------------------ #}
  <section id="sources">
    <h2 style="margin:0 0 0.75rem;font-size:1.15rem;border-bottom:1px solid var(--border);
               padding-bottom:0.4rem">Sources</h2>
    <p style="margin:0 0 0.75rem;font-size:0.85rem;color:var(--muted)">
      Enable/disable job sources and configure their settings.
      API secrets (keys, passwords) live in <code>secrets.toml</code> — never entered here.
    </p>

    {# Greenhouse #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="greenhouse_enabled" value="true"
                 {% if src_greenhouse.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Greenhouse
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="greenhouse_companies">Company slugs (one per line)
            <span class="field-help">Greenhouse board token — usually the company slug.</span>
          </label>
          <textarea id="greenhouse_companies" name="greenhouse_companies" rows="3"
                    style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                    data-list-drawer="greenhouse_companies"
>{{ "\n".join(src_greenhouse.get("companies", [])) }}</textarea>
        </div>
      </div>
    </details>

    {# Lever #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="lever_enabled" value="true"
                 {% if src_lever.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Lever
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="lever_companies">Company slugs (one per line)</label>
          <textarea id="lever_companies" name="lever_companies" rows="3"
                    style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                    data-list-drawer="lever_companies"
>{{ "\n".join(src_lever.get("companies", [])) }}</textarea>
        </div>
      </div>
    </details>

    {# Ashby #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="ashby_enabled" value="true"
                 {% if src_ashby.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Ashby
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="ashby_companies">Company slugs (one per line)</label>
          <textarea id="ashby_companies" name="ashby_companies" rows="3"
                    style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                    data-list-drawer="ashby_companies"
>{{ "\n".join(src_ashby.get("companies", [])) }}</textarea>
        </div>
      </div>
    </details>

    {# Teamtailor #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="teamtailor_enabled" value="true"
                 {% if src_teamtailor.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Teamtailor
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="teamtailor_companies">Company tokens (one per line)
            <span class="field-help">
              Bare slug (e.g. <code>polestar</code>) or full custom host
              (e.g. <code>careers.voi.com</code>).
            </span>
          </label>
          <textarea id="teamtailor_companies" name="teamtailor_companies" rows="3"
                    style="width:100%;font-family:inherit;font-size:0.9rem;resize:vertical"
                    data-list-drawer="teamtailor_companies"
>{{ "\n".join(src_teamtailor.get("companies", [])) }}</textarea>
        </div>
      </div>
    </details>

    {# Adzuna #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="adzuna_enabled" value="true"
                 {% if src_adzuna.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Adzuna
        </label>
        {% if adzuna_secret_configured %}
        <span class="secret-status configured">API key configured ✓</span>
        {% else %}
        <span class="secret-status missing">API key not configured</span>
        {% endif %}
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <p style="margin:0 0 0.5rem;font-size:0.82rem;color:var(--muted)">
          API secrets (<code>app_id</code>, <code>app_key</code>) must be set in
          <code>secrets.toml</code> — not editable here.
        </p>
        <div class="filter-group" style="margin-bottom:0.5rem">
          <label for="adzuna_country">Country code
            <span class="field-help">Two-letter country code, e.g. <code>gb</code>, <code>us</code>.</span>
          </label>
          <input type="text" id="adzuna_country" name="adzuna_country"
                 value="{{ src_adzuna.get('country', '') }}"
                 style="width:6rem;font-family:inherit">
        </div>
        <div class="filter-group" style="margin-bottom:0.5rem">
          <label for="adzuna_what">Search term (<code>what</code>)</label>
          <input type="text" id="adzuna_what" name="adzuna_what"
                 value="{{ src_adzuna.get('what', '') }}"
                 style="width:100%;font-family:inherit">
        </div>
        <div class="filter-group">
          <label for="adzuna_where">Location (<code>where</code>)</label>
          <input type="text" id="adzuna_where" name="adzuna_where"
                 value="{{ src_adzuna.get('where', '') }}"
                 style="width:100%;font-family:inherit">
        </div>
      </div>
    </details>

    {# Themuse #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="themuse_enabled" value="true"
                 {% if src_themuse.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          The Muse
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="themuse_category">Category</label>
          <input type="text" id="themuse_category" name="themuse_category"
                 value="{{ src_themuse.get('category', '') }}"
                 style="width:100%;font-family:inherit">
        </div>
      </div>
    </details>

    {# Remotive #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="remotive_enabled" value="true"
                 {% if src_remotive.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          Remotive
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <div class="filter-group">
          <label for="remotive_category">Category</label>
          <input type="text" id="remotive_category" name="remotive_category"
                 value="{{ src_remotive.get('category', '') }}"
                 style="width:100%;font-family:inherit">
        </div>
      </div>
    </details>

    {# Simple toggle sources #}
    <div style="display:grid;gap:0.5rem;margin-bottom:1rem">
      <label class="checkbox-item">
        <input type="checkbox" name="remoteok_enabled" value="true"
               {% if src_remoteok.get("enabled") %}checked{% endif %}>
        RemoteOK
      </label>
      <label class="checkbox-item">
        <input type="checkbox" name="arbeitnow_enabled" value="true"
               {% if src_arbeitnow.get("enabled") %}checked{% endif %}>
        Arbeitnow
      </label>
      <label class="checkbox-item">
        <input type="checkbox" name="wwr_enabled" value="true"
               {% if src_wwr.get("enabled") %}checked{% endif %}>
        We Work Remotely
      </label>
    </div>

    {# JobTech #}
    <details style="margin-bottom:1rem;border:1px solid var(--border);border-radius:6px">
      <summary style="padding:0.6rem 0.75rem;cursor:pointer;font-weight:500">
        <label class="checkbox-item" style="display:inline-flex;pointer-events:none">
          <input type="checkbox" name="jobtech_enabled" value="true"
                 {% if src_jobtech.get("enabled") %}checked{% endif %}
                 onclick="event.stopPropagation()" style="pointer-events:auto">
          JobTech (Arbetsförmedlingen)
        </label>
      </summary>
      <div style="padding:0.75rem;border-top:1px solid var(--border)">
        <p style="margin:0 0 0.5rem;font-size:0.82rem;color:var(--muted)">
          Keyless Swedish Platsbanken API. No API key required.
        </p>
        <div class="filter-group">
          <label for="jobtech_query">Search query (optional)</label>
          <input type="text" id="jobtech_query" name="jobtech_query"
                 value="{{ src_jobtech.get('query', '') }}"
                 style="width:100%;font-family:inherit">
        </div>
      </div>
    </details>

    {# Email — read-only display (auth via dedicated button) #}
    <div style="margin-top:0.75rem;padding:0.75rem;background:var(--border);
                border-radius:6px;opacity:0.8">
      <h3 style="margin:0 0 0.5rem;font-size:1rem">Email accounts</h3>
      {% if email_accounts %}
        <ul style="margin:0;padding:0 0 0 1.2rem;font-size:0.88rem">
          {% for acct in email_accounts %}
          <li>
            <strong>{{ acct.name }}</strong> — {{ acct.imap_host }}
            ({{ acct.auth }}, folder: {{ acct.folder }})
            {% if acct.enabled %}<em>enabled</em>{% else %}<em>disabled</em>{% endif %}
            {% if email_secrets_present %}
            — <span class="secret-status configured">credentials configured ✓</span>
            {% else %}
            — <span class="secret-status missing">no credentials in secrets.toml</span>
            {% endif %}
          </li>
          {% endfor %}
        </ul>
      {% else %}
        <p style="margin:0;font-size:0.88rem;color:var(--muted)">
          No email accounts in config.toml. Add <code>[[sources.email]]</code> entries
          and credentials to <code>secrets.toml</code>.
          See <a href="/help#email">Help → Email</a> for setup.
        </p>
      {% endif %}
      <form method="post" action="/config/email-auth" style="margin-top:0.75rem">
        <button type="submit" class="btn btn-action">Set up email (OAuth)</button>
      </form>
      <span id="action-status-email"
            hx-get="/actions/status?format=html"
            hx-trigger="load, every 2s"
            hx-swap="outerHTML"
            hx-target="#action-status-email"
            style="display:block;margin-top:0.75rem"></span>
    </div>
  </section>

  {# ------------------------------------------------------------------ #}
  {# SECTION: Ranker                                                     #}
  {# ------------------------------------------------------------------ #}
  <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>
    <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>
  </section>

  {# ------------------------------------------------------------------ #}
  {# Save button                                                         #}
  {# ------------------------------------------------------------------ #}
  <div style="padding-top:0.5rem;border-top:1px solid var(--border)">
    <button type="submit" class="btn btn-primary">Save all settings</button>
  </div>

</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 %}
<script src="/static/list-drawer.js" defer></script>
{% endblock %}