{# ==========================================================================
   Wiederverwendbare Bausteine. Import in Templates:
     {% from "tesm_core/macros.html" import field, card_header, pill, ... %}
   ========================================================================== #}

{% macro csrf(token) -%}
<input type="hidden" name="csrf_token" value="{{ token }}">
{%- endmacro %}

{% macro hint(text) -%}
{% if text %}<span class="hint-icon" tabindex="0" title="{{ text }}" aria-label="Hinweis: {{ text }}">?</span>{% endif %}
{%- endmacro %}

{% macro field(name, label, value='', type='text', required=False, hint_text='', placeholder='',
               autocomplete='', readonly=False, disabled=False, error='', extra_class='', attrs='') -%}
<label class="field {{ extra_class }}">
  <span class="field__label">
    {{ label }}{% if required %}<span class="req" aria-hidden="true">*</span>{% endif %}
    {{ hint(hint_text) }}
  </span>
  <input class="input" type="{{ type }}" name="{{ name }}" value="{{ value if value is not none else '' }}"
         {% if required %}required{% endif %}
         {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
         {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
         {% if readonly %}readonly{% endif %}
         {% if disabled %}disabled{% endif %}
         {% if error %}aria-invalid="true"{% endif %} {{ attrs | safe }}>
  {% if error %}<span class="field__error">{{ error }}</span>{% endif %}
</label>
{%- endmacro %}

{% macro select_field(name, label, options, selected='', hint_text='', required=False, disabled=False, extra_class='', attrs='') -%}
<label class="field {{ extra_class }}">
  <span class="field__label">
    {{ label }}{% if required %}<span class="req" aria-hidden="true">*</span>{% endif %}
    {{ hint(hint_text) }}
  </span>
  <select class="select" name="{{ name }}" {% if required %}required{% endif %} {% if disabled %}disabled{% endif %} {{ attrs | safe }}>
    {% for value, text in options %}
      <option value="{{ value }}" {% if value|string == selected|string %}selected{% endif %}>{{ text }}</option>
    {% endfor %}
  </select>
</label>
{%- endmacro %}

{% macro textarea_field(name, label, value='', rows=4, hint_text='', placeholder='', extra_class='', mono=False) -%}
<label class="field {{ extra_class }}">
  <span class="field__label">{{ label }}{{ hint(hint_text) }}</span>
  <textarea class="textarea {% if mono %}input--mono{% endif %}" name="{{ name }}" rows="{{ rows }}"
            {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}>{{ value or '' }}</textarea>
</label>
{%- endmacro %}

{# Ein nicht angehakter Haken sendet **nichts**. Wer die gesendeten Felder
   auswertet, sieht ihn deshalb als "nicht angegeben" -- und liess den alten
   Wert stehen: Haken raus, speichern, "keine Änderungen". Diese versteckte
   Marke sagt "dieses Feld war im Formular", der Haken selbst sagt "an".
   Damit sind alle drei Fälle unterscheidbar: an, aus, nicht Teil des
   Formulars (Teilformulare dürfen fremde Schalter nicht löschen).

   Kein ``disabled``-Fall: ein deaktivierter Haken darf auch nicht als "aus"
   gespeichert werden, also fällt die Marke dann ebenfalls weg. #}
{% macro _present(name, disabled=False) -%}
{% if not disabled %}<input type="hidden" name="{{ name }}__present" value="1">{% endif %}
{%- endmacro %}

{% macro checkbox(name, label, checked=False, value='1', hint_text='', disabled=False) -%}
<label class="check {% if disabled %}check--disabled{% endif %}">
  {{ _present(name, disabled) }}
  <input type="checkbox" name="{{ name }}" value="{{ value }}"
         {% if checked %}checked{% endif %} {% if disabled %}disabled{% endif %}>
  <span>{{ label }} {{ hint(hint_text) }}</span>
</label>
{%- endmacro %}

{% macro switch(name, label, checked=False, value='1', disabled=False) -%}
<label class="switch">
  {{ _present(name, disabled) }}
  <input type="checkbox" name="{{ name }}" value="{{ value }}"
         {% if checked %}checked{% endif %} {% if disabled %}disabled{% endif %}>
  <span>{{ label }}</span>
</label>
{%- endmacro %}

{% macro pill(label, kind='') -%}
<span class="pill {% if kind %}pill--{{ kind }}{% endif %}">{{ label }}</span>
{%- endmacro %}

{% macro badge(label) -%}<span class="badge">{{ label }}</span>{%- endmacro %}

{% macro card_header(title, sub='', icon_name='') -%}
<div class="card__header">
  <div class="flex-1">
    <div class="card__title">{% if icon_name %}{{ icon(icon_name, size=17) }}{% endif %}{{ title }}</div>
    {% if sub %}<div class="card__sub">{{ sub }}</div>{% endif %}
  </div>
  {{ caller() if caller is defined else '' }}
</div>
{%- endmacro %}

{% macro empty_state(title, text='', icon_name='info', node_id='') -%}
<div class="empty" {% if node_id %}id="{{ node_id }}"{% endif %}>
  {{ icon(icon_name, size=34) }}
  <div class="empty__title">{{ title }}</div>
  {% if text %}<p class="muted">{{ text }}</p>{% endif %}
  {{ caller() if caller is defined else '' }}
</div>
{%- endmacro %}

{% macro alert(text, kind='info', title='') -%}
<div class="alert alert--{{ kind }}">
  {{ icon({'info': 'info', 'success': 'check', 'warning': 'alert', 'danger': 'alert'}[kind], size=18) }}
  <div class="alert__body">
    {% if title %}<div class="alert__title">{{ title }}</div>{% endif %}
    {{ text }}
  </div>
</div>
{%- endmacro %}

{% macro search_box(target_id, placeholder='Suchen ...', count_id='', empty_id='') -%}
<span class="search-input">
  {{ icon('search', size=15) }}
  <input class="input" type="search" placeholder="{{ placeholder }}"
         data-filter-target="{{ target_id }}"
         {% if count_id %}data-filter-count="{{ count_id }}"{% endif %}
         {% if empty_id %}data-filter-empty="{{ empty_id }}"{% endif %}
         aria-label="{{ placeholder }}">
</span>
{%- endmacro %}

{% macro stat(label, value, kind='', hint_text='', href='', filter_value='') -%}
{% if href %}
<a class="stat {% if kind %}stat--{{ kind }}{% endif %}" href="{{ href }}">
{% elif filter_value %}
<button type="button" class="stat {% if kind %}stat--{{ kind }}{% endif %}"
        data-filter-value="{{ filter_value }}" aria-pressed="false">
{% else %}
<div class="stat {% if kind %}stat--{{ kind }}{% endif %}">
{% endif %}
  <span class="stat__label">{{ label }}</span>
  <span class="stat__value">{{ value }}</span>
  {% if hint_text %}<span class="stat__hint">{{ hint_text }}</span>{% endif %}
{% if href %}</a>{% elif filter_value %}</button>{% else %}</div>{% endif %}
{%- endmacro %}

{% macro modal(node_id, title, sub='', size='') -%}
<dialog class="modal {% if size %}modal--{{ size }}{% endif %}" id="{{ node_id }}"
        aria-labelledby="{{ node_id }}-title">
  <div class="modal__header">
    <div class="flex-1">
      <div class="modal__title" id="{{ node_id }}-title">{{ title }}</div>
      {% if sub %}<div class="modal__sub">{{ sub }}</div>{% endif %}
    </div>
    <button class="btn btn--icon btn--ghost btn--sm" type="button" data-dialog-close
            aria-label="Schliessen">{{ icon('x', size=15) }}</button>
  </div>
  {{ caller() }}
</dialog>
{%- endmacro %}

{% macro kv_row(label, value) -%}
<dt>{{ label }}</dt><dd>{{ value if value not in (None, '') else '&ndash;' | safe }}</dd>
{%- endmacro %}

{#- Rechtematrix: einmal geschrieben, in beiden Anwendungen benutzt -#}
{% macro permission_matrix(tree, action_meta, state, disabled=False, field_prefix='permissions') -%}
<div class="table-wrap">
  <table class="matrix" data-behavior="permission-matrix">
    {% for area in tree.areas %}
      {% set columns = area.columns() %}
      <thead>
        <tr>
          <th style="min-width:240px">{{ area.label }}</th>
          {% for action in columns %}
            <th title="{{ action_meta[action][1] }} &ndash; {{ action_meta[action][2] }}">
              {{ action_meta[action][0] }}
            </th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        <tr class="matrix__area">
          <td class="matrix__killswitch">
            <label class="check">
              <input type="checkbox" name="{{ field_prefix }}" value="{{ area.view_key }}"
                     data-area-switch="{{ area.key }}"
                     {% if state.get(area.key, {}).get('view') %}checked{% endif %}
                     {% if disabled %}disabled{% endif %}>
              <span>Zugang zum Bereich {{ area.label }}{% if area.hint %} {{ hint(area.hint) }}{% endif %}</span>
            </label>
          </td>
          {% for action in columns %}<td></td>{% endfor %}
        </tr>
        {% for resource in area.resources %}
          <tr data-area="{{ area.key }}">
            <td>
              <span class="matrix__resource-label">
                {{ resource.label }}
                {% if resource.hint %}<small>{{ resource.hint }}</small>{% endif %}
              </span>
            </td>
            {% for action in columns %}
              <td>
                {% if resource.has(action) %}
                  <label class="check" title="{{ resource.action_hints.get(action) or action_meta[action][2] }}">
                    <input type="checkbox" name="{{ field_prefix }}"
                           value="{{ resource.permission(action) }}"
                           data-action="{{ action.value }}"
                           {% if state.get(resource.key, {}).get(action.value) %}checked{% endif %}
                           {% if disabled %}disabled{% endif %}>
                    <span class="sr-only">{{ resource.label }} {{ action_meta[action][1] }}</span>
                  </label>
                {% else %}
                  {# Bewusst *kein* Eingabefeld: ein deaktiviertes Kästchen hat das
                     JS beim Einschalten des Bereichs wieder freigegeben, es liess
                     sich anhaken, hatte aber kein name-Attribut -- es sah erteilt
                     aus und war nach dem Speichern weg. Was es nicht gibt, ist
                     hier deshalb gar kein Bedienelement. #}
                  <span class="matrix__na" title="Für diese Zeile nicht vorgesehen."></span>
                  <span class="sr-only">nicht vorgesehen</span>
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    {% endfor %}
  </table>
</div>
<div class="matrix__legend mt-3">
  {% for action, meta in action_meta.items() %}
    <span><b>{{ meta[0] }}</b> {{ meta[1] }} &ndash; {{ meta[2] }}</span>
  {% endfor %}
  <span><span class="matrix__na"></span> Für diese Zeile nicht vorgesehen &ndash;
    die Spalte gehört zu einer anderen Zeile desselben Bereichs.</span>
</div>
{%- endmacro %}

{# --------------------------------------------------------------------------
   Navigationsreihenfolge. Die Reihenfolge der versteckten Felder ist die
   Reihenfolge -- verschiebt sich eine Zeile, verschiebt sich das Feld mit ihr.
   Ziehen mit der Maus oder die zwei Knoepfe je Zeile; auf einem Tablet sind
   die Knoepfe der verlaessliche Weg.
   -------------------------------------------------------------------------- #}
{% macro _reorder_row(item, field_name, label) -%}
<li class="reorder__row" data-reorder-item draggable="true">
  <span class="reorder__grip" aria-hidden="true">{{ icon('menu', size=14) }}</span>
  <span class="reorder__pos" data-reorder-position-text>1</span>
  <input type="hidden" name="{{ field_name }}" value="{{ item.key }}">
  <span class="flex-1">{{ icon(item.icon, size=15) }} {{ item.label }}</span>
  <span class="reorder__moves">
    <button class="btn btn--icon btn--sm" type="button" data-reorder-move="up"
            aria-label="{{ label }} nach oben">{{ icon('chevron-up', size=14) }}</button>
    <button class="btn btn--icon btn--sm" type="button" data-reorder-move="down"
            aria-label="{{ label }} nach unten">{{ icon('chevron-down', size=14) }}</button>
  </span>
</li>
{%- endmacro %}

{% macro nav_order_card(items, order, child_order, action, csrf_field, csrf_value,
                        sub='Gilt für alle Benutzer; jeder sieht weiter nur, was er darf') -%}
<section class="card">
  <div class="card__header">
    <div class="flex-1">
      <div class="card__title">{{ icon('sliders', size=17) }} Navigationsreihenfolge</div>
      <div class="card__sub">{{ sub }}</div>
    </div>
  </div>
  <form method="post" action="{{ action }}">
    <input type="hidden" name="{{ csrf_field }}" value="{{ csrf_value }}">
    <div class="card__body">
      <ol class="reorder" data-behavior="reorder">
        {% for key in order %}
          {% set item = items | selectattr('key', 'equalto', key) | list | first %}
          {% if item %}
            {{ _reorder_row(item, 'order', item.label) }}
            {% if item.children %}
              <li class="reorder__group">
                <ol class="reorder reorder--child" data-behavior="reorder">
                  {% set kinder = child_order.get(item.key) or (item.children | map(attribute='key') | list) %}
                  {% for child_key in kinder %}
                    {% set child = item.children | selectattr('key', 'equalto', child_key) | list | first %}
                    {% if child %}
                      {{ _reorder_row(child, 'child_order_' ~ item.key, item.label ~ ' / ' ~ child.label) }}
                    {% endif %}
                  {% endfor %}
                </ol>
              </li>
            {% endif %}
          {% endif %}
        {% endfor %}
      </ol>
      <p class="fs-xs faint mt-3">
        Zeilen ziehen oder mit den Pfeilen verschieben, dann speichern. Untergeordnete
        Punkte werden innerhalb ihrer Gruppe sortiert.
      </p>
    </div>
    <div class="card__footer">
      <button class="btn btn--sm" type="submit">Reihenfolge speichern</button>
    </div>
  </form>
</section>
{%- endmacro %}