{% extends "base.html" %}

{% block title %}Settings — Job Cannon{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto space-y-6">

  <!-- Page header -->
  <div>
    <h1 class="text-2xl font-bold text-slate-100">Settings</h1>
    <p class="text-slate-400 text-sm mt-1">Configure job search preferences, sources, and scoring. Changes persist to config.yaml.</p>
  </div>

  {# F1 — inbox-wiring system check tile #}
  {% include "settings/_inbox_status_tile.html" %}

  <form action="{{ url_for('settings.save') }}" method="post" class="space-y-6">
    <input type="hidden" name="_config_mtime" value="{{ config_mtime | default(0) }}">

    <!-- Profile Targets section -->
    <div class="bg-slate-800 rounded-lg overflow-hidden">
      <button type="button" onclick="toggleSection(this)"
              class="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-slate-750 transition-colors">
        <div class="flex items-center gap-3">
          <svg class="w-5 h-5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
          </svg>
          <span class="font-semibold text-slate-100">Profile Targets</span>
        </div>
        <svg class="section-chevron w-4 h-4 text-slate-400 transition-transform duration-200 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>
      <div class="section-body border-t border-slate-700 p-6 space-y-4">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">Target Titles <span class="text-slate-500 font-normal">(one per line)</span></label>
            <textarea name="target_titles" rows="5"
                      class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none resize-y font-mono">{{ config.get('profile', {}).get('target_titles', []) | join('\n') }}</textarea>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">Target Locations <span class="text-slate-500 font-normal">(one per line)</span></label>
            <textarea name="target_locations" rows="5"
                      class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none resize-y font-mono">{{ config.get('profile', {}).get('target_locations', []) | join('\n') }}</textarea>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">Minimum Salary (USD/year)</label>
            <input type="number" name="min_salary" step="1000" min="0"
                   value="{{ config.get('profile', {}).get('min_salary', 0) }}"
                   class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">Industries <span class="text-slate-500 font-normal">(one per line)</span></label>
            <textarea name="industries" rows="4"
                      class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none resize-y font-mono">{{ config.get('profile', {}).get('industries', []) | join('\n') }}</textarea>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">Exclude Title Keywords <span class="text-slate-500 font-normal">(one per line)</span></label>
            <textarea name="exclusion_title_keywords" rows="5"
                      class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none resize-y font-mono">{{ config.get('profile', {}).get('exclusions', {}).get('title_keywords', []) | join('\n') }}</textarea>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">Exclude Companies <span class="text-slate-500 font-normal">(one per line)</span></label>
            <textarea name="exclusion_companies" rows="5"
                      class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none resize-y font-mono">{{ config.get('profile', {}).get('exclusions', {}).get('companies', []) | join('\n') }}</textarea>
          </div>
        </div>

        <div>
          <label class="block text-sm font-medium text-slate-300 mb-1">Skills to Match <span class="text-slate-500 font-normal">(one per line — used for job scoring)</span></label>
          <textarea name="profile_skills" rows="4"
                    class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none resize-y font-mono">{{ config.get('profile', {}).get('skills', []) | join('\n') }}</textarea>
        </div>
      </div>
    </div>

    <!-- Sources section -->
    <div class="bg-slate-800 rounded-lg overflow-hidden">
      <button type="button" onclick="toggleSection(this)"
              class="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-slate-750 transition-colors">
        <div class="flex items-center gap-3">
          <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
          </svg>
          <span class="font-semibold text-slate-100">Sources</span>
        </div>
        <svg class="section-chevron w-4 h-4 text-slate-400 transition-transform duration-200 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>
      <div class="section-body border-t border-slate-700 p-6 space-y-6">
        <!-- Gmail -->
        <div>
          <h3 class="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-red-400 inline-block"></span>
            Gmail
          </h3>
          <div class="grid grid-cols-2 gap-4">
            <div class="flex items-center gap-3">
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="gmail_enabled" value="">
                <input type="checkbox" name="gmail_enabled" value="on"
                       class="w-4 h-4 accent-violet-500"
                       {% if config.get('sources', {}).get('gmail', {}).get('enabled', False) %}checked{% endif %}>
                <span class="text-sm text-slate-300">Enabled</span>
              </label>
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Lookback Days</label>
              <input type="number" name="gmail_lookback_days" min="1" max="365"
                     value="{{ config.get('sources', {}).get('gmail', {}).get('lookback_days', DEFAULT_LOOKBACK_DAYS) }}"
                     class="w-32 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
            </div>
          </div>
          {% set gmail_senders = config.get('sources', {}).get('gmail', {}).get('senders', {}) %}
          <div class="mt-3 grid grid-cols-2 gap-3">
            {% set sender_fields = [
              ('linkedin_alerts', 'LinkedIn Alerts'),
              ('linkedin_jobs', 'LinkedIn Jobs'),
              ('glassdoor', 'Glassdoor'),
              ('indeed', 'Indeed'),
              ('ziprecruiter', 'ZipRecruiter')
            ] %}
            {% for key, label in sender_fields %}
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">{{ label }}</label>
              <input type="email" name="gmail_sender_{{ key }}"
                     value="{{ gmail_senders.get(key, '') }}"
                     class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
            </div>
            {% endfor %}
          </div>
        </div>

        <hr class="border-slate-700">

        <!-- Stage 7.2: Gmail IMAP (settings-side counterpart to onboarding step) -->
        {% set imap_cfg = config.get('sources', {}).get('imap', {}) %}
        <div>
          <h3 class="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-red-400 inline-block"></span>
            Gmail (IMAP)
          </h3>
          <p class="text-xs text-slate-400 mb-3">
            Read job-alert emails over IMAP with a Google App Password — the secondary route in addition to (or instead of) the Gmail API. See onboarding for how to generate one at
            <a href="https://myaccount.google.com/apppasswords" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 underline">myaccount.google.com/apppasswords</a>.
          </p>
          <div class="flex items-center gap-3 mb-3">
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="hidden" name="imap_enabled" value="">
              <input type="checkbox" name="imap_enabled" value="on"
                     class="w-4 h-4 accent-violet-500"
                     {% if imap_cfg.get('enabled', False) %}checked{% endif %}>
              <span class="text-sm text-slate-300">Enabled</span>
            </label>
          </div>
          <div class="grid grid-cols-2 gap-4 mb-3">
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Gmail address</label>
              <input type="email" name="imap_email"
                     value="{{ imap_cfg.get('email', '') }}"
                     placeholder="you@gmail.com"
                     class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">App password (16 chars w/ spaces)</label>
              <input type="password" name="imap_app_password"
                     value=""
                     placeholder="{% if secret_set and secret_set.get('sources.imap.app_password') %}(set — type to replace){% else %}(not set){% endif %}"
                     autocomplete="off"
                     class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
            </div>
          </div>
          <div class="grid grid-cols-3 gap-4">
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Host</label>
              <input type="text" name="imap_host"
                     value="{{ imap_cfg.get('host', 'imap.gmail.com') }}"
                     class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Port</label>
              <input type="number" name="imap_port" min="1" max="65535"
                     value="{{ imap_cfg.get('port', 993) }}"
                     class="w-32 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Folder</label>
              <input type="text" name="imap_folder"
                     value="{{ imap_cfg.get('folder', 'INBOX') }}"
                     class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
            </div>
          </div>
        </div>

        <hr class="border-slate-700">

        <!-- Stage 7: Job Portals (free) — visible by default, no signup required for keyless portals -->
        <div>
          <h3 class="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-emerald-400 inline-block"></span>
            Job Portals (free)
          </h3>
          <p class="text-xs text-slate-500 mb-3">
            Niche job-board discovery. When enabled, Job Cannon polls RemoteOK, Remotive,
            and Himalayas automatically (no key). The portals below each ship as optional —
            two are keyless (Jobicy, Y Combinator) and three require a free signup
            (USAJobs, Adzuna, Jooble) in exchange for a generous free tier.
          </p>
          <div class="grid grid-cols-3 gap-4 mb-3">
            <div class="flex items-center gap-3">
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="portal_search_enabled" value="">
                <input type="checkbox" name="portal_search_enabled" value="on"
                       class="w-4 h-4 accent-violet-500"
                       {% if config.get('sources', {}).get('portal_search', {}).get('enabled', False) %}checked{% endif %}>
                <span class="text-sm text-slate-300">Enabled (master switch)</span>
              </label>
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Max SERP queries / run</label>
              <input type="number" name="portal_search_max_serp_queries" min="0" max="500"
                     value="{{ config.get('sources', {}).get('portal_search', {}).get('max_serp_queries', 30) }}"
                     class="w-32 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
              <p class="text-xs text-slate-600 mt-1">Caps DataForSEO/CSE site: queries</p>
            </div>
          </div>
          <div class="mb-4">
            <label class="block text-xs font-medium text-slate-400 mb-1">Keywords <span class="text-slate-500 font-normal">(one per line)</span></label>
            <textarea name="portal_search_keywords" rows="3"
                      class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none resize-y font-mono">{{ config.get('sources', {}).get('portal_search', {}).get('keywords', []) | join('\n') }}</textarea>
            <p class="text-xs text-slate-600 mt-1">Leave empty to use your target titles.</p>
          </div>

          <!-- Keyless free portals -->
          <div class="bg-slate-900/40 border border-slate-700 rounded p-3 mb-3">
            <p class="text-xs font-semibold text-slate-300 mb-2">Keyless portals (no signup)</p>
            <div class="grid grid-cols-2 gap-3">
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="portal_search_jobicy_enabled" value="">
                <input type="checkbox" name="portal_search_jobicy_enabled" value="on"
                       class="w-4 h-4 accent-violet-500"
                       {% if config.get('sources', {}).get('portal_search', {}).get('jobicy', {}).get('enabled', False) %}checked{% endif %}>
                <span class="text-sm text-slate-300">Jobicy <span class="text-slate-500 text-xs">— remote-only board</span></span>
              </label>
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="portal_search_yc_enabled" value="">
                <input type="checkbox" name="portal_search_yc_enabled" value="on"
                       class="w-4 h-4 accent-violet-500"
                       {% if config.get('sources', {}).get('portal_search', {}).get('yc_workatastartup', {}).get('enabled', False) %}checked{% endif %}>
                <span class="text-sm text-slate-300">Y Combinator <span class="text-slate-500 text-xs">— Work at a Startup</span></span>
              </label>
            </div>
          </div>

          <!-- USAJobs (free signup) -->
          <div class="bg-slate-900/40 border border-slate-700 rounded p-3 mb-3">
            <div class="flex items-center justify-between mb-2">
              <p class="text-xs font-semibold text-slate-300">USAJobs <span class="text-slate-500 font-normal">— US federal jobs (free with email registration)</span></p>
              <a href="https://developer.usajobs.gov/apirequest/" target="_blank" rel="noreferrer"
                 class="text-xs text-violet-400 hover:text-violet-300">Get a key →</a>
            </div>
            <div class="grid grid-cols-3 gap-3">
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="portal_search_usajobs_enabled" value="">
                <input type="checkbox" name="portal_search_usajobs_enabled" value="on"
                       class="w-4 h-4 accent-violet-500"
                       {% if config.get('sources', {}).get('portal_search', {}).get('usajobs', {}).get('enabled', False) %}checked{% endif %}>
                <span class="text-sm text-slate-300">Enabled</span>
              </label>
              <div>
                <label class="block text-xs font-medium text-slate-400 mb-1">User-Agent Email</label>
                <input type="email" name="portal_search_usajobs_user_agent_email"
                       value=""
                       placeholder="{% if secret_set and secret_set.get('sources.portal_search.usajobs.user_agent_email') %}(saved — type to replace){% else %}you@example.com{% endif %}"
                       autocomplete="off"
                       class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
              </div>
              <div>
                <label class="block text-xs font-medium text-slate-400 mb-1">Authorization Key</label>
                <input type="password" name="portal_search_usajobs_authorization_key"
                       value=""
                       placeholder="{% if secret_set and secret_set.get('sources.portal_search.usajobs.authorization_key') %}(saved — type to replace){% else %}(not set){% endif %}"
                       autocomplete="off"
                       class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none font-mono">
              </div>
            </div>
          </div>

          <!-- Adzuna (free signup) -->
          <div class="bg-slate-900/40 border border-slate-700 rounded p-3 mb-3">
            <div class="flex items-center justify-between mb-2">
              <p class="text-xs font-semibold text-slate-300">Adzuna <span class="text-slate-500 font-normal">— global aggregator (free dev tier, ~250 calls/day per country)</span></p>
              <a href="https://developer.adzuna.com/signup" target="_blank" rel="noreferrer"
                 class="text-xs text-violet-400 hover:text-violet-300">Get a key →</a>
            </div>
            <div class="grid grid-cols-4 gap-3">
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="portal_search_adzuna_enabled" value="">
                <input type="checkbox" name="portal_search_adzuna_enabled" value="on"
                       class="w-4 h-4 accent-violet-500"
                       {% if config.get('sources', {}).get('portal_search', {}).get('adzuna', {}).get('enabled', False) %}checked{% endif %}>
                <span class="text-sm text-slate-300">Enabled</span>
              </label>
              <div>
                <label class="block text-xs font-medium text-slate-400 mb-1">App ID</label>
                <input type="password" name="portal_search_adzuna_app_id"
                       value=""
                       placeholder="{% if secret_set and secret_set.get('sources.portal_search.adzuna.app_id') %}(saved — type to replace){% else %}(not set){% endif %}"
                       autocomplete="off"
                       class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none font-mono">
              </div>
              <div>
                <label class="block text-xs font-medium text-slate-400 mb-1">App Key</label>
                <input type="password" name="portal_search_adzuna_app_key"
                       value=""
                       placeholder="{% if secret_set and secret_set.get('sources.portal_search.adzuna.app_key') %}(saved — type to replace){% else %}(not set){% endif %}"
                       autocomplete="off"
                       class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none font-mono">
              </div>
              <div>
                <label class="block text-xs font-medium text-slate-400 mb-1">Country</label>
                <input type="text" name="portal_search_adzuna_country" maxlength="3"
                       value="{{ config.get('sources', {}).get('portal_search', {}).get('adzuna', {}).get('country', 'us') }}"
                       placeholder="us"
                       class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none uppercase">
                <p class="text-xs text-slate-600 mt-1">ISO: us, gb, au, ca, de, fr, in, sg…</p>
              </div>
            </div>
          </div>

          <!-- Jooble (free signup) -->
          <div class="bg-slate-900/40 border border-slate-700 rounded p-3">
            <div class="flex items-center justify-between mb-2">
              <p class="text-xs font-semibold text-slate-300">Jooble <span class="text-slate-500 font-normal">— global aggregator (free with email registration)</span></p>
              <a href="https://jooble.org/api/about" target="_blank" rel="noreferrer"
                 class="text-xs text-violet-400 hover:text-violet-300">Get a key →</a>
            </div>
            <div class="grid grid-cols-3 gap-3">
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="portal_search_jooble_enabled" value="">
                <input type="checkbox" name="portal_search_jooble_enabled" value="on"
                       class="w-4 h-4 accent-violet-500"
                       {% if config.get('sources', {}).get('portal_search', {}).get('jooble', {}).get('enabled', False) %}checked{% endif %}>
                <span class="text-sm text-slate-300">Enabled</span>
              </label>
              <div class="col-span-2">
                <label class="block text-xs font-medium text-slate-400 mb-1">API Key</label>
                <input type="password" name="portal_search_jooble_api_key"
                       value=""
                       placeholder="{% if secret_set and secret_set.get('sources.portal_search.jooble.api_key') %}(saved — type to replace){% else %}(not set){% endif %}"
                       autocomplete="off"
                       class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none font-mono">
              </div>
            </div>
          </div>
        </div>

        <hr class="border-slate-700">

        <!-- Stage 6: Advanced — paid SERP providers (collapsed by default) -->
        <details class="bg-slate-900/40 border border-slate-700 rounded p-4 space-y-6">
          <summary class="cursor-pointer text-sm font-semibold text-slate-200 select-none flex items-center gap-2">
            <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Advanced: paid SERP providers (optional)
          </summary>
          <p class="text-xs text-slate-400 leading-relaxed">
            Most users won't need these — Job Cannon ships with free alternatives (RemoteOK,
            Remotive, Himalayas, USAJobs, Adzuna, Jooble, Jobicy, Y Combinator's Work at a
            Startup, Google Programmable Search). Add a key only if you want faster
            speed-to-discovery, or to backfill job descriptions for postings missing detail.
          </p>

        <!-- SerpAPI -->
        <div>
          <h3 class="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-green-400 inline-block"></span>
            SerpAPI (Google Jobs)
          </h3>
          <div class="grid grid-cols-2 gap-4 mb-3">
            <div class="flex items-center gap-3">
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="serpapi_enabled" value="">
                <input type="checkbox" name="serpapi_enabled" value="on"
                       class="w-4 h-4 accent-violet-500"
                       {% if config.get('sources', {}).get('serpapi', {}).get('enabled', False) %}checked{% endif %}>
                <span class="text-sm text-slate-300">Enabled</span>
              </label>
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">API Key</label>
              <input type="password" name="serpapi_api_key"
                     value=""
                     placeholder="{% if secret_set and secret_set.get('sources.serpapi.api_key') %}(set — type to replace){% else %}(not set){% endif %}"
                     autocomplete="off"
                     class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none font-mono">
            </div>
          </div>
          <div>
            <label class="block text-xs font-medium text-slate-400 mb-2">Search Queries</label>
            <input type="hidden" name="_serpapi_queries_present" value="1">
            <div id="serpapi-queries" class="space-y-2">
              {% for q in config.get('sources', {}).get('serpapi', {}).get('queries', []) %}
              <div class="flex gap-2 items-center serpapi-query-row">
                <input type="text" name="serpapi_query_{{ loop.index0 }}" value="{{ q.get('query', '') }}"
                       placeholder="Query (e.g. Staff Data Scientist)"
                       class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
                <input type="text" name="serpapi_location_{{ loop.index0 }}" value="{{ q.get('location', '') }}"
                       placeholder="Location (e.g. San Francisco Bay Area)"
                       class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
                <button type="button" onclick="removeSerpApiRow(this)"
                        class="text-slate-600 hover:text-red-400 transition-colors">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
                </button>
              </div>
              {% endfor %}
            </div>
            <button type="button" onclick="addSerpApiRow()"
                    class="mt-2 text-xs text-violet-400 hover:text-violet-300 transition-colors">+ Add Query</button>
          </div>
        </div>

        <hr class="border-slate-700">

        <!-- Thordata -->
        <div>
          <h3 class="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-cyan-400 inline-block"></span>
            Thordata (Google Jobs SERP)
          </h3>
          <div class="grid grid-cols-3 gap-4 mb-3">
            <div class="flex items-center gap-3">
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="thordata_enabled" value="">
                <input type="checkbox" name="thordata_enabled" value="on"
                       class="w-4 h-4 accent-violet-500"
                       {% if config.get('sources', {}).get('thordata', {}).get('enabled', False) %}checked{% endif %}>
                <span class="text-sm text-slate-300">Enabled</span>
              </label>
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">API Key</label>
              <input type="password" name="thordata_api_key"
                     value=""
                     placeholder="{% if secret_set and secret_set.get('sources.thordata.api_key') %}(set — type to replace){% else %}(not set){% endif %}"
                     autocomplete="off"
                     class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none font-mono">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Max Age (days)</label>
              <input type="number" name="thordata_max_age_days" min="1" max="30"
                     value="{{ config.get('sources', {}).get('thordata', {}).get('max_age_days', 3) }}"
                     class="w-32 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
            </div>
          </div>
          <div>
            <label class="block text-xs font-medium text-slate-400 mb-2">Search Queries</label>
            <input type="hidden" name="_thordata_queries_present" value="1">
            <div id="thordata-queries" class="space-y-2">
              {% for q in config.get('sources', {}).get('thordata', {}).get('queries', []) %}
              <div class="flex gap-2 items-center thordata-query-row">
                <input type="text" name="thordata_query_{{ loop.index0 }}" value="{{ q.get('query', '') }}"
                       placeholder="Query (e.g. Staff Data Scientist)"
                       class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
                <input type="text" name="thordata_location_{{ loop.index0 }}" value="{{ q.get('location', '') }}"
                       placeholder="Location (e.g. San Francisco Bay Area)"
                       class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
                <button type="button" onclick="removeThordataRow(this)"
                        class="text-slate-600 hover:text-red-400 transition-colors">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
                </button>
              </div>
              {% endfor %}
            </div>
            <button type="button" onclick="addThordataRow()"
                    class="mt-2 text-xs text-violet-400 hover:text-violet-300 transition-colors">+ Add Query</button>
          </div>
        </div>

        <hr class="border-slate-700">

        <!-- DataForSEO -->
        <div>
          <h3 class="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-amber-400 inline-block"></span>
            DataForSEO (Google Jobs SERP)
          </h3>
          <p class="text-xs text-slate-500 mb-3">
            Cheapest of the SERP options (~$0.87/month at default settings). Credentials are
            <code class="text-slate-400">base64(login:password)</code> — copy from
            <a href="https://app.dataforseo.com/api-access" target="_blank" rel="noreferrer"
               class="text-violet-400 hover:text-violet-300">DataForSEO API access</a>.
          </p>
          <div class="grid grid-cols-3 gap-4 mb-3">
            <div class="flex items-center gap-3">
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="dataforseo_enabled" value="">
                <input type="checkbox" name="dataforseo_enabled" value="on"
                       class="w-4 h-4 accent-violet-500"
                       {% if config.get('sources', {}).get('dataforseo', {}).get('enabled', False) %}checked{% endif %}>
                <span class="text-sm text-slate-300">Enabled</span>
              </label>
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">API Key (base64 login:password)</label>
              <input type="password" name="dataforseo_api_key"
                     value=""
                     placeholder="{% if secret_set and secret_set.get('sources.dataforseo.api_key') %}(set — type to replace){% else %}(not set){% endif %}"
                     autocomplete="off"
                     class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none font-mono">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Max Age (days)</label>
              <input type="number" name="dataforseo_max_age_days" min="1" max="30"
                     value="{{ config.get('sources', {}).get('dataforseo', {}).get('max_age_days', 7) }}"
                     class="w-32 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
            </div>
          </div>
          <div class="grid grid-cols-3 gap-4 mb-3">
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Depth (10-200)</label>
              <input type="number" name="dataforseo_depth" min="10" max="200" step="10"
                     value="{{ config.get('sources', {}).get('dataforseo', {}).get('depth', 200) }}"
                     class="w-32 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
              <p class="text-xs text-slate-600 mt-1">Results per query (each 10 = 1 billing unit)</p>
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Priority</label>
              <select name="dataforseo_priority"
                      class="w-32 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
                <option value="1" {% if config.get('sources', {}).get('dataforseo', {}).get('priority', 1) == 1 %}selected{% endif %}>1 — Normal ($0.0006/10)</option>
                <option value="2" {% if config.get('sources', {}).get('dataforseo', {}).get('priority', 1) == 2 %}selected{% endif %}>2 — High ($0.0012/10)</option>
              </select>
            </div>
          </div>
          <div>
            <label class="block text-xs font-medium text-slate-400 mb-2">Search Queries</label>
            <input type="hidden" name="_dataforseo_queries_present" value="1">
            <div id="dataforseo-queries" class="space-y-2">
              {% for q in config.get('sources', {}).get('dataforseo', {}).get('queries', []) %}
              <div class="flex gap-2 items-center dataforseo-query-row">
                <input type="text" name="dataforseo_query_{{ loop.index0 }}" value="{{ q.get('query', '') }}"
                       placeholder="Query (e.g. Staff Data Scientist)"
                       class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
                <input type="text" name="dataforseo_location_{{ loop.index0 }}" value="{{ q.get('location', '') }}"
                       placeholder="Location (e.g. San Francisco Bay Area)"
                       class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
                <button type="button" onclick="removeDataForSeoRow(this)"
                        class="text-slate-600 hover:text-red-400 transition-colors">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
                </button>
              </div>
              {% endfor %}
            </div>
            <button type="button" onclick="addDataForSeoRow()"
                    class="mt-2 text-xs text-violet-400 hover:text-violet-300 transition-colors">+ Add Query</button>
          </div>
        </div>

        <hr class="border-slate-700">

        <!-- Google CSE -->
        <div>
          <h3 class="text-sm font-semibold text-slate-200 mb-3 flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-blue-400 inline-block"></span>
            Google Programmable Search (CSE)
          </h3>
          <p class="text-xs text-slate-500 mb-3">
            Free 100 queries/day; $5 per 1000 thereafter. Job Cannon caps usage at 95/day
            and runs CSE-backed portal search once daily. Setup:
            (1) create a search engine at
            <a href="https://programmablesearchengine.google.com/" target="_blank" rel="noreferrer"
               class="text-violet-400 hover:text-violet-300">programmablesearchengine.google.com</a>
            ("Search the entire web");
            (2) copy the Search engine ID into "Search Engine ID" below;
            (3) enable the Custom Search API in
            <a href="https://console.cloud.google.com/" target="_blank" rel="noreferrer"
               class="text-violet-400 hover:text-violet-300">Google Cloud Console</a>
            and create an API key (paste into "API Key" below).
            Activates only when DataForSEO is not enabled (DataForSEO has no daily cap, so it's preferred).
          </p>
          <div class="grid grid-cols-3 gap-4">
            <div class="flex items-center gap-3">
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="hidden" name="google_cse_enabled" value="">
                <input type="checkbox" name="google_cse_enabled" value="on"
                       class="w-4 h-4 accent-violet-500"
                       {% if config.get('sources', {}).get('google_cse', {}).get('enabled', False) %}checked{% endif %}>
                <span class="text-sm text-slate-300">Enabled</span>
              </label>
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">API Key</label>
              <input type="password" name="google_cse_api_key"
                     value=""
                     placeholder="{% if secret_set and secret_set.get('sources.google_cse.api_key') %}(set — type to replace){% else %}(not set){% endif %}"
                     autocomplete="off"
                     class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none font-mono">
            </div>
            <div>
              <label class="block text-xs font-medium text-slate-400 mb-1">Search Engine ID (cx)</label>
              <input type="password" name="google_cse_cse_id"
                     value=""
                     placeholder="{% if secret_set and secret_set.get('sources.google_cse.cse_id') %}(set — type to replace){% else %}(not set){% endif %}"
                     autocomplete="off"
                     class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none font-mono">
            </div>
          </div>
        </div>
        </details>
      </div>
    </div>

    <!-- Scoring section -->
    <div class="bg-slate-800 rounded-lg overflow-hidden">
      <button type="button" onclick="toggleSection(this)"
              class="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-slate-750 transition-colors">
        <div class="flex items-center gap-3">
          <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
          </svg>
          <span class="font-semibold text-slate-100">Scoring</span>
        </div>
        <svg class="section-chevron w-4 h-4 text-slate-400 transition-transform duration-200 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>
      <div class="section-body border-t border-slate-700 p-6 space-y-4">
        {% set weights = config.get('scoring', {}).get('weights', {}) %}
        {% set weight_total = (weights.get('title_match', 0) + weights.get('seniority_alignment', 0) +
                               weights.get('location_fit', 0) + weights.get('salary_range', 0) +
                               weights.get('industry_relevance', 0) + weights.get('company_signals', 0) +
                               weights.get('recency', 0)) %}

        <div class="flex items-center gap-3 mb-2">
          <span class="text-sm text-slate-300 font-medium">Scoring Weights</span>
          <span class="text-xs px-2 py-0.5 rounded-full {% if (weight_total - 1.0)|abs < 0.001 %}bg-green-900/60 text-green-300 border border-green-700/50{% else %}bg-amber-900/60 text-amber-300 border border-amber-700/50{% endif %}"
                id="weights-sum-badge">
            Sum: {{ "%.2f"|format(weight_total) }}{% if (weight_total - 1.0)|abs >= 0.001 %} ⚠ must equal 1.0{% endif %}
          </span>
        </div>

        <div class="grid grid-cols-2 gap-3">
          {% set weight_fields = [
            ('title_match', 'Title Match'),
            ('seniority_alignment', 'Seniority Alignment'),
            ('location_fit', 'Location Fit'),
            ('salary_range', 'Salary Range'),
            ('industry_relevance', 'Industry Relevance'),
            ('company_signals', 'Company Signals'),
            ('recency', 'Recency'),
          ] %}
          {% for key, label in weight_fields %}
          <div class="flex items-center gap-3">
            <label class="text-sm text-slate-300 w-48 flex-shrink-0">{{ label }}</label>
            <input type="number" name="weight_{{ key }}" step="0.01" min="0" max="1"
                   value="{{ weights.get(key, 0.0) }}"
                   oninput="updateWeightsSum()"
                   class="w-24 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none text-right font-mono">
          </div>
          {% endfor %}
        </div>

        <div class="flex items-center gap-3 pt-2 border-t border-slate-700 mt-2">
          <label class="text-sm text-slate-300 w-48">Minimum Score Threshold</label>
          <input type="number" name="min_score_threshold" min="0" max="100"
                 value="{{ config.get('scoring', {}).get('min_score_threshold', DEFAULT_MIN_SCORE_THRESHOLD) }}"
                 class="w-24 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none text-right font-mono">
          <span class="text-xs text-slate-500">Jobs below this score are hidden</span>
        </div>
      </div>
    </div>

    <!-- Cost & Budget section -->
    <div class="bg-slate-800 rounded-lg overflow-hidden">
      <button type="button" onclick="toggleSection(this)"
              class="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-slate-750 transition-colors">
        <div class="flex items-center gap-3">
          <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <span class="font-semibold text-slate-100">Cost & Budget</span>
        </div>
        <svg class="section-chevron w-4 h-4 text-slate-400 transition-transform duration-200 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>
      <div class="section-body border-t border-slate-700 p-6 space-y-4">
        <p class="text-xs text-slate-500">Control API spending. Mid/High-tier calls are paused when daily spend reaches the cap. Low-tier is always allowed.</p>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">Daily Budget Cap (USD)</label>
            <input type="number" name="daily_budget_usd" step="1" min="0"
                   value="{{ config.get('scoring', {}).get('daily_budget_usd', DEFAULT_DAILY_BUDGET_USD) }}"
                   class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
            <p class="text-xs text-slate-600 mt-1">Default: ${{ DEFAULT_DAILY_BUDGET_USD|int }}/day</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">Candidate Score Threshold</label>
            <input type="number" name="candidate_score_threshold" min="0" max="100"
                   value="{{ config.get('scoring', {}).get('candidate_score_threshold', DEFAULT_CANDIDATE_SCORE_THRESHOLD) }}"
                   class="w-full bg-slate-900 border border-slate-700 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
            <p class="text-xs text-slate-600 mt-1">Jobs with a candidate_score below this (from initial ingestion) are skipped for full AI scoring.</p>
          </div>

        </div>

      </div>
    </div>

    <!-- ATS Scanning section -->
    <div class="bg-slate-800 rounded-lg overflow-hidden">
      <button type="button" onclick="toggleSection(this)"
              class="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-slate-750 transition-colors">
        <div class="flex items-center gap-3">
          <svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
          </svg>
          <span class="font-semibold text-slate-100">ATS Scanning</span>
        </div>
        <svg class="section-chevron w-4 h-4 text-slate-400 transition-transform duration-200 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>
      <div class="section-body border-t border-slate-700 p-6 space-y-4">
        <p class="text-xs text-slate-500">
          ATS scanning queries 12 public ATS APIs for new job postings at tracked companies:
          Lever, Greenhouse, Ashby, Workday, SmartRecruiters, Recruitee, Breezy, JazzHR,
          Pinpoint, Personio, BambooHR, and Teamtailor.
          No AI API calls are used during discovery — only keyword matching against your target titles.
        </p>

        {% set ats_cfg = config.get('ats', {}) %}

        <div class="flex items-start gap-3">
          <label class="flex items-center gap-2 cursor-pointer mt-0.5">
            <input type="hidden" name="ats_scan_enabled" value="">
            <input type="checkbox" name="ats_scan_enabled" value="on"
                   class="w-4 h-4 accent-violet-500"
                   {% if ats_cfg.get('scan_enabled', True) %}checked{% endif %}>
            <span class="text-sm font-medium text-slate-200">Enable ATS Scanning</span>
          </label>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">Scan Days</label>
            <input type="text" name="ats_scan_days"
                   value="{{ ats_cfg.get('scan_days', 'mon,wed') }}"
                   placeholder="mon,wed"
                   class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none font-mono">
            <p class="text-xs text-slate-600 mt-1">Comma-separated: mon,tue,wed,thu,fri,sat,sun</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">Scan Hour (24h)</label>
            <input type="number" name="ats_scan_hour" min="0" max="23"
                   value="{{ ats_cfg.get('scan_hour', 7) }}"
                   class="w-full bg-slate-900 border border-slate-600 rounded px-3 py-2 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
            <p class="text-xs text-slate-600 mt-1">Hour to run scan (default: 7 AM)</p>
          </div>
        </div>

        <div class="bg-slate-900/50 rounded px-3 py-2 text-xs text-slate-400">
          Current schedule: Scans run on
          <span class="text-slate-200 font-medium">{{ ats_cfg.get('scan_days', 'mon,wed') | upper }}</span>
          at <span class="text-slate-200 font-medium">{{ ats_cfg.get('scan_hour', 7) }}:00</span>.
          Slug probing runs 30 minutes after the scan to pick up newly-added companies.
        </div>
      </div>
    </div>

    <!-- Database section -->
    <div class="bg-slate-800 rounded-lg overflow-hidden">
      <button type="button" onclick="toggleSection(this)"
              class="w-full flex items-center justify-between px-6 py-4 text-left hover:bg-slate-750 transition-colors">
        <div class="flex items-center gap-3">
          <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
          </svg>
          <span class="font-semibold text-slate-100">Database</span>
        </div>
        <svg class="section-chevron w-4 h-4 text-slate-400 transition-transform duration-200 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>
      <div class="section-body border-t border-slate-700 p-6">
        <div>
          <label class="block text-sm font-medium text-slate-300 mb-1">Database Path</label>
          <div class="flex items-center gap-3">
            <input type="text" name="db_path" readonly
                   value="{{ config.get('db', {}).get('path', 'jobs.db') }}"
                   class="flex-1 bg-slate-950 border border-slate-700 rounded px-3 py-2 text-sm text-slate-400 font-mono cursor-not-allowed">
            <span class="text-xs text-slate-500">Read-only — change via config.yaml directly</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Save button -->
    <div class="flex items-center justify-between pb-8">
      <p class="text-slate-500 text-sm">Changes are written to config.yaml and take effect immediately.</p>
      <button type="submit"
              class="flex items-center gap-2 px-6 py-3 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
        </svg>
        Save Settings
      </button>
    </div>

  </form>
</div>

<script>
// ---------------------------------------------------------------------------
// Collapsible sections
// ---------------------------------------------------------------------------
function toggleSection(btn) {
  const body = btn.nextElementSibling;
  const chevron = btn.querySelector('.section-chevron');
  const isExpanded = !body.classList.contains('hidden');
  body.classList.toggle('hidden', isExpanded);
  if (chevron) {
    chevron.style.transform = isExpanded ? '' : 'rotate(180deg)';
  }
}

// ---------------------------------------------------------------------------
// Scoring weights live sum
// ---------------------------------------------------------------------------
function updateWeightsSum() {
  const inputs = document.querySelectorAll('input[name^="weight_"]');
  let total = 0;
  inputs.forEach(function(inp) { total += parseFloat(inp.value) || 0; });
  const badge = document.getElementById('weights-sum-badge');
  if (!badge) return;
  const formatted = total.toFixed(2);
  const ok = Math.abs(total - 1.0) < 0.001;
  badge.textContent = 'Sum: ' + formatted + (ok ? '' : ' ⚠ must equal 1.0');
  badge.className = 'text-xs px-2 py-0.5 rounded-full ' +
    (ok ? 'bg-green-900/60 text-green-300 border border-green-700/50'
        : 'bg-amber-900/60 text-amber-300 border border-amber-700/50');
}

// ---------------------------------------------------------------------------
// SerpAPI dynamic query rows
// ---------------------------------------------------------------------------
function addSerpApiRow() {
  const container = document.getElementById('serpapi-queries');
  const idx = container.querySelectorAll('.serpapi-query-row').length;
  const row = document.createElement('div');
  row.className = 'flex gap-2 items-center serpapi-query-row';
  row.innerHTML = `
    <input type="text" name="serpapi_query_${idx}" placeholder="Query (e.g. Staff Data Scientist)"
           class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
    <input type="text" name="serpapi_location_${idx}" placeholder="Location (e.g. San Francisco Bay Area)"
           class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
    <button type="button" onclick="removeSerpApiRow(this)"
            class="text-slate-600 hover:text-red-400 transition-colors">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  `;
  container.appendChild(row);
}

function removeSerpApiRow(btn) {
  btn.closest('.serpapi-query-row').remove();
  // Re-index remaining rows so names stay sequential
  const container = document.getElementById('serpapi-queries');
  container.querySelectorAll('.serpapi-query-row').forEach(function(row, i) {
    const inputs = row.querySelectorAll('input[type="text"]');
    if (inputs[0]) inputs[0].name = 'serpapi_query_' + i;
    if (inputs[1]) inputs[1].name = 'serpapi_location_' + i;
  });
}

// ---------------------------------------------------------------------------
// Thordata dynamic query rows
// ---------------------------------------------------------------------------
function addThordataRow() {
  const container = document.getElementById('thordata-queries');
  const idx = container.querySelectorAll('.thordata-query-row').length;
  const row = document.createElement('div');
  row.className = 'flex gap-2 items-center thordata-query-row';
  row.innerHTML = `
    <input type="text" name="thordata_query_${idx}" placeholder="Query (e.g. Staff Data Scientist)"
           class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
    <input type="text" name="thordata_location_${idx}" placeholder="Location (e.g. San Francisco Bay Area)"
           class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
    <button type="button" onclick="removeThordataRow(this)"
            class="text-slate-600 hover:text-red-400 transition-colors">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  `;
  container.appendChild(row);
}

function removeThordataRow(btn) {
  btn.closest('.thordata-query-row').remove();
  // Re-index remaining rows so names stay sequential
  const container = document.getElementById('thordata-queries');
  container.querySelectorAll('.thordata-query-row').forEach(function(row, i) {
    const inputs = row.querySelectorAll('input[type="text"]');
    if (inputs[0]) inputs[0].name = 'thordata_query_' + i;
    if (inputs[1]) inputs[1].name = 'thordata_location_' + i;
  });
}

// DataForSEO dynamic query rows (Stage 6)
function addDataForSeoRow() {
  const container = document.getElementById('dataforseo-queries');
  const idx = container.querySelectorAll('.dataforseo-query-row').length;
  const row = document.createElement('div');
  row.className = 'flex gap-2 items-center dataforseo-query-row';
  row.innerHTML = `
    <input type="text" name="dataforseo_query_${idx}" placeholder="Query (e.g. Staff Data Scientist)"
           class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
    <input type="text" name="dataforseo_location_${idx}" placeholder="Location (e.g. San Francisco Bay Area)"
           class="flex-1 bg-slate-900 border border-slate-600 rounded px-3 py-1.5 text-sm text-slate-100 focus:border-violet-500 focus:outline-none">
    <button type="button" onclick="removeDataForSeoRow(this)"
            class="text-slate-600 hover:text-red-400 transition-colors">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>
  `;
  container.appendChild(row);
}

function removeDataForSeoRow(btn) {
  btn.closest('.dataforseo-query-row').remove();
  const container = document.getElementById('dataforseo-queries');
  container.querySelectorAll('.dataforseo-query-row').forEach(function(row, i) {
    const inputs = row.querySelectorAll('input[type="text"]');
    if (inputs[0]) inputs[0].name = 'dataforseo_query_' + i;
    if (inputs[1]) inputs[1].name = 'dataforseo_location_' + i;
  });
}
</script>
{% endblock %}