{#
  core/ui/templates/partials/list_wrapper_inner.html

  Generisches Card-/Listen-Template für runnable CRUD-Module.
  Ersetzt das innerHTML von #{{ container_id }} via HTMX.

  Variablen:
    cfg              – dict {item_id: item_dict} aus load_config/storage
    module           – Modulname (str)
    container_id     – ID des Listen-Containers (z.B. "tab-borg")
    loading_id       – ID des Lade-Indikators
    content_template – Pfad zum modul-spezifischen Inhalt-Partial
    running          – dict der laufenden Jobs {key: mode}
    light_mode       – bool (optionaler schreibgeschützter Modus)
    has_toggle       – bool (default True)  Toggle-Schalter in Card-Header und Ctx-Menu
    has_create       – bool (default True)  Neu-Button im Page-Header
    has_edit         – bool (default True)  Bearbeiten-Button im Ctx-Menu
    has_delete       – bool (default True)  Löschen-Button im Ctx-Menu

  Tabellen-Struktur (immer gleich):
    col-name | [modul-spezifische Spalten] | col-last-run (130px) | col-status (60px) | col-actions (38px)
#}
{% import 'partials/components/ui_macros.html' as ui %}

{% if running %}
<div hx-get="/ui/{{ module }}/status"
     hx-trigger="every 2s"
     hx-target="#{{ container_id }}"
     hx-swap="innerHTML"
     style="display:none"></div>
{% endif %}
<div x-data="viewToggle('{{ module }}')">

{# ── Page-Header: nur Settings + extra_page_actions (falls vorhanden) ────────── #}
{% if module_has_settings(module) %}
<div class="page-header" data-debug-label="page-header">
  <div class="page-header-main" data-debug-label="page-header-main">
    {{ ui.settings_button(module=module) }}
  </div>
  <div class="page-header-actions" data-debug-label="page-header-actions"></div>
</div>
{% endif %}

{# ── Karten-Ansicht ───────────────────────────────────────────────────────── #}
<div class="ds-list-grid" x-show="view === 'card'">

{% if cfg %}
  {% for name, item in cfg.items() %}
    {% set item_name = name %}
    {% set item_data = item %}
    {% set is_running = (module ~ ":" ~ item_name) in (running or {}) %}
    {% set run_mode = (running or {}).get(module ~ ":" ~ item_name, "") %}

    <article class="ds-card {{ 'on' if item_data.enabled else 'off' }}" data-debug-label="ds-card">

      <!-- Card Header -->
      <div class="card-header" data-debug-label="card-header">
        <div class="card-title">
          {{ item_data.description or item_data.job or item_data.host or item_name }}
        </div>
        {% if has_toggle | default(True) %}
        {% set _display_name = item_data.description or item_data.job or item_data.host or item_name %}
        {{ ui.toggle_switch(module=module, item=item_name, container_id=container_id,
                            loading_id=loading_id, enabled=item_data.enabled,
                            description=_display_name) }}
        {% endif %}
      </div>

      <!-- Card Body -->
      {% set _card_content %}{% include content_template %}{% endset %}
      {% if _card_content | trim %}
      <div class="card-inner" data-debug-label="card-inner">
        <div class="card-body" data-debug-label="card-body">
          <div class="card-meta">
            {{ _card_content }}
          </div>
        </div>
      </div>
      {% endif %}

      <!-- Card Run Info -->
      {% set _status = 'running' if is_running else last_run_status(module, item_name) %}
      {% set _run_date = item_data.last_built if item_data.last_built is defined and item_data.last_built else item_data.last_run %}
      {% set _run_label = 'Letzter Build:' if item_data.last_built is defined and item_data.last_built else 'Letzter Lauf:' %}
      {% if _run_date or _status %}
      <div class="card-run-info" data-debug-label="card-run-info">
        <div class="card-run-left">
          <span>{{ _run_label }}</span>
          <span class="card-run-date">{{ _run_date or '—' }}</span>
        </div>
        {% if _status %}
        {{ ui.status_inline(_status) }}
        {% endif %}
      </div>
      {% endif %}

      <!-- Card Footer -->
      <div class="card-footer" data-debug-label="card-footer">
        <div class="card-footer-actions">
          {% set _card_actions = module_card_actions(module) %}
          {% for action in _card_actions %}{{ ui.card_action_button(action, item_name, item_data, container_id, loading_id) }}{% endfor %}
        </div>
        <div class="card-footer-actions">
          {% if extra_actions_template %}{% include extra_actions_template ignore missing %}{% endif %}
          {% if has_edit | default(True) %}
          {{ ui.edit_button(module=module, item=item_name, container_id=container_id, loading_id=loading_id) }}
          {% endif %}
          {% if has_delete | default(True) %}
          {{ ui.delete_button(module=module, item=item_name, container_id=container_id, loading_id=loading_id, description=item_data.description or item_data.job or item_data.host or item_name) }}
          {% endif %}
        </div>
      </div>

    </article>
  {% endfor %}
{% else %}
  <div class="empty-state">
    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
      <rect x="3" y="3" width="18" height="18" rx="2"/>
      <line x1="9" y1="9" x2="15" y2="9"/>
      <line x1="9" y1="12" x2="15" y2="12"/>
      <line x1="9" y1="15" x2="12" y2="15"/>
    </svg>
    <div class="empty-state-title">Keine Einträge vorhanden</div>
    <div class="empty-state-sub">Erstelle den ersten Eintrag mit „Neu"</div>
  </div>
{% endif %}
</div>

{# ── Tabellen-Ansicht ─────────────────────────────────────────────────────── #}
<div class="ds-list-table-wrap" x-show="view === 'list'" style="display:none;" data-debug-label="ds-list-table-wrap">
<div class="table-toolbar" data-debug-label="table-toolbar">
  <div class="table-toolbar-title">{{ module_label(module) }}</div>
  <div class="table-toolbar-right">
    {% if filter_defs %}
    {% for f in filter_defs %}
    <select
      class="form-select table-filter-select"
      x-data="moduleFilter('{{ module }}__{{ f.param }}')"
      @change="save($el.value)"
      hx-get="/ui/{{ module }}/content"
      hx-target="#{{ container_id }}"
      hx-swap="innerHTML"
      hx-include="[data-filter-for='{{ module }}']"
      data-filter-for="{{ module }}">
      <option value="">{{ f.all_label }}</option>
      {% for opt in f.options %}
      <option value="{{ opt.value }}" {% if opt.value | string == f.active | string %}selected{% endif %}>{{ opt.label }}</option>
      {% endfor %}
    </select>
    {% endfor %}
    {% endif %}
    {% if extra_page_actions_template %}{% include extra_page_actions_template ignore missing %}{% endif %}
    {% if has_create | default(True) %}
    {{ ui.add_button(module=module, container_id=container_id, loading_id=loading_id) }}
    {% endif %}
  </div>
</div>
<div class="ds-list-table-wrap-scroll">
{% if cfg %}
  {% set _card_actions = module_card_actions(module) %}
  {% set _name_fixed = {'rsync': false} %}
  <table class="ds-list-table" data-module="{{ module }}" data-col-widths="{{ col_widths(module) | e }}" data-debug-label="ds-list-table">
    <thead>
      <tr>
        <th class="col-name sortable">Name</th>
        {% include module + '/partials/list_header.html' ignore missing %}
        {% if has_run_buttons | default(True) %}
        <th class="col-last-run sortable">Letzter Lauf</th>
        {% endif %}
        {% if has_status | default(True) %}<th class="col-status">Status</th>{% endif %}
        <th class="col-actions">
          <div class="table-actions">
            <div class="table-ctx-menu"
                 x-data="{open: false, pos: {top:0, right:0}, toggle(btn){ const r=btn.getBoundingClientRect(); this.pos={top: r.bottom+2, right: window.innerWidth-r.right}; this.open=!this.open; }}"
                 @click.outside="open = false">
              <button type="button" class="btn-icon" @click="toggle($el)" :class="{'active': open}" title="Spaltenoptionen">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="12" cy="19" r="1.8"/></svg>
              </button>
              <div class="table-ctx-dropdown table-ctx-dropdown--col" x-show="open" :style="'top:'+pos.top+'px;right:'+pos.right+'px'" @click="open = false">
                <button type="button" class="ctx-menu-item" onclick="resetColSettings('{{ module }}')">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                  Spalten zurücksetzen
                </button>
              </div>
            </div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      {% for name, item in cfg.items() %}
        {% set item_name = name %}
        {% set item_data = item %}
        {% set is_running = (module ~ ":" ~ item_name) in (running or {}) %}
        <tr class="{{ 'on' if item_data.enabled else 'off' }}" data-debug-label="list-row">
          <td class="col-name">
            {{ item_data.description or item_data.job or item_data.host or item_name }}
          </td>
          {% include module + '/partials/list_row.html' ignore missing %}
          {% if has_run_buttons | default(True) %}
          <td class="col-last-run">{{ item_data.last_run or '—' }}</td>
          {% endif %}
          {% if has_status | default(True) %}
          {% set _status = 'running' if is_running else (last_run_status(module, item_name) or item_data.last_status) %}
          <td class="col-status">{{ ui.status_inline(_status) }}</td>
          {% endif %}
          <td class="col-actions">
            <div class="table-actions" data-debug-label="table-actions">
              <div class="table-ctx-menu" data-debug-label="table-ctx-menu"
                   x-data="{open: false, pos: {top:0, right:0}, toggle(btn){ const r=btn.getBoundingClientRect(); this.pos={top: r.bottom+2, right: window.innerWidth-r.right}; this.open=!this.open; }}"
                   @click.outside="open = false">
                <button type="button" class="btn-icon" @click="toggle($el)" title="Weitere Aktionen" :class="{'active': open}">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="12" cy="19" r="1.8"/></svg>
                </button>
                <div class="table-ctx-dropdown" data-debug-label="table-ctx-dropdown" x-show="open" :style="'top:'+pos.top+'px;right:'+pos.right+'px'" @click="open = false">
                  {% for action in _card_actions %}{{ ui.card_action_button(action, item_name, item_data, container_id, loading_id) }}{% endfor %}
                  {% if extra_actions_template %}{% include extra_actions_template ignore missing %}{% endif %}
                  {% if has_edit | default(True) %}
                  {{ ui.edit_button(module=module, item=item_name, container_id=container_id, loading_id=loading_id) }}
                  {% endif %}
                  {% if has_delete | default(True) %}
                  {{ ui.delete_button(module=module, item=item_name, container_id=container_id, loading_id=loading_id, description=item_data.description or item_data.job or item_data.host or item_name) }}
                  {% endif %}
                </div>
              </div>
            </div>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% else %}
  <div class="empty-state">
    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
      <rect x="3" y="3" width="18" height="18" rx="2"/>
      <line x1="9" y1="9" x2="15" y2="9"/>
      <line x1="9" y1="12" x2="15" y2="12"/>
      <line x1="9" y1="15" x2="12" y2="15"/>
    </svg>
    <div class="empty-state-title">Keine Einträge vorhanden</div>
    <div class="empty-state-sub">Erstelle den ersten Eintrag mit „Neu"</div>
  </div>
{% endif %}
</div>{# /ds-list-table-wrap-scroll #}

{% if pagination and pagination.total_pages > 1 %}
<div class="pagination" hx-boost="false">
  <span class="pagination-info">{{ pagination.start }}–{{ pagination.end }} von {{ pagination.total }}</span>
  <div class="pagination-controls">
    <button class="btn-icon pagination-btn"
            {% if pagination.has_prev %}hx-get="{{ pagination.prev_url }}" hx-target="#{{ container_id }}" hx-swap="innerHTML"{% else %}disabled{% endif %}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
    </button>
    {% for p in pagination.pages %}
      {% if p.num == "…" %}
        <span class="pagination-ellipsis">…</span>
      {% else %}
        <button class="pagination-page {{ 'active' if p.active else '' }}"
                {% if not p.active %}hx-get="{{ p.url }}" hx-target="#{{ container_id }}" hx-swap="innerHTML"{% endif %}>
          {{ p.num }}
        </button>
      {% endif %}
    {% endfor %}
    <button class="btn-icon pagination-btn"
            {% if pagination.has_next %}hx-get="{{ pagination.next_url }}" hx-target="#{{ container_id }}" hx-swap="innerHTML"{% else %}disabled{% endif %}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
    </button>
  </div>
</div>
{% endif %}

</div>

</div>{# /x-data #}