{#
  core/ui/templates/partials/components/ui_macros.html
  Generische UI-Makros – AstrapiFlaskUi V3

  Standard-URL-Konventionen:
    CRUD:    POST /api/{module}/{item}/run
    Debug:   POST /api/{module}/{item}/run?debug=true
    Logs:    GET  /api/{module}/{item}/logs
#}

{% macro edit_button(module=None, item=None, container_id=None, loading_id=None) %}
  <button hx-get="/ui/{{ module }}/{{ item }}/edit?container_id={{ container_id }}&loading_id={{ loading_id }}"
    hx-target="body" hx-swap="beforeend" class="btn-icon" title="Bearbeiten">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-edit"></use></svg>
  </button>
{% endmacro %}

{% macro delete_button(module=None, item=None, container_id=None, loading_id=None, description=None) %}
  <button hx-get="/ui/{{ module }}/{{ item }}/delete?container_id={{ container_id }}&loading_id={{ loading_id }}&description={{ description }}"
    hx-target="body" hx-swap="beforeend" class="btn-icon btn-icon-danger" title="Löschen">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-trash"></use></svg>
  </button>
{% endmacro %}

{% macro toggle_switch(module=None, item=None, container_id=None, loading_id=None, enabled=False, description=None) %}
  <button hx-get="/ui/{{ module }}/{{ item }}/toggle?container_id={{ container_id }}&loading_id={{ loading_id }}&description={{ description }}&enabled={{ enabled }}"
    hx-target="body" hx-swap="beforeend"
    class="toggle-switch {{ 'toggle-on' if enabled else 'toggle-off' }}"
    title="{{ 'Deaktivieren' if enabled else 'Aktivieren' }}">
    <span class="toggle-knob"></span>
  </button>
{% endmacro %}

{% macro toggle_button(module=None, item=None, container_id=None, loading_id=None, enabled=False, description=None) %}
  {{ toggle_switch(module=module, item=item, container_id=container_id, loading_id=loading_id, enabled=enabled, description=description) }}
{% endmacro %}

{% macro add_button(module=None, container_id=None, loading_id=None) %}
  <button
    hx-get="/ui/{{ module }}/create?container_id={{ container_id }}&loading_id={{ loading_id }}"
    hx-target="body" hx-swap="beforeend"
    class="btn btn-primary btn-sm" title="Neu"
  >
    Neu
  </button>
{% endmacro %}

{% macro status_inline(status) %}
  {% set _s = status | lower if status else '' %}
  {% if _s == 'ok' %}
    <span class="badge-pill badge-status-ok">OK</span>
  {% elif _s == 'error' %}
    <span class="badge-pill badge-status-err"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>Fehler</span>
  {% elif _s == 'warning' %}
    <span class="badge-pill badge-status-warn"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2L2 20h20L12 2z"/></svg>Warnung</span>
  {% elif _s == 'running' or _s == 'building' %}
    <span class="badge-pill badge-status-running"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="animation:spin 1s linear infinite;flex-shrink:0"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>läuft</span>
  {% elif _s == 'pending' %}
    <span class="badge-pill badge-status-none"><span style="animation:pulse 1.2s infinite;line-height:1">●</span>Pending</span>
  {% elif _s %}
    <span class="badge-pill badge-status-none">{{ status }}</span>
  {% else %}
    <span class="badge-pill badge-status-none">Neu</span>
  {% endif %}
{% endmacro %}

{% macro refresh_button(endpoint="/", container_id=None, loading_id=None) %}
  <button
    hx-get="{{ endpoint }}/list"
    hx-target="#{{ container_id }}" hx-swap="innerHTML"
    hx-indicator="#{{ loading_id }}"
    class="btn-icon" title="Aktualisieren"
  >
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-refresh-lg"></use></svg>
  </button>
{% endmacro %}

{# ── Runnable-Modul-Makros ────────────────────────────────────────────────── #}
{# Standard-Konvention: POST /api/{module}/{item}/run[?debug=true]            #}
{#                       GET  /api/{module}/{item}/logs                        #}

{% macro run_button(module=None, item=None, container_id=None, enabled=True) %}
  <button
    hx-post="/api/{{ module }}/{{ item }}/run"
    hx-target="#{{ container_id }}" hx-swap="innerHTML"
    hx-headers='{"HX-Request": "true"}'
    class="btn-icon btn-icon-run"
    title="{{ 'Ausführen' if enabled else 'Deaktiviert – nur Debug-Run möglich' }}"
    {% if not enabled %}disabled{% endif %}
  >
    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-play"></use></svg>
  </button>
{% endmacro %}

{% macro run_debug_button(module=None, item=None, container_id=None) %}
  <button
    hx-post="/api/{{ module }}/{{ item }}/run?debug=true"
    hx-target="#{{ container_id }}" hx-swap="innerHTML"
    hx-headers='{"HX-Request": "true"}'
    class="btn-icon btn-icon-debug"
    title="Ausführen (Debug)"
  >
    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-play-debug"></use></svg>
  </button>
{% endmacro %}


{% macro settings_button(module=None) %}
  <button
    hx-get="/ui/{{ module }}/settings"
    hx-target="body" hx-swap="beforeend"
    class="btn-icon" title="Einstellungen"
  >
    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-settings"></use></svg>
  </button>
{% endmacro %}

{% macro log_button(module=None, item=None) %}
  <button
    hx-get="/api/{{ module }}/{{ item }}/logs"
    hx-target="body" hx-swap="beforeend"
    class="btn-icon btn-icon-log"
    title="Log anzeigen"
  >
    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-file-text"></use></svg>
  </button>
{% endmacro %}

{# ── Modal-Standard-Komponenten ──────────────────────────────────────────── #}
{#                                                                            #}
{# Jedes Modal soll denselben Aufbau haben:                                   #}
{#   1. modal_wrapper  – Backdrop + innere Box (Außenstruktur)                #}
{#   2. modal_title    – Icon + Überschrift (Header)                          #}
{#   3. Inhalt         – Formular, Text, Karten …                             #}
{#   4. modal_footer   – Toggle + Abbrechen/Speichern (Standard)              #}
{#      oder modal_footer_simple – nur ein Schließen-Button                   #}
{#                                                                            #}
{# Verwendung mit modal_wrapper:                                              #}
{#   {% call modal_wrapper("mein-modal", max_width="580px") %}               #}
{#     {{ modal_title(title="Titel", icon="edit") }}                          #}
{#     <!-- Inhalt -->                                                        #}
{#     {{ modal_footer(save_label="Speichern") }}                             #}
{#   {% endcall %}                                                            #}

{#
  modal_wrapper(id, max_width, padding)
  Rendert Backdrop + innere Modal-Box.  Inhalt via {% call %}-Block.
    id        – HTML-ID des Backdrop-Elements (ganzer Modal)
    max_width – CSS max-width der inneren Box   (default: "620px")
    padding   – CSS padding der inneren Box     (default: "28px 32px")
#}
{% macro modal_wrapper(id, max_width="620px", padding="28px 32px") %}
<div id="{{ id }}" class="ds-modal-backdrop">
  <div class="ds-modal" style="max-width:{{ max_width }}; padding:{{ padding }};">
    {{ caller() }}
  </div>
</div>
{% endmacro %}

{#
  modal_title(title, icon, is_edit)
  Rendert den Header eines Modals.
    title   – Anzeigetext
    icon    – 'edit' | 'create' | 'settings' | 'log' | 'bell' | 'warning' | 'info' | 'none'
    is_edit – veraltet: Kurzform für icon='edit' (True) / icon='create' (False)
#}
{% macro modal_title(title='', icon=None, is_edit=False) %}
<div class="ds-modal-title">
  {{ title }}
</div>
<button type="button" class="ds-modal-close" onclick="closeModal(this)">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-close"></use></svg>
</button>
{% endmacro %}

{#
  modal_footer(enabled, enabled_id, save_label, save_disabled, has_toggle, save_id, save_type)
  Rendert den Standard-Footer eines Modals (Toggle + Abbrechen + Speichern).
    enabled       – bool: aktueller Toggle-Zustand
    enabled_id    – HTML-ID der versteckten Checkbox
    save_label    – Text für den Speichern-Button
    save_disabled – bool: Speichern-Button deaktivieren
    has_toggle    – bool: Toggle anzeigen (default True)
    save_id       – optionale HTML-ID für den Speichern-Button
    save_type     – "submit" (default) oder "button" (bei JS-Validierung)
#}
{% macro modal_footer(enabled=True, enabled_id='modal-enabled', save_label='Speichern',
                      save_disabled=False, has_toggle=True, save_id=None, save_type='submit') %}
<div class="ds-modal-footer"
     {% if not has_toggle %}style="justify-content:flex-end;"{% endif %}>
  {% if has_toggle %}
  <label class="toggle-field">
    <input type="hidden" name="enabled" value="0">
    <input type="checkbox" name="enabled" value="1" id="{{ enabled_id }}"
           style="display:none;" {{ 'checked' if enabled else '' }}>
    <button type="button"
            class="toggle-switch {{ 'toggle-on' if enabled else 'toggle-off' }}"
            onclick="
              var cb = document.getElementById('{{ enabled_id }}');
              cb.checked = !cb.checked;
              this.classList.toggle('toggle-on', cb.checked);
              this.classList.toggle('toggle-off', !cb.checked);
              this.nextElementSibling.textContent = cb.checked ? 'Aktiviert' : 'Deaktiviert';
            "
    ><span class="toggle-knob"></span></button>
    <span class="toggle-field-label">{{ 'Aktiviert' if enabled else 'Deaktiviert' }}</span>
  </label>
  {% endif %}
  <div class="modal-actions">
    <button type="button" class="btn btn-ghost btn-sm"
            onclick="closeModal(this)">
      Abbrechen
    </button>
    <button type="{{ save_type }}" class="btn btn-primary btn-sm"
            {% if save_id %}id="{{ save_id }}"{% endif %}
            {% if save_disabled %}disabled{% endif %}>
      {{ save_label }}
    </button>
  </div>
</div>
{% endmacro %}

{#
  modal_footer_simple(close_label)
  Rendert einen einfachen Footer mit nur einem Schließen-Button (z. B. Log-Modal).
    close_label – Beschriftung des Schließen-Buttons (default: "Schließen")
#}
{% macro modal_footer_simple(close_label="Schließen") %}
<div class="ds-modal-footer-simple">
  <button type="button" class="btn btn-ghost btn-sm"
          onclick="closeModal(this)">
    {{ close_label }}
  </button>
</div>
{% endmacro %}

{#
  icon(name)
  Rendert ein inline-SVG anhand des Icon-Namens (13×13 px).
  Wird von card_action_button() und extern verwendet.
  Bekannte Namen: search, bar-chart, play, bug, file-text, terminal,
                  external-link, info, refresh
#}
{% macro icon(name) -%}
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-{{ name }}"></use></svg>
{%- endmacro %}

{#
  card_action_button(action, item, item_data, container_id, loading_id)
  Rendert einen Card-Footer-Button aus einer card_actions-Eintragsdefinition.
  action – Dict aus modul.yaml card_actions:
    title           – Tooltip
    icon            – Icon-Name (siehe icon()-Makro)
    style           – optional: 'run', 'debug', 'log', 'danger' → btn-icon-{style}
    hx_get          – HTMX GET-URL  (alternativ zu hx_post)
    hx_post         – HTMX POST-URL (alternativ zu hx_get)
    hx_headers      – HTMX-Headers als JSON-String
    hx_target       – HTMX-Target (default: #main-content)
    hx_swap         – HTMX-Swap (default: innerHTML)
    hx_push_url     – HTMX push-url
    disabled_if_off – bool: Button deaktivieren wenn item_data.enabled=false
  Platzhalter in URLs und hx_target: {item}, {description},
                                     {container_id}, {loading_id}
#}
{% macro card_action_button(action, item, item_data={}, container_id='', loading_id='') %}
{%- if not action.show_if_field or item_data.get(action.show_if_field) -%}
{%- set _subs = [
    ('{item}',         item | string),
    ('{description}',  item_data.description | default(item | string)),
    ('{container_id}', container_id | string),
    ('{loading_id}',   loading_id   | string),
] -%}
{%- macro _sub(s) -%}
  {%- set ns = namespace(v=s) -%}
  {%- for k, v in _subs %}{%- set ns.v = ns.v | replace(k, v) -%}{%- endfor -%}
  {{- ns.v -}}
{%- endmacro -%}
<button class="btn-icon{% if action.style %} btn-icon-{{ action.style }}{% endif %}"
        title="{{ action.title }}"
        {% if action.hx_get  %}hx-get="{{  _sub(action.hx_get)  }}"{% endif %}
        {% if action.hx_post %}hx-post="{{ _sub(action.hx_post) }}"{% endif %}
        {% if action.hx_headers %}hx-headers='{{ action.hx_headers }}'{% endif %}
        hx-target="{{ _sub(action.hx_target | default('#main-content')) }}"
        hx-swap="{{ action.hx_swap | default('innerHTML') }}"
        {% if action.hx_push_url %}hx-push-url="{{ _sub(action.hx_push_url) }}"{% endif %}
        {% if action.disabled_if_off and not item_data.enabled %}disabled{% endif %}>
  {{ icon(action.icon) }}
</button>
{%- endif %}
{% endmacro %}