{% extends "base.html" %}
{% block title %} — Settings{% endblock %}
{% block content %}
<div x-data="settingsPanel('{{ provider }}')" x-init="load()" class="max-w-3xl space-y-6">
  <div>
    <h1 class="text-xl font-semibold mb-1">Settings</h1>
    <p class="text-sm text-zinc-500 dark:text-zinc-400">
      Configure model providers. The local provider works out of the box; hosted
      providers become usable once you add an API key. Use "Test connection" to
      verify a key and load that provider's model list.
    </p>
  </div>

  <div class="flex items-center gap-3 text-sm">
    <span class="text-zinc-500 dark:text-zinc-400">Default provider</span>
    <select x-model="defaultProvider"
            class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1">
      <template x-for="p in providers" :key="p.name">
        <option :value="p.name" x-text="p.name"></option>
      </template>
    </select>
  </div>

  <div class="space-y-4">
    <template x-for="p in providers" :key="p.name">
      <div class="rounded p-4 space-y-3 border"
           :class="p.name === defaultProvider
                     ? 'border-accent ring-1 ring-accent'
                     : 'border-zinc-200 dark:border-zinc-800'">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <span x-text="statusGlyph(p)" :class="p.available ? 'text-green-500' : 'text-zinc-400'"></span>
            <span class="font-medium capitalize" x-text="p.name"></span>
            <span x-show="p.name === defaultProvider"
                  class="rounded bg-accent/20 text-accent px-2 py-0.5 text-xs">Active</span>
          </div>
          <button @click="test(p.name)"
                  class="rounded border border-zinc-300 dark:border-zinc-700 px-3 py-1 text-xs">
            Test connection
          </button>
        </div>

        <p class="text-xs text-zinc-500 dark:text-zinc-400" x-text="p.message"></p>

        <div class="grid grid-cols-2 gap-3 text-sm">
          <label class="flex flex-col gap-1">
            <span class="text-zinc-500 dark:text-zinc-400">Model</span>
            <!-- A <select> avoids password-manager icons; shown whenever a model
                 list is available. The configured value is always an option, even
                 if it is not (or no longer) in the fetched list. -->
            <template x-if="p.models.length">
              <select x-model="p.default_model"
                      class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1">
                <template x-if="p.default_model && !p.models.includes(p.default_model)">
                  <option :value="p.default_model" x-text="p.default_model + ' (configured)'"></option>
                </template>
                <template x-for="m in p.models" :key="m"><option :value="m" x-text="m"></option></template>
              </select>
            </template>
            <template x-if="!p.models.length">
              <input type="text" x-model="p.default_model"
                     autocomplete="off" data-1p-ignore data-lpignore="true" data-form-type="other"
                     class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1">
            </template>
          </label>

          <template x-if="p.name === 'ollama'">
            <label class="flex flex-col gap-1">
              <span class="text-zinc-500 dark:text-zinc-400">Base URL</span>
              <input type="text" x-model="ollamaBaseUrl"
                     class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1 font-mono">
            </label>
          </template>
          <template x-if="p.name !== 'ollama'">
            <label class="flex flex-col gap-1">
              <span class="text-zinc-500 dark:text-zinc-400">API key</span>
              <input type="password" x-model="p.api_key"
                     :placeholder="p.key_set ? p.key_masked : 'not set'"
                     class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1 font-mono">
            </label>
          </template>
        </div>
      </div>
    </template>
  </div>

  <div class="border border-zinc-200 dark:border-zinc-800 rounded p-4 space-y-3">
    <div class="font-medium">YouTube fetching</div>
    <p class="text-xs text-zinc-500 dark:text-zinc-400">
      Cookies clear YouTube's "confirm you're not a bot" gate when fetching.
      Pick a browser to read your logged-in cookies from, or point to an
      exported cookies.txt. The browser source wins if both are set.
    </p>
    <div class="grid grid-cols-2 gap-3 text-sm">
      <label class="flex flex-col gap-1">
        <span class="text-zinc-500 dark:text-zinc-400">Cookies from browser</span>
        <select x-model="youtube.cookies_from_browser"
                class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1">
          <option value="">none</option>
          <template x-for="b in browsers" :key="b"><option :value="b" x-text="b"></option></template>
        </select>
      </label>
      <label class="flex flex-col gap-1">
        <span class="text-zinc-500 dark:text-zinc-400">Cookies file</span>
        <input type="text" x-model="youtube.cookies_file" placeholder="~/.yttools/cookies.txt"
               class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1 font-mono">
      </label>
      <label class="flex flex-col gap-1">
        <span class="text-zinc-500 dark:text-zinc-400">Sleep between requests (s)</span>
        <input type="number" min="0" step="0.5" x-model.number="youtube.sleep_requests"
               class="rounded border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-2 py-1">
      </label>
    </div>
  </div>

  <div class="flex items-center gap-3">
    <button @click="save()"
            class="rounded bg-accent px-4 py-2 text-white text-sm font-medium">Save changes</button>
    <span x-show="saved" class="text-sm text-green-500">Saved</span>
  </div>
</div>
{% endblock %}