{# Shared collapsible settings card for auto-registered extensions (see
   web/thirdparties/registry.py's register_thirdparty()). Rendered
   wherever a "card" dict from resolve_settings_cards()/thirdparty_cards
   shows up — the classic Integrations "Third Party" tab, any other
   existing tab/pill an extension attaches to, or a brand-new one
   (get_dynamic_tabs()). One macro instead of copy-pasting this markup
   into integrations.html and notifications.html keeps every host visually
   and behaviourally identical for free.

   The toggle(s) are backed by the generic
   GET/PUT /api/settings/thirdparty/<id> API (registry.py's
   register_generic_settings_routes) via static/extension_cards.js, which
   scans the whole document for .thirdparty-toggle[data-thirdparty-id] —
   so this works no matter which page/tab the card ends up rendered on,
   with zero extra JS wiring per host.

   allow_module_toggle: whether a MODULE-provided card may show its master
   on/off switch here. Off everywhere by default, and deliberately so.

   A module's master toggle is the same switch as the one in the module
   manager, and having it on the Integrations page was a one-way door: turning
   it off makes resolve_settings_cards() drop the card, so the switch you used
   to disable the module is gone the moment you use it, and the only way back
   is the module manager anyway. Worse, "off" here means the whole module is
   off -- every provider, hoster and page it registered -- while the row sits
   between Crunchyroll and Fernsehserien, where "off" means one integration.

   Built-in integrations (no card.module_name) are unaffected: their toggle is
   what it looks like, and they keep it. #}
{% macro render_settings_card(card, allow_module_toggle=false) %}
{% set show_master_toggle = allow_module_toggle or not card.module_name %}
{# data-thirdparty-id on the CARD, not just on the master toggle. static/
   extension_cards.js's loadThirdpartyToggles() used to iterate
   `.thirdparty-toggle[data-thirdparty-id]` and read the card's stored values
   from inside that loop -- so on a page where the master toggle is not
   rendered (a module card, see show_master_toggle below) it found nothing,
   never issued the GET, and every extra field, extra toggle and select on the
   card stayed at its markup default. That is the "the number box is empty and
   nothing is saved" report: the card was never loaded in the first place. #}
<div class="settings-section integ-card collapsed" id="integCard-{{ card.id }}"
     data-thirdparty-id="{{ card.id }}">
  <div class="integ-subsection-header integ-collapsible-header" style="padding:unset !important;" onclick="toggleIntegCollapse('{{ card.id }}')">
    <span class="integ-collapsible-chevron">▸</span>
    <span class="integ-subsection-title">{{ card.title }}</span>
    {% for badge_text, badge_color in card.badges %}
    <span class="integ-subsection-badge" style="background:{{ badge_color }};color:#fff;">{{ badge_text }}</span>
    {% endfor %}
    {# Same "M" pill the sidebar uses for module-provided entries. On a shared
       tab like Third Party a module's card sits next to Crunchyroll and
       Fernsehserien and looked exactly like them -- so "why can I not find
       this in the docs" had no visible answer. The module's folder name is
       the tooltip, which is what you need to go and disable it. #}
    {# The extra .card-module-pill carries the spacing. The shared
       .sidebar-module-pill keeps its own geometry, which is tuned for a
       sidebar row where the pill is the last thing on the line -- widening it
       there would push every module entry in the main menu around. #}
    {% if card.module_name %}
    <span class="sidebar-module-pill card-module-pill"
          title="{{ _('Module') }}: {{ card.module_name }}">M</span>
    {% endif %}
  </div>
  <div class="integ-collapsible-body">
  {% if card.description %}
  <div class="integ-subsection-hint">{{ card.description }}</div>
  {% endif %}

  {% if show_master_toggle %}
  <!-- Master toggle (generic — backed by /api/settings/thirdparty/<id>) -->
  <div class="settings-row">
    <div class="settings-row-left">
      <div class="settings-row-label">{{ card.enable_label }}</div>
      {% if card.enable_desc %}<div class="settings-row-desc">{{ card.enable_desc }}</div>{% endif %}
    </div>
    <div class="settings-row-right">
      <label class="toggle">
        <input type="checkbox" class="thirdparty-toggle" data-thirdparty-id="{{ card.id }}" onchange="saveThirdpartyToggle('{{ card.id }}', this)" />
        <span class="toggle-slider"></span>
      </label>
    </div>
  </div>
  {% else %}
  <!-- Module card on a host that does not own the on/off decision. A pointer
       rather than a disabled switch: a greyed-out toggle says "not allowed"
       and stops there, which is the wrong half of the answer. -->
  <div class="settings-row">
    <div class="settings-row-left">
      <div class="settings-row-label">{{ card.enable_label }}</div>
      <div class="settings-row-desc">
        {{ _('This card belongs to the module %(module)s. Switch it on or off in the module manager.', module=card.module_name) }}
      </div>
    </div>
    <div class="settings-row-right">
      <a class="btn btn-secondary" href="/extensions">{{ _('Open module manager') }}</a>
    </div>
  </div>
  {% endif %}

  <!-- Extra per-integration fields (generic — also backed by
       /api/settings/thirdparty/<id>, see registry.py's extra_settings).
       Empty for integrations that only registered the master toggle. One
       row per field, shaped by its declared type ("toggle" the original
       checkbox; "text"/"secret"/"number" an input + inline Save button;
       "select" a dropdown that saves on change). -->
  {% for extra in card.extra_settings %}
  <div class="settings-row">
    <div class="settings-row-left">
      <div class="settings-row-label">{{ extra.label }}</div>
      {% if extra.description %}<div class="settings-row-desc">{{ extra.description }}</div>{% endif %}
    </div>
    <div class="settings-row-right">
      {% if extra.type == 'toggle' %}
      <label class="toggle">
        <input type="checkbox" class="thirdparty-extra-toggle" data-thirdparty-id="{{ card.id }}" data-extra-key="{{ extra.key }}" onchange="saveThirdpartyExtraSetting('{{ card.id }}', '{{ extra.key }}', this)" />
        <span class="toggle-slider"></span>
      </label>
      {% elif extra.type == 'select' %}
      <select class="thirdparty-extra-field" data-thirdparty-id="{{ card.id }}" data-extra-key="{{ extra.key }}" onchange="saveThirdpartyExtraField('{{ card.id }}', '{{ extra.key }}', this)">
        {% for value, opt_label in extra.options %}
        <option value="{{ value }}">{{ opt_label }}</option>
        {% endfor %}
      </select>
      {% else %}
      {# value= renders the declared default straight away. Without it the field
         was blank until the async GET landed -- and on a "number" field styled
         as a stepper an empty box reads as "there is no default", which is what
         was reported. The GET still wins and overwrites this with the stored
         value; a secret is never pre-filled (the GET hands back a mask). #}
      <div class="integ-input-row" style="gap:6px;">
        <input type="{{ 'password' if extra.type == 'secret' else ('number' if extra.type == 'number' else 'text') }}"
               class="thirdparty-extra-field" data-thirdparty-id="{{ card.id }}" data-extra-key="{{ extra.key }}"
               {% if extra.type != 'secret' and extra.default %}value="{{ extra.default }}"{% endif %}
               placeholder="{{ extra.placeholder }}" autocomplete="off" style="min-width:160px;" />
        {# `this`, not `this.previousElementSibling`: static/number_input.js
           wraps a number field in a stepper <div> and MOVES the input inside
           it, so the button's previous sibling became the wrapper and
           `el.value` was undefined -- the PUT then carried an empty `extra`
           object and the server had nothing to write, while still answering
           200. saveThirdpartyExtraField() resolves the field by data attribute
           now, which no wrapper can break. #}
        <button class="btn btn-secondary" onclick="saveThirdpartyExtraField('{{ card.id }}', '{{ extra.key }}', this)">{{ _('Save') }}</button>
      </div>
      {% endif %}
    </div>
  </div>
  {% endfor %}
  </div>
</div>
{% endmacro %}