{% extends "base.html" %}
{% block title %}Scopuli — settings{% endblock %}
{% block head %}
  <link rel="stylesheet" href="{{ url_for('static', filename='settings.css') }}">
{% endblock %}

{% block main %}
<section class="settings">
  <h1>Settings</h1>
  <p class="hint">
    Active provider for AI edits and per-provider credentials. Settings persist
    to <code>~/.scopuli/config.toml</code>.
  </p>

  <form id="settings-form">
    <fieldset class="provider-select">
      <legend>Active provider</legend>
      <div class="segmented-control" role="radiogroup" aria-label="Active provider">
        {% for name in providers %}
        <label class="segment">
          <input type="radio" name="provider" value="{{ name }}"
                 {% if cfg.ai.provider == name %}checked{% endif %}>
          <span>{{ name }}</span>
        </label>
        {% endfor %}
      </div>
    </fieldset>

    {% for name in providers %}
    {% set p = cfg.providers.get(name, {}) %}
    <fieldset class="provider" data-provider="{{ name }}">
      <legend>{{ name }}</legend>

      {% if name == 'ollama' %}
      <div class="field">
        <span>
          Model
          <em id="ollama-status" class="ollama-status">detecting…</em>
        </span>
        <div class="rx-select" id="ollama-model-select" data-current="{{ p.model or '' }}"
             data-placeholder="Select a model">
          <input type="hidden" name="ollama.model" value="{{ p.model or '' }}">
          <button type="button" class="rx-select-trigger"
                  aria-haspopup="listbox" aria-expanded="false">
            <span class="rx-select-value">{{ p.model or 'Select a model' }}</span>
            <svg class="rx-select-caret" viewBox="0 0 12 12" aria-hidden="true">
              <path d="M3 4.5 L6 7.5 L9 4.5"
                    stroke="currentColor" stroke-width="1.5" fill="none"
                    stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <div class="rx-select-content" role="listbox" hidden></div>
        </div>
      </div>

      <label class="field">
        <span>Base URL</span>
        <input type="text" name="ollama.base_url" id="ollama-base-url"
               value="{{ p.base_url or '' }}" placeholder="http://localhost:11434">
      </label>

      <p class="hint">
        Local Ollama only — no API key. Install models with
        <code>ollama pull &lt;model&gt;</code>; they'll show up in the
        dropdown above.
      </p>
      {% else %}
      <label class="field">
        <span>Model</span>
        <input type="text" name="{{ name }}.model" value="{{ p.model or '' }}">
      </label>

      <label class="field">
        <span>API key</span>
        <input type="password" name="{{ name }}.api_key" value="{{ p.api_key or '' }}"
               placeholder="(blank → uses env var)">
      </label>

      {% if name == 'openai' %}
      <label class="field">
        <span>Base URL</span>
        <input type="text" name="openai.base_url" value="{{ p.base_url or '' }}"
               placeholder="(default OpenAI)">
      </label>
      {% endif %}
      {% endif %}
    </fieldset>
    {% endfor %}

    <div class="actions">
      <button type="submit" class="btn primary">Save settings</button>
      <span id="settings-status" class="status"></span>
    </div>
  </form>
</section>
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('static', filename='settings.js') }}"></script>
{% endblock %}