{#
  core/templates/partials/create_edit/create_edit_modal.html

  Variablen:
    schema       – Liste der Felder aus schema.yaml (kann type:section-Einträge enthalten)
    item         – bestehende Werte (Edit) oder None (Create)
    item_id      – ID des Items (Edit) oder None (Create)
    id_field     – Schema-Definition des ID-Feldes (nur Create, optional)
    submit_url   – Ziel-URL (POST für Create, PUT für Edit)
    method       – "post" oder "put"
    title        – Titel des Dialogs
    modal_width  – Breite des Modals in px (default: 620)
    loading_id   – HTMX-Indikator

  Schema-Felder können enthalten:
    type: section  – Gruppenüberschrift (label, cols)
    span: N        – Feld belegt N Spalten im Section-Grid
#}
{% extends "dialog_form.html" %}
{% from "partials/components/ui_macros.html" import form_group, form_input %}

{% set enabled_field = schema | selectattr('name', 'equalto', 'enabled') | list | first %}
{% set enabled_val   = (values if values is mapping else (item if item is mapping else {})).get('enabled', True) %}

{% block dialog_width %}{{ modal_width | default(620) }}{% endblock %}
{% block form_id %}create-edit-form{% endblock %}
{% block form_method %}{{ method }}{% endblock %}
{% block form_action %}{{ submit_url }}{% endblock %}
{% block form_style %}display:flex; flex-direction:column; gap:14px;{% endblock %}
{% block form_attrs %}hx-indicator="#{{ loading_id }}" onsubmit="return createEditValidate(this)"{% endblock %}

{% block dialog_body %}
  {% if prefill_template %}
  <div style="margin-bottom:14px;">{% include prefill_template %}</div>
  {% endif %}

  {% if error %}
  <div style="margin:8px 0;padding:8px 12px;border-radius:6px;
              background:var(--error-dim,#3a0000);color:var(--error,#ff6b6b);font-size:13px;">{{ error }}</div>
  {% endif %}

  {% set values = values if values is mapping else (item if item is mapping else {}) %}
  {% set render_fields = schema | rejectattr('name', 'equalto', 'enabled') | list %}
  {% set has_sections = render_fields | selectattr('type', 'equalto', 'section') | list | length > 0 %}

  {# ── ID-Feld (nur beim Anlegen) ─────────────────────────────────────── #}
  {% if id_field and not item %}
    {%- set _attrs -%}
      {%- if id_field.max %}maxlength="{{ id_field.max }}"{% endif -%}
    {%- endset -%}
    {% call form_group(id_field.label, required=True) %}
      {{ form_input(id_field.name, required=True,
                    placeholder=id_field.placeholder | default(''),
                    attrs=_attrs) }}
    {% endcall %}
  {% endif %}

  {% if has_sections %}
    {% set ns = namespace(grid_open=False, first_section=True) %}
    {% for field in render_fields %}
      {% if field.get('type') == '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 %}
        <div style="display:grid;
                    grid-template-columns:repeat({{ field.get('cols', 2) }}, 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 field_span = field.get('span', 1) %}
        {% if field_span > 1 %}
          <div style="grid-column: span {{ field_span }};">
            {% include "partials/create_edit/field_renderer.html" %}
          </div>
        {% else %}
          {% include "partials/create_edit/field_renderer.html" %}
        {% endif %}
      {% endif %}
    {% endfor %}
    {% if ns.grid_open %}</div>{% endif %}
  {% else %}
    {% set rows = render_fields | groupby("row", default=0) %}
    {% for row, fields in rows %}
      <div style="display:grid;
                  grid-template-columns:{% if fields | length == 2 and fields[1].type == 'boolean' %}1fr auto{% else %}repeat({{ fields | length }}, 1fr){% endif %};
                  gap:12px;
                  align-items:{% if fields | length == 2 and fields[1].type == 'boolean' %}end{% else %}start{% endif %};">
        {% for field in fields %}
          {% include "partials/create_edit/field_renderer.html" %}
        {% endfor %}
      </div>
    {% endfor %}
  {% endif %}
{% endblock %}

{% block dialog_footer %}
<div class="ds-modal-footer{% if not enabled_field %} ds-modal-footer--end{% endif %}">
  {% if enabled_field %}
  <label class="toggle-field">
    <input type="hidden" name="enabled" value="0">
    <input type="checkbox" name="enabled" value="1" id="modal-enabled"
           style="display:none;" {{ 'checked' if enabled_val else '' }}>
    <button type="button"
            class="toggle-switch {{ 'toggle-on' if enabled_val else 'toggle-off' }}"
            onclick="var cb=document.getElementById('modal-enabled');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_val else 'Deaktiviert' }}</span>
  </label>
  {% endif %}
  <div class="modal-actions">
    <button type="button" class="btn btn-sm btn-ghost" onclick="closeModal(this)">Abbrechen</button>
    <button type="submit" class="btn btn-sm btn-primary">{{ 'Speichern' if item else 'Erstellen' }}</button>
  </div>
</div>
{% endblock %}

{% block dialog_scripts %}
<script>
function validateField(input) {
  const errorEl  = input.parentElement.querySelector('.form-error');
  let   message  = '';
  const isRequired = input.dataset.required === 'true';
  const value      = input.value.trim();
  if (isRequired && value === '') {
    message = 'Dieses Feld ist erforderlich.';
  } else if (input.type === 'number' && value !== '') {
    const num = Number(value);
    if (isNaN(num))                                        message = 'Bitte eine gültige Zahl eingeben.';
    else if (input.min !== '' && num < Number(input.min)) message = `Mindestwert ist ${input.min}.`;
    else if (input.max !== '' && num > Number(input.max)) message = `Maximalwert ist ${input.max}.`;
  } else if (input.minLength > 0 && value.length < input.minLength) {
    message = `Mindestens ${input.minLength} Zeichen erforderlich.`;
  }
  if (errorEl) {
    errorEl.textContent = message;
    errorEl.classList.toggle('visible', message !== '');
  }
  input.classList.toggle('is-invalid', message !== '');
  return message === '';
}

function createEditValidate(form) {
  const inputs = form.querySelectorAll('input[data-required], input[type="number"], select[data-required]');
  let valid = true;
  inputs.forEach(input => { if (!validateField(input)) valid = false; });
  if (!valid) {
    const firstError = form.querySelector('.form-error.visible');
    if (firstError) firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
    return false;
  }
  return true;
}

(function () {
  const form = document.getElementById('create-edit-form');
  if (!form) return;
  form.querySelectorAll('input[data-required], input[type="number"], select[data-required]')
    .forEach(input => {
      input.addEventListener('blur',  () => validateField(input));
      input.addEventListener('input', () => { if (input.classList.contains('is-invalid')) validateField(input); });
    });
})();
</script>
{% endblock %}