{% extends "base.html" %}
{% block title %}Settings{% endblock %}
{% block content %}
<div id="settings-page" class="p-6">
  <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-6">Settings</h2>

  {# Historical Thread Indexing Section #}
  <div id="settings-sync" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">history</span>
      Historical Thread Indexing
    </h3>

    <p class="text-sm text-gray-600 dark:text-gray-400 mb-5">
      Index historical threads from the Addons Marketplace to ensure all messages are synchronized,
      even from older threads with recent activity.
    </p>

    {# ── Live Status Banner (shown when running) ── #}
    {% set fetched = last_sync.total_threads_fetched if last_sync and last_sync.total_threads_fetched else 0 %}
    {% set target = last_sync.session_target if last_sync and last_sync.session_target else 0 %}
    {% set new_count = last_sync.new_threads_count if last_sync and last_sync.new_threads_count else 0 %}
    {% set upd_count = last_sync.updated_threads_count if last_sync and last_sync.updated_threads_count else 0 %}
    {% set pct = ((fetched / target * 100) | int) if target else 0 %}
    <div id="running-banner" class="mb-4 rounded-lg p-4 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 {% if not last_sync or last_sync.status != 'running' %}hidden{% endif %}">
      <div class="flex items-center gap-3 mb-2">
        <div class="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin flex-shrink-0"></div>
        <div class="flex-1">
          <p class="text-sm font-semibold text-blue-800 dark:text-blue-400">Sync in progress...</p>
          <p class="text-xs text-blue-600 dark:text-blue-400 mt-0.5">
            <span id="live-fetched">{{ fetched }}</span> of <span id="live-target">{{ target }}</span> fetched
            &middot; <span id="live-new" class="text-green-700 dark:text-green-400">{{ new_count }} new</span>
            &middot; <span id="live-updated">{{ upd_count }} updated</span>
          </p>
        </div>
        <span id="live-pct" class="text-sm font-bold text-blue-700 dark:text-blue-400">{% if target %}{{ pct }}%{% endif %}</span>
      </div>
      {# Progress bar #}
      <div class="w-full bg-blue-200 dark:bg-blue-500/10 rounded-full h-2 overflow-hidden">
        <div id="progress-bar" class="bg-blue-600 h-2 rounded-full transition-all duration-500 ease-out" style="width: {{ pct }}%"></div>
      </div>
    </div>

    {# ── Stats grid ── #}
    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-5">
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
        <div>
          <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Status</p>
          <p class="text-sm font-semibold" id="sync-status-text">
            {% if last_sync and last_sync.status %}
              {% if last_sync.status == 'running' %}
                <span class="text-blue-600 dark:text-blue-400">Running</span>
              {% elif last_sync.status == 'completed' %}
                <span class="text-green-600 dark:text-green-400">Completed</span>
              {% elif last_sync.status == 'failed' %}
                <span class="text-red-600 dark:text-red-400">Failed</span>
              {% elif last_sync.status == 'paused' %}
                <span class="text-orange-600 dark:text-orange-400">Paused</span>
              {% else %}
                <span class="text-gray-600 dark:text-gray-400">{{ last_sync.status }}</span>
              {% endif %}
            {% else %}
              <span class="text-gray-400 dark:text-gray-500">Not Started</span>
            {% endif %}
          </p>
          {# Timestamp below the status word — distinguishes a stale historical result from a live one #}
          <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5" id="sync-status-time">
            {% if last_sync and last_sync.completed_at %}
              {{ last_sync.completed_at.strftime('%b %d, %H:%M') }}
            {% elif last_sync and last_sync.started_at and last_sync.status == 'running' %}
              In progress...
            {% elif last_sync and last_sync.started_at %}
              Started {{ last_sync.started_at.strftime('%b %d, %H:%M') }}
            {% endif %}
          </p>
        </div>

        <div>
          <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Fetched</p>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
            <span id="threads-indexed">{{ fetched }}</span>
            {% if target %}<span class="text-gray-400 dark:text-gray-500 font-normal"> / {{ target }}</span>{% endif %}
          </p>
        </div>

        <div>
          <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">New threads</p>
          <p class="text-sm font-semibold text-green-700 dark:text-green-400" id="stat-new">{{ new_count }}</p>
        </div>

        <div>
          <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Updated</p>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100" id="stat-updated">{{ upd_count }}</p>
        </div>

        <div>
          <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Total in DB</p>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100" id="threads-in-db">
            {{ last_sync.threads_in_db if last_sync else 0 }}
          </p>
        </div>

        <div>
          <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Total Available</p>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100" id="total-available">
            {% if last_sync and last_sync.total_threads_available %}
              {{ last_sync.total_threads_available }}
            {% else %}
              <span class="text-gray-400 dark:text-gray-500">-</span>
            {% endif %}
          </p>
        </div>
      </div>
    </div>

    {# ── "Fully Synced" banner ── #}
    {# Shown when DB coverage equals total available threads and the last sync completed #}
    {% set db_count = last_sync.threads_in_db if last_sync else 0 %}
    {% set avail_count = last_sync.total_threads_available if last_sync and last_sync.total_threads_available else 0 %}
    {% set is_fully_synced = (avail_count > 0 and db_count >= avail_count and last_sync and last_sync.status == 'completed') %}
    <div id="fully-synced-banner"
         class="{% if not is_fully_synced %}hidden{% endif %} mb-4 rounded-lg p-3 bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/30 flex items-center gap-2">
      <span class="material-symbols-outlined text-green-600 dark:text-green-400 text-base">check_circle</span>
      <p class="text-sm font-medium text-green-800 dark:text-green-400">All threads are synced — your database is up to date.</p>
    </div>

    {# Error message (hidden by JS when a new sync starts) #}
    <div id="sync-error-box" class="{% if not last_sync or not last_sync.error_message %}hidden{% endif %} bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30 rounded-lg p-3 mb-4">
      <p class="text-xs font-semibold text-red-800 dark:text-red-400 mb-1">The last sync stopped with an error:</p>
      <p class="text-sm text-red-600 dark:text-red-400 font-mono" id="sync-error-text">{{ last_sync.error_message if last_sync and last_sync.error_message else '' }}</p>
    </div>

    {# ── Control buttons ── #}
    <div class="flex items-center gap-3 flex-wrap">
      <button id="start-btn"
              onclick="startSync()"
              class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              {% if last_sync and last_sync.status == 'running' %}disabled{% endif %}>
        <span class="material-symbols-outlined text-base">play_arrow</span>
        Start Historical Sync
      </button>

      <button id="pause-btn"
              onclick="pauseSync()"
              class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-orange-600 rounded-lg hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors {% if not last_sync or last_sync.status != 'running' %}hidden{% endif %}"
              {% if not last_sync or last_sync.status != 'running' %}disabled{% endif %}>
        <span class="material-symbols-outlined text-base">pause</span>
        Pause
      </button>

      <button id="resume-btn"
              onclick="resumeSync()"
              class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors {% if not last_sync or last_sync.status != 'paused' %}hidden{% endif %}">
        <span class="material-symbols-outlined text-base">play_arrow</span>
        Resume Sync
      </button>
    </div>

    <div class="mt-4">
      <details class="text-sm text-gray-600 dark:text-gray-400">
        <summary class="cursor-pointer hover:text-gray-900 dark:hover:text-gray-100 font-medium">Advanced Options</summary>
        <div class="mt-3 space-y-3 pl-2">
          <div class="flex items-center gap-4">
            <div>
              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Start from page</label>
              <input type="number" id="adv-start-page" value="1" min="1"
                     class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 w-24 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
            </div>
            <div>
              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Max pages</label>
              <input type="number" id="adv-max-pages" value="10" min="1" max="100"
                     class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 w-24 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
              <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">100 threads/page</p>
            </div>
          </div>
          <button onclick="startSync(true)"
                  class="inline-flex items-center gap-2 px-4 py-1.5 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
            Start Custom Sync
          </button>
        </div>
      </details>
    </div>
  </div>

  {# Auto-Close Settings Section #}
  <div id="settings-auto-close" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">timer_off</span>
      Auto-Close Settings
    </h3>

    <p class="text-sm text-gray-600 dark:text-gray-400 mb-5">
      Automatically close stale tickets that have had no activity for a configurable number of days.
      Unread inbound tickets use double the threshold before being closed.
    </p>

    <form method="POST" action="{{ url_for('settings_auto_close') }}" class="space-y-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div class="flex items-center gap-3">
        <label for="auto-close-toggle" class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" id="auto-close-toggle" name="auto_close_enabled" value="true"
                 class="sr-only peer"
                 {% if auto_close and auto_close.auto_close_enabled == 'true' %}checked{% endif %}>
          <div class="w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-brand-300
                      rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white
                      after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white
                      after:border-gray-300 dark:after:border-gray-600 after:border after:rounded-full after:h-5 after:w-5
                      after:transition-all peer-checked:bg-brand-600"></div>
        </label>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Enable auto-close</span>
      </div>

      <div class="flex items-center gap-3">
        <label for="auto-close-days" class="text-sm font-medium text-gray-700 dark:text-gray-300">Close tickets after</label>
        <input type="number" id="auto-close-days" name="auto_close_days"
               value="{{ auto_close.auto_close_days if auto_close and auto_close.auto_close_days else '30' }}"
               min="1" max="365"
               class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 w-20 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
        <span class="text-sm text-gray-500 dark:text-gray-400">days of inactivity</span>
      </div>

      <p class="text-xs text-gray-400 dark:text-gray-500">
        Tickets with an outbound last message or a read inbound last message are closed after X days.
        Unread inbound tickets are closed after 2X days.
      </p>

      <button type="submit"
              class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
        <span class="material-symbols-outlined text-base">save</span>
        Save Settings
      </button>
    </form>
  </div>

</div>

  {# Language Preferences Section #}
  <div id="settings-language" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">translate</span>
      Language Preferences
    </h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-5">
      Configure which languages are used for translating messages and replies.
      The preferred language is used as the default translation target.
    </p>

    <div class="space-y-4">
      <div>
        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">Known Languages</label>
        <div id="lang-chips" class="flex flex-wrap gap-1.5 mb-2 min-h-[28px]"></div>
        <div class="flex items-center gap-2">
          <input type="text" id="lang-add-input" list="lang-datalist"
                 placeholder="Add language code (e.g. fr, de)..."
                 class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 w-56 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
          <datalist id="lang-datalist">
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="ca">Catalan</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <option value="it">Italian</option>
            <option value="pt">Portuguese</option>
            <option value="nl">Dutch</option>
            <option value="pl">Polish</option>
            <option value="ru">Russian</option>
          </datalist>
          <button type="button" onclick="addLanguageChip()"
                  class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
            <span class="material-symbols-outlined text-sm">add</span>
            Add
          </button>
        </div>
        <input type="hidden" id="known-languages-input"
               value="{{ lang_settings.translation_known_languages or 'en,es,ca' }}">
      </div>

      <div>
        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Reply Language</label>
        <select id="preferred-language-select"
                class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
          {# Populated by JS #}
        </select>
        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Used as the default target for message translation.</p>
      </div>

      <button type="button" onclick="saveLanguageSettings()"
              class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
        <span class="material-symbols-outlined text-base">save</span>
        Save Language Settings
      </button>
    </div>
  </div>

  {# Reply Signature Section #}
  <div id="settings-signature" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">signature</span>
      Reply Signature
    </h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-5">
      This signature is automatically appended to every reply in the ticket editor.
      You can edit it per-message before sending.
    </p>

    <div class="space-y-4">
      <div>
        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">Signature Text</label>
        <textarea id="signature-textarea" rows="14"
                  class="w-full border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none resize-y"
                  placeholder="Best regards,&#10;Your Name">{{ reply_signature or '' }}</textarea>
      </div>

      <button type="button" onclick="saveSignature()"
              class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
        <span class="material-symbols-outlined text-base">save</span>
        Save Signature
      </button>
    </div>
  </div>

  {# Documentation Sources Section #}
  <div id="settings-doc-sources" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">travel_explore</span>
      Documentation Sources
    </h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-5">
      Index external documentation URLs so the AI can reference official docs in its replies.
      Add a sitemap.xml URL to index an entire documentation site (up to 200 pages).
    </p>

    {# Add Source Form #}
    <form action="{{ url_for('settings_doc_sources_add') }}" method="POST" class="flex flex-wrap gap-3 mb-6 items-end">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="flex flex-col gap-1">
        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">URL</label>
        <input type="url" name="url" required placeholder="https://docs.example.com/sitemap.xml"
               class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-2 w-80 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
      </div>
      <div class="flex flex-col gap-1">
        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Label</label>
        <input type="text" name="label" placeholder="Module Docs"
               class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-2 w-40 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
      </div>
      <div class="flex flex-col gap-1">
        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Type</label>
        <select name="doc_system"
                class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
          <option value="html">HTML</option>
          <option value="docusaurus">Docusaurus</option>
          <option value="markdown">Markdown</option>
          <option value="blog">Blog</option>
        </select>
      </div>
      <button type="submit"
              class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
        <span class="material-symbols-outlined text-base">add</span>
        Add Source
      </button>
    </form>

    {# Sources Table #}
    {% if doc_sources %}
    <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden mb-4">
      <table class="w-full text-sm" id="doc-sources-table">
        <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
          <tr>
            <th class="text-left px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400">Label / URL</th>
            <th class="text-left px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400">Type</th>
            <th class="text-center px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400">Pages</th>
            <th class="text-left px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400">Last Scraped</th>
            <th class="text-right px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
          {% for src in doc_sources %}
          <tr id="doc-source-row-{{ src.id }}">
            <td class="px-4 py-3">
              <p class="font-medium text-gray-900 dark:text-gray-100">{{ src.label or src.url[:60] }}</p>
              <p class="text-xs text-gray-400 dark:text-gray-500 font-mono">{{ src.url[:80] }}{% if src.url|length > 80 %}…{% endif %}</p>
            </td>
            <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ src.doc_system }}</td>
            <td class="px-4 py-3 text-center">
              <span id="doc-source-pages-{{ src.id }}" class="font-medium text-gray-900 dark:text-gray-100">{{ src.page_count }}</span>
            </td>
            <td class="px-4 py-3 text-xs text-gray-400 dark:text-gray-500">
              <span id="doc-source-scraped-{{ src.id }}">{{ src.last_scraped_at.strftime('%Y-%m-%d %H:%M') if src.last_scraped_at else 'Never' }}</span>
            </td>
            <td class="px-4 py-3 text-right flex justify-end gap-2">
              <button type="button" onclick="scrapeDocSource({{ src.id }}, this)"
                      class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                <span class="material-symbols-outlined text-sm">download</span>
                Scrape
              </button>
              <form action="{{ url_for('settings_doc_sources_delete', source_id=src.id) }}" method="POST"
                    onsubmit="return confirm('Delete this source and all its pages?')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit"
                        class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 bg-white dark:bg-gray-700 border border-red-200 dark:border-red-500/30 rounded-lg hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors">
                  <span class="material-symbols-outlined text-sm">delete</span>
                  Delete
                </button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <button type="button" onclick="scrapeAllDocSources(this)"
            class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
      <span class="material-symbols-outlined text-base">cloud_download</span>
      Scrape All Sources
    </button>
    {% else %}
    <p class="text-sm text-gray-400 dark:text-gray-500">No documentation sources added yet.</p>
    {% endif %}
  </div>

<script>
// If sync was already running when the page loaded, start polling automatically
{% if last_sync and last_sync.status == 'running' %}
startPolling();
{% endif %}
window._preferredLanguageSetting = '{{ lang_settings.translation_preferred_language or "en" }}';
</script>
{% endblock %}