{#
  settings/partials/module_card.html
  Inline-Einstellungskarte für ein Modul auf der Einstellungsseite.
  Erwartet im Kontext: data.mod, data.schema, data.values
#}
{% from "partials/components/ui_macros.html" import btn, btn_save, form_input, form_select, form_textarea %}
{% set mod    = data['mod'] %}
{% set schema = data['schema'] %}
{% set values = data['values'] %}

<div>
  <div class="content-item on" data-debug-label="content-subitem">
    <div class="card-header">
      <span class="card-title">{{ mod.label }}</span>
    </div>
    <div class="card-body" style="padding:16px;">

      <form hx-post="/ui/settings/save/module/{{ mod.key }}"
            hx-target="#settings-container"
            hx-swap="outerHTML"
            class="form-stack" style="gap:14px;">

        {# Sektionen mit nur einem Feld: die eigene Überschrift des Feldes (.form-label)
           wiederholt die Section-Überschrift optisch praktisch 1:1 direkt darunter --
           wirkt wie zwei Überschriften hintereinander. Für solche Ein-Feld-Sektionen
           die .settings-section-label deshalb unterdrücken, das Feld-Label reicht. #}
        {% set section_sizes = [] %}
        {% set ns0 = namespace(count=0, started=False) %}
        {% for field in schema %}
          {% if field.get('type', 'text') == 'section' %}
            {% if ns0.started %}{% set _ = section_sizes.append(ns0.count) %}{% endif %}
            {% set ns0.count = 0 %}
            {% set ns0.started = True %}
          {% else %}
            {% set ns0.count = ns0.count + 1 %}
          {% endif %}
        {% endfor %}
        {% if ns0.started %}{% set _ = section_sizes.append(ns0.count) %}{% endif %}

        {% set ns = namespace(grid_open=False, grid_cols=1, first_section=True, section_idx=-1) %}

        {% for field in schema %}
        {% set ftype = field.get('type', 'text') %}

        {% if ftype == 'section' %}

          {% if ns.grid_open %}</div>{% endif %}
          {% set ns.section_idx = ns.section_idx + 1 %}
          {% set single_field_section = section_sizes[ns.section_idx] == 1 %}
          {% if not single_field_section %}
          <div class="settings-section-label"
               style="margin-top:{% if ns.first_section %}4px{% else %}12px{% endif %};">
            {{ field.label }}
          </div>
          {% endif %}
          {% set ns.first_section = False %}
          {% set ns.grid_cols = field.get('cols', 1) %}
          <div class="form-grid" style="--cols:{{ ns.grid_cols }};{% if single_field_section %} margin-top:{% if ns.section_idx == 0 %}4px{% else %}12px{% endif %};{% endif %}">
          {% set ns.grid_open = True %}

        {% else %}

          {% if not ns.grid_open %}
            <div style="display:grid; grid-template-columns:1fr; gap:14px;">
            {% set ns.grid_open = True %}
          {% endif %}

          {% set fkey = field.key %}
          {% set fval = values.get(fkey, field.get('default', '')) %}
          {% set fspan = field.get('span', 1) %}

          {% if fspan > 1 %}<div style="grid-column:span {{ fspan }};">{% endif %}
          <div class="form-group" style="margin:0;">
            <label class="form-label">{{ field.label }}</label>

            {% if ftype == 'select' %}
            {{ form_select(fkey, field.options, fval, placeholder='') }}

            {% elif ftype in ('checkbox', 'boolean') %}
            {{ form_select(fkey,
                           [{'value': 'true', 'label': 'Ja'}, {'value': 'false', 'label': 'Nein'}],
                           'true' if fval in (True, '1', 'true', 'on') else 'false',
                           placeholder='') }}

            {% elif ftype == 'list' %}
            {% set flist = fval if fval is iterable and fval is not string else [] %}
            <div x-data='{ "lines": {{ flist | tojson }},
                           add() { this.lines.push("") },
                           remove(i) { this.lines.splice(i, 1) } }'
                 class="stack-sm">
              <template x-for="(line, i) in lines" :key="i">
                <div class="inline-cluster">
                  <input type="text"
                         :name="`{{ fkey }}_${i}`"
                         x-model="lines[i]"
                         class="form-input" {# G-013-Ausnahme: Alpine.js x-model mit dynamischem :name #}
                         style="flex:1;{% if field.get('mono') %}font-family:var(--font-mono);{% endif %}font-size:13px;">
                  <button type="button" @click="remove(i)"
                          class="btn-icon btn-icon-danger" title="Entfernen" aria-label="Entfernen">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
                      <use href="#icon-minus"></use>
                    </svg>
                  </button>
                </div>
              </template>
              <div class="list-field-add">
                {% call btn(attrs='style="gap:5px;" @click="add()"') %}
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-plus"></use></svg>
                  Hinzufügen
                {% endcall %}
              </div>
            </div>

            {% elif ftype == 'tags' %}
            {# Wie 'list' (gleiches Formular-Sende-Format: {{ fkey }}_0, _1, ...,
               von settings_save_module() identisch geparst), aber als kompakte
               Badges statt einer Eingabezeile pro Wert -- fuer Listen aus vielen
               KURZEN Werten (Namen, Tags) uebersichtlicher als 'list', bei
               laengeren/strukturierten Werten (Pfade o.ae.) bleibt 'list' die
               bessere Wahl. #}
            {% set flist = fval if fval is iterable and fval is not string else [] %}
            <div x-data='{ "tags": {{ flist | tojson }}, draft: "",
                           add() { const v = this.draft.trim(); if (v && !this.tags.includes(v)) { this.tags.push(v) } this.draft = "" },
                           remove(i) { this.tags.splice(i, 1) } }'>
              <div style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;" x-show="tags.length">
                <template x-for="(tag, i) in tags" :key="tag">
                  <span class="badge-pill badge-grey" style="display:inline-flex; align-items:center; gap:5px;">
                    <input type="hidden" :name="`{{ fkey }}_${i}`" :value="tag">
                    <span x-text="tag" style="{% if field.get('mono') %}font-family:var(--font-mono);{% endif %}"></span>
                    <button type="button" @click="remove(i)" title="Entfernen" aria-label="Entfernen"
                            style="display:inline-flex; background:none; border:none; padding:0; cursor:pointer; color:inherit; opacity:.7;">
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-close"></use></svg>
                    </button>
                  </span>
                </template>
              </div>
              <div class="inline-cluster">
                <input type="text" x-model="draft" @keydown.enter.prevent="add()"
                       placeholder="{{ field.get('placeholder', 'Hinzufügen…') }}"
                       class="form-input" style="flex:1;{% if field.get('mono') %}font-family:var(--font-mono);{% endif %}">
                {% call btn(attrs='@click="add()" type="button"') %}
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-plus"></use></svg>
                  Hinzufügen
                {% endcall %}
              </div>
            </div>

            {% elif ftype == 'textarea' %}
            {%- set _ta_attrs -%}
              style="resize:vertical; font-family:{% if field.get('mono') %}var(--font-mono){% else %}inherit{% endif %};"
            {%- endset -%}
            {{ form_textarea(fkey, fval,
                             rows=field.get('rows', 3),
                             placeholder=field.get('placeholder', ''),
                             attrs=_ta_attrs) }}

            {% elif ftype == 'timezone_select' %}
            {# T-321-ADMIN: zwei gekoppelte Dropdowns (Region -> Stadt)
               statt Freitext, deckt alle IANA-Zeitzonen ab, ohne eine
               ~600-Eintraege-Liste in einem einzigen <select> anzuzeigen.
               "Nicht verwalten" = leerer Wert, siehe agent_settings.py::
               timezone().

               Bewusst KEIN x-model/x-for fuer die Optionen selbst: Alpine
               versucht bei x-model auf einem <select> den Wert schon beim
               ersten Rendern zu setzen, BEVOR ein per x-for erzeugtes
               <option> ueberhaupt existiert -- das schlaegt lautlos fehl
               (live beobachtet: Auswahl ging nach dem Speichern/Neuladen
               immer wieder verloren). Die Start-Auswahl wird deshalb direkt
               von Jinja mit "selected" gerendert (kein Timing-Risiko),
               JS/Alpine uebernimmt nur noch das Nachladen der Staedte-Liste
               bei einem Regionswechsel danach.

               Die Nachlade-Logik lebt bewusst als BENANNTE METHODE in
               x-data, nicht als Mehrzeiler direkt in @change: Alpine
               wertet eine @-Direktive als EINEN Ausdruck aus (intern
               "return <Ausdruck>") -- ein "var"-Statement darin ist kein
               gueltiger Ausdruck und wirft "Unexpected token 'var'" (live
               in der Konsole beobachtet). Ein einzelner Methodenaufruf
               (@change="updateCities($event)") ist dagegen ein gueltiger
               Ausdruck, die eigentliche Mehrzeiler-Logik darf innerhalb
               der Methode selbst beliebig viele Statements haben. #}
            {% set cur_region = fval.split('/', 1)[0] if fval else '' %}
            <div x-data='{
                   groups: {{ timezone_groups | tojson }},
                   updateCities(event) {
                     var city = this.$refs["tzCity_{{ fkey }}"];
                     city.innerHTML = "<option value=\"\">– bitte wählen –</option>";
                     (this.groups[event.target.value] || []).forEach(function (z) {
                       var opt = document.createElement("option");
                       opt.value = z;
                       opt.textContent = z.includes("/") ? z.split("/").slice(1).join("/") : z;
                       city.appendChild(opt);
                     });
                   }
                 }'
                 style="display:flex; gap:8px;">
              <select class="form-select" style="flex:1;" x-ref="tzRegion_{{ fkey }}"
                      @change="updateCities($event)">
                <option value="" {% if not cur_region %}selected{% endif %}>Nicht verwalten</option>
                {% for region in timezone_groups.keys() %}
                <option value="{{ region }}" {% if region == cur_region %}selected{% endif %}>{{ region }}</option>
                {% endfor %}
              </select>
              <select name="{{ fkey }}" class="form-select" style="flex:1;" x-ref="tzCity_{{ fkey }}">
                <option value="">– bitte wählen –</option>
                {% for zone in timezone_groups.get(cur_region, []) %}
                <option value="{{ zone }}" {% if zone == fval %}selected{% endif %}>{{ zone.split('/', 1)[1] if '/' in zone else zone }}</option>
                {% endfor %}
              </select>
            </div>

            {% elif ftype == 'password' %}
            {{ form_input(fkey, type='password',
                          placeholder=field.get('placeholder', '••••••••'),
                          attrs='autocomplete="new-password"') }}

            {% else %}
            {%- set _attrs -%}
              {%- if field.get('mono') %}style="font-family:var(--font-mono);{% if field.get('width') %}width:{{ field.width }};{% endif %}"
              {%- elif field.get('width') %}style="width:{{ field.width }};"{% endif -%}
            {%- endset -%}
            {{ form_input(fkey, fval, type=ftype,
                          placeholder=field.get('placeholder', ''),
                          attrs=_attrs) }}
            {% endif %}

            {% if field.get('description') %}
            <span class="form-help">{{ field.description }}</span>
            {% endif %}
          </div>
          {% if fspan > 1 %}</div>{% endif %}

        {% endif %}
        {% endfor %}

        {% if ns.grid_open %}</div>{% endif %}

        <div class="form-actions" style="padding-bottom:4px;">
          {{ btn_save() }}
        </div>

      </form>
    </div>
  </div>
</div>