{% extends "base.html" %}
{% from '_upsell.html' import crown_badge, max_badge %}
{% block title %}{{ _("Settings") }}{% endblock %}
{% block content %}
<div id="settings-page" class="p-3 sm: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">
      {% trans %}Index historical threads from the Addons Marketplace to ensure all messages are synchronized,
      even from older threads with recent activity.{% endtrans %}
    </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|localdt('%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 %}
              {% set start_time = last_sync.started_at|localdt('%b %d, %H:%M') %}
              {% trans start_time=start_time %}Started {{ start_time }}{% endtrans %}
            {% 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 class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-1">
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _("Force-sync a specific thread") }}</label>
            <p class="text-xs text-gray-400 dark:text-gray-500 mb-2">{% trans %}Paste an Addons thread ID or full URL (e.g. <code class="font-mono">891159</code> or <code class="font-mono">…?ict=891159</code>){% endtrans %}</p>
            <div class="flex items-center gap-2">
              <input type="text" id="force-sync-thread-id" placeholder="{{ _('Thread ID or Addons URL') }}"
                     class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 flex-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
              <button onclick="syncThreadById()"
                      id="force-sync-btn"
                      class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors whitespace-nowrap">
                <span class="material-symbols-outlined text-base">download</span>
                {{ _("Sync thread") }}
              </button>
            </div>
            <p id="force-sync-result" class="text-xs mt-2 hidden"></p>
          </div>
        </div>
      </details>
    </div>
  </div>

  {# Auto-Close Settings Section #}
  {% if has_feature('auto_close') %}
  <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">
      {% trans %}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.{% endtrans %}
    </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">
        {% trans %}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.{% endtrans %}
      </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>
  {% else %}
  <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 opacity-60">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-2">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">timer_off</span>
      {{ _("Auto-Close Settings") }}{{ crown_badge() }}
    </h3>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      {% trans %}Automatically close stale tickets — available on the <strong>Premium plan</strong> and above.{% endtrans %}
      <button type="button" onclick='showUpgradeModal("premium", {{ _("Auto-Close")|tojson }})'
              class="ml-1 text-brand-600 dark:text-brand-400 underline hover:no-underline text-sm">{{ _("Upgrade to unlock") }}</button>
    </p>
  </div>
  {% endif %}

  {# Auto-Response Settings Section #}
  {% if has_feature('autoresponse_static') %}
  <div id="settings-autoresponse" 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">schedule_send</span>
      {{ _("Auto-Response") }}
    </h3>

    <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
      {{ _("Automatically reply to incoming messages that arrive out of hours or while away mode is on.") }}
    </p>
    <p class="text-xs text-gray-400 dark:text-gray-500 mb-5">
      {{ _("Auto-responses are sent during the next scheduled sync (up to 15 min for Max, 1 hour for Premium).") }}
    </p>

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

      <div class="flex items-center gap-3">
        <label for="autoresponse-toggle" class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" id="autoresponse-toggle" name="autoresponse_enabled" value="true"
                 class="sr-only peer"
                 {% if autoresponse and autoresponse.enabled %}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-response") }}</span>
      </div>

      {# ── Language tab bar ── #}
      <div>
        <div class="flex items-center gap-1 flex-wrap mb-0" id="ar-lang-tabs" role="tablist">
          {# Default tab #}
          <button type="button" role="tab" data-lang="__default__" aria-selected="true"
                  class="ar-tab inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-t-lg border border-b-0 border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-colors"
                  onclick="arSwitchTab(this, '__default__')">
            {{ _("Default") }}
          </button>
          {# Existing translation tabs (server-rendered) #}
          {% for lang, body in (autoresponse.translations or {}).items() %}
          <button type="button" role="tab" data-lang="{{ lang }}" aria-selected="false"
                  class="ar-tab inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-t-lg border border-b-0 border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
                  onclick='arSwitchTab(this, {{ lang | tojson }})'>
            <span class="ar-tab-dot w-1.5 h-1.5 rounded-full bg-brand-500 inline-block" title="{{ _('Has content') }}"></span>
            {{ lang }}
            <button type="button" class="ml-0.5 text-gray-400 hover:text-red-500 dark:hover:text-red-400 leading-none text-base font-bold"
                    onclick='arRemoveLang(event, {{ lang | tojson }})' title="{{ _('Remove %(lang)s', lang=lang) }}">&times;</button>
          </button>
          {% endfor %}
          {# + Add language control #}
          <div class="relative inline-block" id="ar-add-lang-container">
            <button type="button" id="ar-add-lang-btn"
                    class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 border border-dashed border-gray-300 dark:border-gray-600 rounded-lg hover:border-brand-400 dark:hover:border-brand-500 transition-colors"
                    onclick="arToggleAddLang(event)">
              <span class="material-symbols-outlined text-sm">add</span>
              {{ _("Add language") }}
            </button>
            <div id="ar-add-lang-popover"
                 class="hidden absolute left-0 top-full mt-1 z-20 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-3 min-w-[200px]">
              <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wide">{{ _("Add language") }}</p>
              <div class="flex flex-wrap gap-1.5 mb-2">
                {% for code, label in [('es', _('Spanish')), ('fr', _('French')), ('it', _('Italian')), ('de', _('German')), ('pt', _('Portuguese')), ('nl', _('Dutch')), ('pl', _('Polish'))] %}
                <button type="button"
                        class="ar-quick-lang px-2 py-1 text-xs rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-brand-100 dark:hover:bg-brand-900/40 hover:text-brand-700 dark:hover:text-brand-300 transition-colors"
                        onclick='arAddLang({{ code | tojson }})'>{{ code }} — {{ label }}</button>
                {% endfor %}
              </div>
              <div class="flex gap-1.5 items-center border-t border-gray-100 dark:border-gray-700 pt-2 mt-1">
                <input type="text" id="ar-custom-lang-input" maxlength="10" placeholder="{{ _('ISO code, e.g. ru') }}"
                       class="flex-1 text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
                <button type="button" onclick="arAddCustomLang()"
                        class="px-2 py-1 text-xs font-medium text-white bg-brand-600 rounded hover:bg-brand-700 transition-colors">{{ _("Add") }}</button>
              </div>
            </div>
          </div>
        </div>
        {# Tab border bottom line #}
        <div class="border-b border-gray-200 dark:border-gray-600 -mt-px mb-3"></div>

        {# Caption #}
        <p class="text-xs text-gray-400 dark:text-gray-500 mb-3">
          {{ _("Customers get the message matching their ticket's language; Default otherwise.") }}
        </p>

        {# Default textarea #}
        <div id="ar-pane-__default__" class="ar-pane">
          <textarea id="autoresponse-body" name="autoresponse_body" rows="5"
                    class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-2 w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none"
                    placeholder="{{ _("Thanks for your message — we're currently out of hours and will get back to you soon.") }}">{{ autoresponse.body_html if autoresponse else '' }}</textarea>
          <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{ _("Sent as plain text.") }}</p>
        </div>

        {# Language-variant textareas (server-rendered for existing translations) #}
        {% for lang, body in (autoresponse.translations or {}).items() %}
        <div id="ar-pane-{{ lang }}" class="ar-pane hidden">
          <textarea name="autoresponse_body_{{ lang }}" rows="5"
                    class="ar-lang-textarea border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-2 w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none"
                    data-lang="{{ lang }}"
                    placeholder="{{ _('Auto-response in %(lang)s…', lang=lang) }}">{{ body }}</textarea>
          <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{ _("Leave empty to remove this translation on save.") }}</p>
        </div>
        {% endfor %}

        {# AI translate button #}
        <div id="ar-translate-container" class="mt-3 {% if not (autoresponse.translations or {}) %}{% endif %}">
          <button type="button" id="ar-translate-btn"
                  class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-brand-700 dark:text-brand-300 bg-brand-50 dark:bg-brand-900/30 border border-brand-200 dark:border-brand-700 rounded-lg hover:bg-brand-100 dark:hover:bg-brand-900/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                  onclick="arTranslateEmpty()">
            <span id="ar-translate-spinner" class="hidden w-4 h-4 border-2 border-brand-500 border-t-transparent rounded-full animate-spin"></span>
            <span>✨ {{ _("Translate empty languages with AI") }}</span>
          </button>
          <span id="ar-translate-error" class="ml-2 text-xs text-red-600 dark:text-red-400 hidden"></span>
        </div>
      </div>

      <div class="flex items-center gap-3">
        <label for="away-mode-toggle" class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" id="away-mode-toggle" name="away_mode_enabled" value="true"
                 class="sr-only peer"
                 {% if autoresponse and autoresponse.away_mode_enabled %}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">{{ _("Away mode (always auto-respond)") }}</span>
      </div>

      <div class="flex items-center gap-3">
        <label for="away-until-date" class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ _("Away until (optional)") }}</label>
        <input type="date" id="away-until-date" name="away_until_date"
               value="{{ autoresponse.away_until_date if autoresponse else '' }}"
               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">
      </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">save</span>
        {{ _("Save Settings") }}
      </button>
    </form>

    <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
      <a href="{{ url_for('settings_schedules') }}"
         class="inline-flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors">
        {{ _("Team working-hours schedules") }}{{ max_badge() }}
      </a>
    </div>
  </div>

  <script>
  /* ── Auto-response language tabs ──────────────────────────────────── */
  (function () {
    // Track active lang
    var _arActiveLang = '__default__';
    // Track all langs (populated on load)
    var _arLangs = [];
    // Translated strings/templates (populated server-side)
    var T_REMOVE_LANG_TITLE = {{ _("Remove {lang}") | tojson }};
    var T_REMOVE_LANG_CONFIRM = {{ _("Remove the \"{lang}\" translation? It will be deleted on save.") | tojson }};
    var T_AUTORESPONSE_PLACEHOLDER = {{ _("Auto-response in {lang}…") | tojson }};
    var T_LEAVE_EMPTY_HINT = {{ _("Leave empty to remove this translation on save.") | tojson }};
    var T_FILL_DEFAULT_FIRST = {{ _("Fill in the Default message first.") | tojson }};
    var T_TRANSLATION_FAILED = {{ _("Translation failed.") | tojson }};
    var T_NETWORK_ERROR = {{ _("Network error. Please try again.") | tojson }};

    // Build initial lang list from existing tabs
    document.querySelectorAll('.ar-tab[data-lang]').forEach(function (tab) {
      var l = tab.getAttribute('data-lang');
      if (l && l !== '__default__') _arLangs.push(l);
    });

    window.arSwitchTab = function (btn, lang) {
      // Deactivate all tabs
      document.querySelectorAll('.ar-tab').forEach(function (t) {
        t.setAttribute('aria-selected', 'false');
        t.classList.remove('bg-white', 'dark:bg-gray-700', 'text-gray-900', 'dark:text-gray-100');
        t.classList.add('bg-gray-50', 'dark:bg-gray-800', 'text-gray-600', 'dark:text-gray-400');
      });
      // Hide all panes
      document.querySelectorAll('.ar-pane').forEach(function (p) { p.classList.add('hidden'); });
      // Activate selected tab
      btn.setAttribute('aria-selected', 'true');
      btn.classList.remove('bg-gray-50', 'dark:bg-gray-800', 'text-gray-600', 'dark:text-gray-400');
      btn.classList.add('bg-white', 'dark:bg-gray-700', 'text-gray-900', 'dark:text-gray-100');
      // Show pane
      var pane = document.getElementById('ar-pane-' + lang);
      if (pane) pane.classList.remove('hidden');
      _arActiveLang = lang;
      arUpdateTranslateBtn();
    };

    window.arAddLang = function (lang) {
      lang = lang.trim().toLowerCase();
      if (!lang) return;
      // Already exists?
      if (document.getElementById('ar-pane-' + lang)) {
        arCloseAddLang();
        arSwitchTab(document.querySelector('[data-lang="' + lang + '"]'), lang);
        return;
      }
      _arLangs.push(lang);
      // Create tab
      var tabBar = document.getElementById('ar-lang-tabs');
      var addContainer = document.getElementById('ar-add-lang-container');
      var tab = document.createElement('button');
      tab.type = 'button';
      tab.role = 'tab';
      tab.setAttribute('data-lang', lang);
      tab.setAttribute('aria-selected', 'false');
      tab.className = 'ar-tab inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-t-lg border border-b-0 border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors';
      tab.setAttribute('onclick', 'arSwitchTab(this, \'' + lang + '\')');
      tab.innerHTML =
        '<span class="material-symbols-outlined text-sm text-gray-300 dark:text-gray-600 ar-tab-empty-dot">circle</span>' +
        lang +
        ' <button type="button" class="ml-0.5 text-gray-400 hover:text-red-500 dark:hover:text-red-400 leading-none text-base font-bold" onclick="arRemoveLang(event,\'' + lang + '\')" title="' + T_REMOVE_LANG_TITLE.replace('{lang}', lang) + '">&times;</button>';
      tabBar.insertBefore(tab, addContainer);
      // Create pane
      var pane = document.createElement('div');
      pane.id = 'ar-pane-' + lang;
      pane.className = 'ar-pane hidden';
      pane.innerHTML =
        '<textarea name="autoresponse_body_' + lang + '" rows="5"' +
        ' class="ar-lang-textarea border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-2 w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none"' +
        ' data-lang="' + lang + '"' +
        ' placeholder="' + T_AUTORESPONSE_PLACEHOLDER.replace('{lang}', lang) + '"></textarea>' +
        '<p class="text-xs text-gray-400 dark:text-gray-500 mt-1">' + T_LEAVE_EMPTY_HINT + '</p>';
      document.getElementById('ar-translate-container').insertAdjacentElement('beforebegin', pane);
      arCloseAddLang();
      arSwitchTab(tab, lang);
      arUpdateTranslateBtn();
    };

    window.arAddCustomLang = function () {
      var input = document.getElementById('ar-custom-lang-input');
      var val = (input.value || '').trim().toLowerCase();
      if (!val) { input.focus(); return; }
      arAddLang(val);
      input.value = '';
    };

    window.arRemoveLang = function (evt, lang) {
      evt.stopPropagation();
      var ta = document.querySelector('#ar-pane-' + lang + ' textarea');
      var hasContent = ta && ta.value.trim().length > 0;
      if (hasContent && !confirm(T_REMOVE_LANG_CONFIRM.replace('{lang}', lang))) return;
      // Clear textarea (empty = delete on save)
      if (ta) ta.value = '';
      // Remove tab
      var tab = document.querySelector('[data-lang="' + lang + '"]');
      if (tab) tab.remove();
      // Remove pane
      var pane = document.getElementById('ar-pane-' + lang);
      if (pane) pane.remove();
      _arLangs = _arLangs.filter(function (l) { return l !== lang; });
      // Switch back to default
      arSwitchTab(document.querySelector('[data-lang="__default__"]'), '__default__');
      arUpdateTranslateBtn();
    };

    window.arToggleAddLang = function (evt) {
      evt.stopPropagation();
      var pop = document.getElementById('ar-add-lang-popover');
      pop.classList.toggle('hidden');
    };

    window.arCloseAddLang = function () {
      document.getElementById('ar-add-lang-popover').classList.add('hidden');
    };

    // Close popover on outside click
    document.addEventListener('click', function (e) {
      if (!document.getElementById('ar-add-lang-container').contains(e.target)) {
        arCloseAddLang();
      }
    });

    // Update dot indicator when textarea gets content
    document.addEventListener('input', function (e) {
      if (!e.target.classList.contains('ar-lang-textarea')) return;
      var lang = e.target.getAttribute('data-lang');
      if (!lang) return;
      var tab = document.querySelector('.ar-tab[data-lang="' + lang + '"]');
      if (!tab) return;
      var hasCnt = e.target.value.trim().length > 0;
      var dotEl = tab.querySelector('.ar-tab-dot, .ar-tab-empty-dot');
      if (dotEl) {
        if (hasCnt) {
          dotEl.className = 'ar-tab-dot w-1.5 h-1.5 rounded-full bg-brand-500 inline-block';
          dotEl.textContent = '';
          dotEl.title = 'Has content';
        } else {
          dotEl.className = 'material-symbols-outlined text-sm text-gray-300 dark:text-gray-600 ar-tab-empty-dot';
          dotEl.textContent = 'circle';
          dotEl.title = '';
        }
      }
      arUpdateTranslateBtn();
    });

    function arUpdateTranslateBtn() {
      var emptyLangs = arGetEmptyLangs();
      var btn = document.getElementById('ar-translate-btn');
      if (!btn) return;
      if (emptyLangs.length === 0 || _arLangs.length === 0) {
        btn.closest('#ar-translate-container').classList.add('hidden');
      } else {
        btn.closest('#ar-translate-container').classList.remove('hidden');
      }
    }

    function arGetEmptyLangs() {
      var empty = [];
      document.querySelectorAll('.ar-lang-textarea').forEach(function (ta) {
        if (!ta.value.trim()) empty.push(ta.getAttribute('data-lang'));
      });
      return empty;
    }

    window.arTranslateEmpty = function () {
      var defaultBody = document.getElementById('autoresponse-body');
      if (!defaultBody || !defaultBody.value.trim()) {
        alert(T_FILL_DEFAULT_FIRST);
        return;
      }
      var emptyLangs = arGetEmptyLangs();
      if (emptyLangs.length === 0) return;

      var btn = document.getElementById('ar-translate-btn');
      var spinner = document.getElementById('ar-translate-spinner');
      var errEl = document.getElementById('ar-translate-error');
      btn.disabled = true;
      spinner.classList.remove('hidden');
      errEl.classList.add('hidden');

      fetch('{{ url_for("api_ai_translate_autoresponse") }}', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': getCsrf(),
          'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({ body: defaultBody.value.trim(), langs: emptyLangs })
      })
      .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
      .then(function (result) {
        btn.disabled = false;
        spinner.classList.add('hidden');
        if (!result.ok || result.data.error) {
          errEl.textContent = (result.data && result.data.error) || T_TRANSLATION_FAILED;
          errEl.classList.remove('hidden');
          return;
        }
        var translations = result.data.translations || {};
        Object.keys(translations).forEach(function (lang) {
          var ta = document.querySelector('[name="autoresponse_body_' + lang + '"]');
          if (ta) {
            ta.value = translations[lang];
            // Trigger input to update dot indicator
            ta.dispatchEvent(new Event('input', { bubbles: true }));
          }
        });
        arUpdateTranslateBtn();
      })
      .catch(function () {
        btn.disabled = false;
        spinner.classList.add('hidden');
        errEl.textContent = T_NETWORK_ERROR;
        errEl.classList.remove('hidden');
      });
    };

    // Init: update translate button visibility
    arUpdateTranslateBtn();
  })();
  </script>
  {% else %}
  <div id="settings-autoresponse" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6 opacity-60">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-2">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">schedule_send</span>
      {{ _("Auto-Response") }}{{ crown_badge() }}
    </h3>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      {% trans %}Automatically reply to out-of-hours messages — available on the <strong>Premium plan</strong> and above.{% endtrans %}
      <button type="button" onclick='showUpgradeModal("premium", {{ _("Auto-Response")|tojson }})'
              class="ml-1 text-brand-600 dark:text-brand-400 underline hover:no-underline text-sm">{{ _("Upgrade to unlock") }}</button>
    </p>
  </div>
  {% endif %}

  {# 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">
      {% trans %}Configure which languages are used for translating messages and replies.
      The preferred language is used as the default translation target.{% endtrans %}
    </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>

  {# Display Timezone Section #}
  <div id="settings-timezone" 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">schedule</span>
      {{ _("Display Timezone") }}
    </h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-5">
      {% trans %}Times across ModuleDesk are shown in this timezone. Timestamps are always
      stored in UTC, so changing this only changes what you see — including on
      messages already in your inbox.{% endtrans %}
    </p>
    <form method="POST" action="{{ url_for('settings_timezone') }}" class="flex flex-wrap items-end gap-3">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="flex-1 min-w-[16rem]">
        <label for="tz-select" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ _("Your timezone") }}</label>
        <select id="tz-select" name="timezone"
                class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm">
          <option value="">{{ _("Use organisation default (%(tz)s)", tz=org_timezone) }}</option>
          {% for tz in all_timezones %}
          <option value="{{ tz }}" {% if tz == user_timezone %}selected{% endif %}>{{ tz }}</option>
          {% endfor %}
        </select>
      </div>
      <button type="submit"
              class="px-4 py-2 rounded-lg bg-brand-600 hover:bg-brand-700 text-white text-sm font-medium">
        {{ _("Save Timezone") }}
      </button>
    </form>
    <p class="text-xs text-gray-500 dark:text-gray-400 mt-3">
      {% set display_tz = current_user.display_timezone %}
      {% set current_time = now_utc|localdt('%H:%M') %}
      {% trans display_tz=display_tz, current_time=current_time %}Currently showing times in <strong>{{ display_tz }}</strong>
      — right now that is {{ current_time }}.{% endtrans %}
    </p>
  </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">
      {% trans %}This signature is automatically appended to every reply in the ticket editor.
      You can edit it per-message before sending.{% endtrans %}
    </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>

    {% if has_feature('signature_multilang') %}
    <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700" id="signature-lang-variants">
      <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">{{ _("Language variants") }}</h4>
      <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">{{ _("Per-language signatures override the default for tickets in that language.") }}</p>

      <div id="sig-variant-list"></div>

      <div class="mt-3 flex gap-2 items-center">
        <select id="sig-lang-add" class="text-sm border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
          <option value="">{{ _("Add language…") }}</option>
          <option value="en">{{ _("English") }} (en)</option>
          <option value="es">{{ _("Spanish") }} (es)</option>
          <option value="fr">{{ _("French") }} (fr)</option>
          <option value="de">{{ _("German") }} (de)</option>
          <option value="it">{{ _("Italian") }} (it)</option>
          <option value="pt">{{ _("Portuguese") }} (pt)</option>
          <option value="nl">{{ _("Dutch") }} (nl)</option>
        </select>
        <button type="button" id="sig-lang-add-btn" class="text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-3 py-1 hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200">{{ _("Add") }}</button>
      </div>

      <div class="mt-4">
        <button type="button" id="sig-lang-save-btn"
                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">
          {{ _("Save language variants") }}
        </button>
        <span id="sig-lang-save-msg" class="ml-2 text-xs text-green-600 dark:text-green-400 hidden">{{ _("Saved.") }}</span>
      </div>
    </div>

    <script>
    var sigVariants = {{ current_user.signatures_json | tojson if current_user.signatures_json else '{}' | safe }};
    try { if (typeof sigVariants === 'string') sigVariants = JSON.parse(sigVariants); } catch(e) { sigVariants = {}; }
    </script>
    {% endif %}
  </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">
      {% trans %}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).{% endtrans %}
    </p>

    {# Pages already scraped are KEPT when a plan no longer includes doc scraping —
       re-scraping costs real money and the user may upgrade again. So we show the
       counts (the value is still there) and say plainly that they are not being
       used for answers on this plan, rather than hiding them as if they were lost. #}
    {% set doc_page_total = doc_sources | map(attribute='page_count') | select | sum %}
    {% if not has_feature('doc_scraping') and doc_sources %}
      <div class="mb-5 rounded-lg border border-amber-300 dark:border-amber-700/60 bg-amber-50 dark:bg-amber-900/20 p-4">
        <div class="flex items-start gap-3">
          <span class="material-symbols-outlined text-amber-600 dark:text-amber-400 shrink-0">pause_circle</span>
          <div class="text-sm text-amber-900 dark:text-amber-200">
            {% set plan_label = org_plan|replace('max_trial', 'trial')|capitalize %}
            <p class="font-semibold mb-1">
              {% trans plan_label=plan_label %}Your indexed documentation is inactive on the
              {{ plan_label }} plan.{% endtrans %}
            </p>
            {% set n_sources = doc_sources|length %}
            {% set n_pages = doc_page_total %}
            {% set sources_word = ngettext('source', 'sources', n_sources) %}
            {% set pages_word = ngettext('page', 'pages', n_pages) %}
            <p>
              {% trans n_sources=n_sources, sources_word=sources_word, n_pages=n_pages, pages_word=pages_word %}Your
              <strong>{{ n_sources }}</strong>
              {{ sources_word }} and
              <strong>{{ n_pages }}</strong>
              indexed {{ pages_word }}
              are kept safe, but they are <strong>not used in AI replies</strong> on this plan,
              and new scraping is paused. Upgrade to switch them back on — nothing needs
              re-indexing.{% endtrans %}
            </p>
          </div>
        </div>
      </div>
    {% endif %}

    {# 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|localdt('%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="togglePathGroups({{ src.id }}, this)"
                      id="path-groups-btn-{{ src.id }}"
                      class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-indigo-600 dark:text-indigo-400 bg-white dark:bg-gray-700 border border-indigo-200 dark:border-indigo-500/30 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-colors"
                      title="{{ _('Per-path module mapping') }}">
                <span class="material-symbols-outlined text-sm">account_tree</span>
                {{ _("Map") }}
              </button>
              <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?') | tojson }})">
                <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>
          <tr id="path-groups-row-{{ src.id }}" class="hidden">
            <td colspan="5" class="px-0 py-0">
              <div id="path-groups-panel-{{ src.id }}"
                   class="bg-gray-50 dark:bg-gray-800/60 border-t border-gray-100 dark:border-gray-700 px-4 py-3">
                <p class="text-xs text-gray-400 dark:text-gray-500">{{ _("Loading…") }}</p>
              </div>
            </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 %}
    <p class="text-xs text-gray-400 dark:text-gray-500 mt-3">
      {{ _("Linking a source to a module makes the AI prioritise that module's own documentation when drafting replies.") }}
    </p>
  </div>

<script>
/* ── Per-path module mapping ─────────────────────────────────────────── */
var DOC_PRODUCTS = {{ doc_products | tojson }};

var T_NO_PAGES_INDEXED = {{ _("No pages indexed yet — scrape this source first.") | tojson }};
var T_FAILED_LOAD_GROUPS = {{ _("Failed to load path groups.") | tojson }};
var T_GENERAL_NO_MODULE = {{ _("— General / no module —") | tojson }};
var T_PAGE_SINGULAR = {{ _("page") | tojson }};
var T_PAGE_PLURAL = {{ _("pages") | tojson }};
var T_MODULE_MAPPING = {{ _("Module mapping by path prefix") | tojson }};
var T_SAVED_TPL = {{ _("Saved ✓ ({count})") | tojson }};
var T_FAILED = {{ _("Failed") | tojson }};
var T_ERROR = {{ _("Error") | tojson }};

var _pathGroupsLoaded = {};

function togglePathGroups(sourceId, btn) {
  var row   = document.getElementById('path-groups-row-' + sourceId);
  var panel = document.getElementById('path-groups-panel-' + sourceId);
  if (!row) return;

  var isOpen = !row.classList.contains('hidden');
  if (isOpen) {
    row.classList.add('hidden');
    btn.querySelector('.material-symbols-outlined').textContent = 'account_tree';
    return;
  }

  row.classList.remove('hidden');
  btn.querySelector('.material-symbols-outlined').textContent = 'expand_less';

  if (_pathGroupsLoaded[sourceId]) return;   // already fetched

  fetch('/api/doc-sources/' + sourceId + '/path-groups', {
    credentials: 'same-origin',
    headers: { 'X-Requested-With': 'XMLHttpRequest' }
  })
  .then(function (r) { return r.json(); })
  .then(function (data) {
    _pathGroupsLoaded[sourceId] = true;
    if (!data.groups || data.groups.length === 0) {
      panel.innerHTML = '<p class="text-xs text-gray-400 dark:text-gray-500 italic">' + T_NO_PAGES_INDEXED + '</p>';
      return;
    }
    renderPathGroups(sourceId, panel, data.groups);
  })
  .catch(function (err) {
    panel.innerHTML = '<p class="text-xs text-red-500 dark:text-red-400">' + T_FAILED_LOAD_GROUPS + '</p>';
  });
}

function renderPathGroups(sourceId, panel, groups) {
  var productOpts = '<option value="">' + T_GENERAL_NO_MODULE + '</option>' +
    DOC_PRODUCTS.map(function (p) {
      return '<option value="' + p.id + '">' + escHtml(p.name) + '</option>';
    }).join('');

  var rows = groups.map(function (g) {
    var selectedOpts = '<option value=""' + (g.product_id === null ? ' selected' : '') + '>' + T_GENERAL_NO_MODULE + '</option>' +
      DOC_PRODUCTS.map(function (p) {
        return '<option value="' + p.id + '"' + (p.id === g.product_id ? ' selected' : '') + '>' + escHtml(p.name) + '</option>';
      }).join('');

    var samples = (g.sample_titles || []).map(function (t) {
      return '<span class="inline-block bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded px-1.5 py-0.5 mr-1 mb-1">' + escHtml(t) + '</span>';
    }).join('');

    return '<div class="flex flex-wrap items-start gap-3 py-2 border-b border-gray-100 dark:border-gray-700/60 last:border-0">' +
      '<div class="flex-1 min-w-0">' +
        '<p class="font-mono text-xs font-semibold text-gray-700 dark:text-gray-200 truncate">' + escHtml(g.prefix) + '</p>' +
        '<p class="text-xs text-gray-400 dark:text-gray-500">' + g.page_count + ' ' + (g.page_count !== 1 ? T_PAGE_PLURAL : T_PAGE_SINGULAR) + '</p>' +
        (samples ? '<div class="mt-1 flex flex-wrap">' + samples + '</div>' : '') +
      '</div>' +
      '<div class="flex items-center gap-2 shrink-0">' +
        '<select class="doc-pg-select border border-gray-300 dark:border-gray-600 rounded-md text-xs px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:ring-2 focus:ring-brand-500 outline-none"' +
          ' data-source-id="' + sourceId + '"' +
          ' data-prefix="' + escAttr(g.prefix) + '"' +
          ' onchange="assignPathGroup(this)">' +
          selectedOpts +
        '</select>' +
        '<span class="doc-pg-status text-xs hidden"></span>' +
      '</div>' +
    '</div>';
  }).join('');

  panel.innerHTML =
    '<p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wide">' + T_MODULE_MAPPING + '</p>' +
    '<div>' + rows + '</div>';
}

function assignPathGroup(sel) {
  var sourceId  = sel.dataset.sourceId;
  var prefix    = sel.dataset.prefix;
  var productId = sel.value === '' ? null : parseInt(sel.value, 10);
  var statusEl  = sel.parentElement.querySelector('.doc-pg-status');

  fetch('/api/doc-sources/' + sourceId + '/path-groups/assign', {
    method: 'POST',
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': getCsrf(),
      'X-Requested-With': 'XMLHttpRequest'
    },
    body: JSON.stringify({ prefix: prefix, product_id: productId })
  })
  .then(function (r) { return r.json(); })
  .then(function (data) {
    if (!statusEl) return;
    if (data.updated !== undefined) {
      statusEl.textContent = T_SAVED_TPL.replace('{count}', data.updated);
      statusEl.className = 'doc-pg-status text-xs text-teal-600 dark:text-teal-400';
    } else {
      statusEl.textContent = data.error || T_FAILED;
      statusEl.className = 'doc-pg-status text-xs text-red-500 dark:text-red-400';
    }
    statusEl.classList.remove('hidden');
    setTimeout(function () { statusEl.classList.add('hidden'); statusEl.textContent = ''; }, 2500);
  })
  .catch(function () {
    if (!statusEl) return;
    statusEl.textContent = T_ERROR;
    statusEl.className = 'doc-pg-status text-xs text-red-500 dark:text-red-400';
    statusEl.classList.remove('hidden');
    setTimeout(function () { statusEl.classList.add('hidden'); statusEl.textContent = ''; }, 2500);
  });
}

function escHtml(str) {
  return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
function escAttr(str) {
  return String(str).replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}
</script>

<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>
</div>
{% endblock %}