{# templates/_modal_settings.html #}
{% set active_settings_pane = settings_pane if mac_app else 'detection' %}
<div class="modal-backdrop" onclick="this.remove()">
  <div class="modal modal-wide{% if mac_app %} settings-modal{% endif %}"
       data-settings-modal
       onclick="event.stopPropagation()">
    <h2>{{ _('settings.title') }}</h2>

    {% if mac_app %}
      <div class="settings-tabs"
           data-settings-tabs
           role="tablist"
           aria-label="{{ _('settings.title') }}"
           aria-orientation="horizontal">
        <button type="button"
                id="settings-tab-detection"
                class="settings-tab"
                role="tab"
                aria-controls="settings-pane-detection"
                aria-selected="{{ 'true' if active_settings_pane == 'detection' else 'false' }}"
                tabindex="{{ '0' if active_settings_pane == 'detection' else '-1' }}"
                data-settings-tab="detection"
                hx-post="/settings/pane?t={{ token }}"
                hx-vals='{"pane":"detection"}'
                hx-swap="none">
          <span class="settings-tab-icon" aria-hidden="true">⚙︎</span>
          <span>{{ _('settings.tab.detection') }}</span>
        </button>
        <button type="button"
                id="settings-tab-languages"
                class="settings-tab"
                role="tab"
                aria-controls="settings-pane-languages"
                aria-selected="{{ 'true' if active_settings_pane == 'languages' else 'false' }}"
                tabindex="{{ '0' if active_settings_pane == 'languages' else '-1' }}"
                data-settings-tab="languages"
                hx-post="/settings/pane?t={{ token }}"
                hx-vals='{"pane":"languages"}'
                hx-swap="none">
          <span class="settings-tab-icon settings-tab-letter" aria-hidden="true">A</span>
          <span>{{ _('settings.tab.languages') }}</span>
        </button>
        <button type="button"
                id="settings-tab-updates"
                class="settings-tab"
                role="tab"
                aria-controls="settings-pane-updates"
                aria-selected="{{ 'true' if active_settings_pane == 'updates' else 'false' }}"
                tabindex="{{ '0' if active_settings_pane == 'updates' else '-1' }}"
                data-settings-tab="updates"
                hx-post="/settings/pane?t={{ token }}"
                hx-vals='{"pane":"updates"}'
                hx-swap="none">
          <span class="settings-tab-icon" aria-hidden="true">↻</span>
          <span>{{ _('settings.tab.updates') }}</span>
        </button>
        <button type="button"
                id="settings-tab-privacy"
                class="settings-tab"
                role="tab"
                aria-controls="settings-pane-privacy"
                aria-selected="{{ 'true' if active_settings_pane == 'privacy' else 'false' }}"
                tabindex="{{ '0' if active_settings_pane == 'privacy' else '-1' }}"
                data-settings-tab="privacy"
                hx-post="/settings/pane?t={{ token }}"
                hx-vals='{"pane":"privacy"}'
                hx-swap="none">
          <span class="settings-tab-icon" aria-hidden="true">▣</span>
          <span>{{ _('settings.tab.privacy') }}</span>
        </button>
      </div>
    {% endif %}

    <div{% if mac_app %} class="settings-pane-host"{% endif %}>
      <section class="settings-pane"
               data-settings-pane="detection"
               {% if mac_app %}
                 id="settings-pane-detection"
                 role="tabpanel"
                 aria-labelledby="settings-tab-detection"
                 {% if active_settings_pane != 'detection' %}hidden{% endif %}
               {% endif %}>
        <div class="row">
          <div class="section-label">{{ _('settings.detectors') }}</div>
          <div class="detector-grid">
            {% for cat in detector_categories %}
              <div class="detector-cat">
                <div class="detector-cat-label">{{ _(cat.label_key) }}</div>
                {% for d in cat.detectors %}
                  <label class="detector-row">
                    <input type="checkbox"
                           name="enabled"
                           value="true"
                           {{ "checked" if d.enabled }}
                           {{ "disabled" if d.required }}
                           hx-post="/detector/{{ d.name }}/toggle"
                           hx-include="this"
                           hx-swap="none">
                    <span class="name">{{ d.label }}</span>
                    {% if d.tier == "P2" %}<span class="badge">P2</span>{% endif %}
                  </label>
                {% endfor %}
              </div>
            {% endfor %}
          </div>
        </div>

        <div class="row">
          <label class="inline">
            <input type="checkbox" {{ "checked" if strict_mode }}
                   hx-post="/settings/strict-mode/toggle" hx-swap="none">
            <span>{{ _('settings.strict_mode') }}</span>
          </label>
        </div>
      </section>

      <section class="settings-pane"
               data-settings-pane="languages"
               {% if mac_app %}
                 id="settings-pane-languages"
                 role="tabpanel"
                 aria-labelledby="settings-tab-languages"
                 {% if active_settings_pane != 'languages' %}hidden{% endif %}
               {% endif %}>
        <div class="row">
          <div class="section-label">{{ _('settings.languages') }}</div>
          {% if mac_app %}<p class="settings-note">{{ _('settings.lang.mac_note') }}</p>{% endif %}
          <div class="lang-list">
            {% for lang in languages %}
              {% include "_language_row.html" %}
            {% endfor %}
          </div>
        </div>

        {% if mac_app %}
          <div class="row settings-split settings-pane-section">
            <div>
              <div class="section-label">{{ _('settings.storage') }}</div>
              <p class="settings-note">{{ _('settings.storage.note') }}</p>
            </div>
            <a class="btn" href="anonymizer://open-model-folder">{{ _('settings.storage.open') }}</a>
          </div>
        {% endif %}
      </section>

      {% if mac_app %}
        <section class="settings-pane"
                 id="settings-pane-updates"
                 data-settings-pane="updates"
                 role="tabpanel"
                 aria-labelledby="settings-tab-updates"
                 {% if active_settings_pane != 'updates' %}hidden{% endif %}>
          <div class="row settings-split">
            <div>
              <div class="section-label">{{ _('settings.updates') }}</div>
              <p class="settings-note">
                {{ _('settings.updates.note') if updates_configured else _('settings.updates.unconfigured') }}
              </p>
              {% if updates_configured %}
                <label class="inline">
                  <input type="checkbox" {{ "checked" if auto_update_check }}
                         data-mac-auto-update>
                  <span>{{ _('settings.updates.automatic') }}</span>
                </label>
              {% endif %}
            </div>
            {% if updates_configured %}
              <a class="btn" href="anonymizer://check-updates">{{ _('settings.updates.check') }}</a>
            {% endif %}
          </div>
        </section>

        <section class="settings-pane"
                 id="settings-pane-privacy"
                 data-settings-pane="privacy"
                 role="tabpanel"
                 aria-labelledby="settings-tab-privacy"
                 {% if active_settings_pane != 'privacy' %}hidden{% endif %}>
          <div class="row">
            <div class="section-label">{{ _('settings.privacy') }}</div>
            <p class="settings-note">{{ _('settings.privacy.note') }}</p>
          </div>
          <div class="row settings-pane-section">
            <button class="modal-link" hx-post="/settings/open-logs-folder" hx-swap="none">
              {{ _('settings.open_logs') }}
            </button>
          </div>
        </section>
      {% endif %}
    </div>

    {% if not mac_app %}
      <div class="row">
        <button class="modal-link" hx-post="/settings/open-logs-folder" hx-swap="none">
          {{ _('settings.open_logs') }}
        </button>
      </div>
    {% endif %}

    <div class="actions">
      <button class="btn primary" onclick="this.closest('.modal-backdrop').remove()">
        {{ _('settings.close') }}
      </button>
    </div>
  </div>
</div>