{#
  settings/partials/module_card.html
  Inline-Einstellungskarte für ein Modul auf der Einstellungsseite.
  Erwartet im Kontext: data.mod, data.schema, data.values
#}
{% set mod    = data['mod'] %}
{% set schema = data['schema'] %}
{% set values = data['values'] %}

<div>
  <div class="ds-card on" x-data="{ open: false }" data-debug-label="ds-card">
    <div class="card-body" style="padding:16px;" data-debug-label="card-body">

      <button type="button"
              @click="open = !open"
              style="display:flex; align-items:center; justify-content:space-between;
                     width:100%; background:none; border:none; padding:0;
                     cursor:pointer; font-weight:600; color:inherit; font-size:inherit;">
        <span>{{ mod.label }}</span>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round"
             style="transition:transform .2s; flex-shrink:0;"
             :style="open ? 'transform:rotate(180deg)' : ''">
          <polyline points="6 9 12 15 18 9"/>
        </svg>
      </button>

      <div x-show="open"
           x-transition:enter="transition-all"
           x-transition:enter-start="opacity-0"
           x-transition:enter-end="opacity-100"
           style="margin-top:14px;">
      <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' %}
            <select name="{{ fkey }}" class="form-select">
              {% for opt in field.options %}
                {% if opt is mapping %}
                  <option value="{{ opt.value }}" {{ 'selected' if fval == opt.value }}>{{ opt.label }}</option>
                {% else %}
                  <option value="{{ opt }}" {{ 'selected' if fval == opt }}>{{ opt }}</option>
                {% endif %}
              {% endfor %}
            </select>

            {% elif ftype == 'checkbox' %}
            <label class="toggle-field" style="padding-top:4px;">
              <input type="hidden" name="{{ fkey }}" value="0">
              <input type="checkbox" name="{{ fkey }}" value="1"
                     style="width:16px; height:16px;"
                     {{ 'checked' if fval in (True, '1', 'true', 'on') }}
                     onchange="this.form.querySelector('[name={{ fkey }}][type=hidden]').disabled=this.checked">
              <span class="toggle-field-label">{{ field.get('checkbox_label', 'Aktiviert') }}</span>
            </label>

            {% 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"
                         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="none"
                         stroke="currentColor" stroke-width="2">
                      <use href="#icon-minus"></use>
                    </svg>
                  </button>
                </div>
              </template>
              <div>
                <button type="button" @click="add()"
                        class="btn btn-ghost btn-sm" style="gap:5px;">
                  <svg width="13" height="13" viewBox="0 0 24 24"
                       fill="currentColor" stroke="none">
                    <use href="#icon-plus"></use>
                  </svg>
                  Hinzufügen
                </button>
              </div>
            </div>

            {% elif ftype == 'textarea' %}
            <textarea name="{{ fkey }}" class="form-input"
                      rows="{{ field.get('rows', 3) }}"
                      placeholder="{{ field.get('placeholder', '') }}"
                      style="resize:vertical; font-family:{% if field.get('mono') %}var(--font-mono){% else %}inherit{% endif %};">{{ fval }}</textarea>

            {% elif ftype == 'password' %}
            <input type="password" name="{{ fkey }}" class="form-input"
                   placeholder="{{ field.get('placeholder', '••••••••') }}"
                   autocomplete="new-password">

            {% else %}
            <input type="{{ ftype }}" name="{{ fkey }}" class="form-input"
                   value="{{ fval }}"
                   placeholder="{{ field.get('placeholder', '') }}"
                   style="{% if field.get('mono') %}font-family:var(--font-mono);{% endif %}{% if field.get('width') %}width:{{ field.width }};{% endif %}">
            {% 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;">
          <button type="submit" class="btn btn-primary btn-sm">Speichern</button>
        </div>

      </form>
      </div>{# /x-collapse #}
    </div>
  </div>
</div>