{#
  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, toggle_field %}
{% 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;">

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

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

        {% if ftype == 'section' %}

          {% if ns.grid_open %}</div>{% endif %}
          <div class="settings-section-label"
               style="margin-top:{% if ns.first_section %}4px{% else %}12px{% endif %};">
            {{ field.label }}
          </div>
          {% set ns.first_section = False %}
          {% set ns.grid_cols = field.get('cols', 1) %}
          <div style="display:grid;
                      grid-template-columns:repeat({{ ns.grid_cols }}, 1fr);
                      gap:12px;">
          {% 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 == 'checkbox' %}
            {{ toggle_field(fkey, fval in (True, '1', 'true', 'on'),
                            label='', field_id='tf-' ~ fkey) }}

            {% 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">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
                      <use href="#icon-minus"></use>
                    </svg>
                  </button>
                </div>
              </template>
              <div>
                {% 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 == '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 == '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>