{% extends 'workflows/base_shell.html' %}
{% load static i18n %}
{% get_current_language as CURRENT_LANGUAGE %}

{% block title %}{% trans "Form Builder" %}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'workflows/css/form_builder.css' %}" />
{% endblock %}

{% block shell_body %}
{% include 'workflows/includes/app_header.html' with header_show_home=1 header_inside_shell=1 %}

    <div class="builder-workspace app-workspace">
      <aside class="builder-sidebar app-sidebar">
        <div class="builder-sidebar-card app-sidebar-card">
          <span class="builder-sidebar-eyebrow app-sidebar-eyebrow">{% trans "Arbeitsbereich" %}</span>
          <h2>{% trans "Formularsteuerung" %}</h2>
        </div>

        <nav class="builder-side-nav app-side-nav" aria-label="{% trans 'Builder Navigation' %}">
          <a class="builder-side-link app-side-link{% if active_module == 'structure' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=structure">
            <span class="builder-side-link-title app-side-link-title">{% trans "Struktur & Reihenfolge" %}</span>
            <span class="builder-side-link-meta app-side-link-meta">{{ columns|length }} {% trans "Abschnitte" %}</span>
          </a>
          <a class="builder-side-link app-side-link{% if active_module == 'section-rules' or active_module == 'field-rules' or active_module == 'conditional-rules' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=field-rules">
            <span class="builder-side-link-title app-side-link-title">{% trans "Sichtbarkeit & Regeln" %}</span>
            <span class="builder-side-link-meta app-side-link-meta">{{ builder_summary.hidden_field_count }} {% trans "ausgeblendet" %}</span>
          </a>
          <a class="builder-side-link app-side-link{% if active_module == 'options' or active_module == 'field-texts' or active_module == 'custom-sections' or active_module == 'custom-fields' or active_module == 'preview' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=options">
            <span class="builder-side-link-title app-side-link-title">{% trans "Optionen & Texte" %}</span>
            <span class="builder-side-link-meta app-side-link-meta">{{ builder_summary.custom_field_count }} {% trans "eigene Felder" %}</span>
          </a>
        </nav>

        <div class="builder-sidebar-card builder-sidebar-stats app-sidebar-card app-sidebar-stats">
          <div class="builder-side-stat app-side-stat">
            <strong>{{ builder_summary.configurable_field_count }}</strong>
            <span>{% trans "konfigurierbare Felder" %}</span>
          </div>
          <div class="builder-side-stat app-side-stat">
            <strong>{{ builder_summary.custom_section_count }}</strong>
            <span>{% trans "eigene Abschnitte" %}</span>
          </div>
          <div class="builder-side-stat app-side-stat">
            <strong>{{ builder_summary.custom_field_count }}</strong>
            <span>{% trans "eigene Felder" %}</span>
          </div>
        </div>
      </aside>

      <main class="builder-main">
    <section class="builder-hero">
      <div class="builder-hero-copy">
        <span class="builder-eyebrow">{% trans "Deployment Configuration" %}</span>
        <h1>{% trans "Form Builder" %}</h1>
      </div>
      <div class="builder-hero-actions">
        <form method="post" action="{% url 'set_language' %}" class="builder-lang-switch">
          {% csrf_token %}
          <input type="hidden" name="next" value="{{ request.get_full_path }}" />
          <button class="builder-lang-btn {% if CURRENT_LANGUAGE == 'de' %}active{% endif %}" type="submit" name="language" value="de">DE</button>
          <button class="builder-lang-btn {% if CURRENT_LANGUAGE == 'en' %}active{% endif %}" type="submit" name="language" value="en">EN</button>
        </form>
        {% for key, label in form_types %}
          <a
            class="tab {% if form_type == key %}active{% endif %}"
            href="/admin-tools/form-builder/?form_type={{ key }}"
          >
            {{ label }}
          </a>
        {% endfor %}
        <button id="save-order" class="btn btn-primary" type="button">{% trans "Reihenfolge speichern" %}</button>
      </div>
    </section>

    {% include 'workflows/includes/messages.html' %}

    <div id="status-message" class="status" aria-live="polite"></div>

    <section class="builder-panel builder-module-surface{% if active_module != 'structure' %} builder-module-hidden{% endif %}" id="builder-structure">
      <div class="builder-panel-body builder-panel-body-static">
        <div class="builder-panel-head">
          <div class="builder-panel-copy">
            <h2>{% trans "Struktur & Reihenfolge" %}</h2>
            <p class="builder-panel-sub">{% trans "Ordnen Sie Abschnitte und Felder in der Reihenfolge, in der sie im Formular erscheinen sollen." %}</p>
          </div>
        </div>

        <div class="structure-workspace">
          <div class="structure-canvas">
            <nav class="structure-section-nav" aria-label="{% trans 'Abschnitte' %}">
              {% for column in columns %}
              <a class="structure-section-pill{% if active_structure_section == column.key %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=structure&structure_section={{ column.key }}">
                <span class="structure-section-pill-index">{{ forloop.counter }}</span>
                <span class="structure-section-pill-copy">
                  <strong>{{ column.title }}</strong>
                  <span>{% blocktrans trimmed with count=column.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
                </span>
              </a>
              {% endfor %}
            </nav>

            <div class="columns structure-columns-single" id="builder-columns" data-form-type="{{ form_type }}">
              {% for column in columns %}
              {% if active_structure_section == column.key %}
              <section class="column is-active" data-column-key="{{ column.key }}">
                <div class="column-head">
                  <div>
                    <h3>{{ column.title }}</h3>
                    <span class="column-count">{% blocktrans trimmed with count=column.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
                  </div>
                  <span class="builder-panel-count">{% trans "Geöffnet" %}</span>
                </div>
                <div class="dropzone" data-column-key="{{ column.key }}">
                  {% for item in column.items %}
                  <article class="field-card" draggable="true" data-field-name="{{ item.field_name }}">
                    <div class="field-main">
                      <div class="field-label">{{ item.label }}</div>
                      <div class="field-name">{{ item.field_name }}</div>
                    </div>
                    <div class="badges">
                      {% if item.is_custom %}<span class="badge">{% trans "Eigen" %}</span>{% endif %}
                      {% if item.locked %}<span class="badge locked">{% trans "Fix" %}</span>{% endif %}
                      {% if not item.is_visible %}<span class="badge hidden">{% trans "Ausgeblendet" %}</span>{% endif %}
                      {% if item.is_required %}<span class="badge required">{% trans "Pflicht" %}</span>{% endif %}
                    </div>
                  </article>
                  {% empty %}
                  <div class="structure-empty">{% trans "Noch keine Felder in diesem Abschnitt." %}</div>
                  {% endfor %}
                </div>
              </section>
              {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="builder-panel builder-module-surface{% if active_module != 'section-rules' and active_module != 'field-rules' and active_module != 'conditional-rules' %} builder-module-hidden{% endif %}" id="builder-rules">
      <div class="builder-panel-body builder-panel-body-static">
        <div class="builder-panel-head">
          <div class="builder-panel-copy">
            <h2>{% trans "Sichtbarkeit & Regeln" %}</h2>
            <p class="builder-panel-sub">{% trans "Legen Sie fest, welche Teile sichtbar, erforderlich oder regelgesteuert sein sollen." %}</p>
          </div>
          <div class="builder-panel-meta">
            <span class="builder-panel-count">{{ builder_summary.hidden_field_count }} {% trans "ausgeblendet" %}</span>
            <span class="builder-panel-count">{{ builder_summary.hidden_section_count }} {% trans "versteckte Abschnitte" %}</span>
          </div>
        </div>

      <nav class="builder-module-nav app-module-nav" aria-label="{% trans 'Regelmodule' %}">
        <a class="builder-module-link app-module-link{% if active_module == 'section-rules' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=section-rules">{% trans "Abschnitte" %}</a>
        <a class="builder-module-link app-module-link{% if active_module == 'field-rules' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=field-rules">{% trans "Feldregeln" %}</a>
        {% if form_type == 'onboarding' %}
        <a class="builder-module-link app-module-link{% if active_module == 'conditional-rules' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=conditional-rules">{% trans "Bedingte Logik" %}</a>
        {% endif %}
      </nav>

      <div class="builder-stack-layout">
        {% if active_module == 'section-rules' %}
        <section class="options-panel builder-module-card custom-fields-surface">
          <div class="module-card-body">
            <div class="options-head">
              <div class="options-copy">
                <h2>{% trans "Abschnitte steuern" %}</h2>
                <p class="options-sub">{% trans "Reihenfolge und Sichtbarkeit der Formularabschnitte." %}</p>
              </div>
              <div class="builder-panel-meta">
                <span class="builder-panel-count">{{ section_rule_items|length }} {% trans "Abschnitte" %}</span>
              </div>
            </div>
          <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
            {% csrf_token %}
            <div class="section-rule-grid" id="section-rule-grid">
              {% for section in section_rule_items %}
              <article
                class="section-rule-card{% if section.locked %} is-locked{% endif %}"
                data-section-key="{{ section.key }}"
              >
                <input type="hidden" name="section_order" value="{{ section.key }}" />
                <div class="section-rule-order">{{ forloop.counter }}</div>
                <div class="section-rule-actions">
                  <button class="section-move-btn" type="button" data-move-section="up" aria-label="{% trans 'Nach oben' %}" title="{% trans 'Nach oben' %}">
                    <span aria-hidden="true">↑</span>
                  </button>
                  <button class="section-move-btn" type="button" data-move-section="down" aria-label="{% trans 'Nach unten' %}" title="{% trans 'Nach unten' %}">
                    <span aria-hidden="true">↓</span>
                  </button>
                </div>
                <div class="section-rule-copy">
                  <strong>{{ section.display_title }}</strong>
                  <div class="builder-inline-meta">
                    <span class="builder-meta-chip">{% blocktrans trimmed with count=section.field_count %}{{ count }} Feld/Felder{% endblocktrans %}</span>
                    {% if section.locked %}
                    <span class="builder-meta-chip">{% trans "Fixer Abschnitt" %}</span>
                    {% endif %}
                  </div>
                </div>
                <div class="section-rule-toggle">
                  <label class="section-rule-checkbox">
                    <input
                      type="checkbox"
                      name="section_visible_{{ section.key }}"
                      {% if section.is_visible %}checked{% endif %}
                      {% if section.locked %}disabled{% endif %}
                    />
                  </label>
                  <span class="badge {% if section.is_visible %}required{% else %}hidden{% endif %}">
                    {% if section.locked %}{% trans "Fix" %}
                    {% elif section.is_visible %}{% trans "Sichtbar" %}
                    {% else %}{% trans "Ausgeblendet" %}{% endif %}
                  </span>
                </div>
              </article>
              {% endfor %}
            </div>
            <div class="options-actions options-actions-sticky">
              <button class="btn btn-primary" type="submit" name="builder_action" value="save_section_rules">{% trans "Abschnittsregeln speichern" %}</button>
            </div>
          </form>
          </div>
        </section>
        {% elif active_module == 'field-rules' %}

        <section class="options-panel builder-module-card">
          <div class="module-card-body">
            <div class="options-head">
              <div class="options-copy">
                <h2>{% trans "Feldregeln verwalten" %}</h2>
                <p class="options-sub">{% trans "Steuern Sie Sichtbarkeit und Pflichtstatus für einzelne Felder." %}</p>
              </div>
              <div class="builder-panel-meta">
                <span class="builder-panel-count">{{ builder_summary.configurable_field_count }} {% trans "konfigurierbar" %}</span>
              </div>
            </div>
          <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
            {% csrf_token %}
            <input type="hidden" name="field_rules_section" value="{{ active_field_rules_section }}" />
            <nav class="structure-section-nav" aria-label="{% trans 'Feldregel-Abschnitte' %}">
              {% for group in field_rule_groups %}
              <a class="structure-section-pill{% if active_field_rules_section == group.key %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=field-rules&field_rules_section={{ group.key }}">
                <span class="structure-section-pill-copy">
                  <strong>{{ group.title }}</strong>
                  <span>{% blocktrans trimmed with count=group.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
                </span>
              </a>
              {% endfor %}
            </nav>
            <div class="field-rule-groups">
              {% for group in field_rule_groups %}
              {% if active_field_rules_section == group.key %}
              <section class="field-rule-group">
                <div class="field-rule-group-head">
                  <h3>{{ group.title }}</h3>
                  <span class="column-count">{% blocktrans trimmed with count=group.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
                </div>
                <div class="field-rule-list">
                  {% for item in group.items %}
                  <div class="field-rule-row">
                    <div class="field-rule-main">
                      <input type="hidden" name="field_rule_ids" value="{{ item.id }}" />
                      <strong>{{ item.label }}</strong>
                      <div class="field-rule-summary">{{ item.summary }}</div>
                      <div class="field-rule-meta">
                        <span class="entity-meta">{{ item.field_name }}</span>
                        <div class="field-rule-status field-rule-status-inline">
                          {% if item.locked %}
                          <span class="badge locked">{% trans "Fix" %}</span>
                          {% elif not item.is_visible %}
                          <span class="badge hidden">{% trans "Ausgeblendet" %}</span>
                          {% elif item.is_required %}
                          <span class="badge required">{% trans "Pflicht" %}</span>
                          {% else %}
                          <span class="badge">{% trans "Flexibel" %}</span>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                    <div class="field-rule-settings">
                      <label class="field-rule-control field-rule-control-compact">
                        <span>{% trans "Sichtbar" %}</span>
                        <input type="checkbox" name="is_visible_{{ item.id }}" {% if item.is_visible %}checked{% endif %} {% if item.locked %}disabled{% endif %}/>
                      </label>
                      <label class="field-rule-control field-rule-control-compact">
                        <span>{% trans "Pflicht" %}</span>
                        <select name="is_required_{{ item.id }}" {% if item.locked %}disabled{% endif %}>
                          <option value="" {% if item.is_required is None %}selected{% endif %}>{% trans "Standard" %}</option>
                          <option value="required" {% if item.is_required is True %}selected{% endif %}>{% trans "Pflicht" %}</option>
                          <option value="optional" {% if item.is_required is False %}selected{% endif %}>{% trans "Optional" %}</option>
                        </select>
                      </label>
                    </div>
                  </div>
                  {% empty %}
                  <div class="mini">{% trans "Keine Feldregeln verfügbar." %}</div>
                  {% endfor %}
                </div>
              </section>
              {% endif %}
              {% endfor %}
            </div>
            <div class="options-actions options-actions-sticky">
              <button class="btn btn-primary" type="submit" name="builder_action" value="save_field_rules">{% trans "Feldregeln speichern" %}</button>
            </div>
          </form>
          </div>
        </section>
        {% elif form_type == 'onboarding' and active_module == 'conditional-rules' %}

        <section class="options-panel builder-module-card">
          <div class="module-card-body">
            <div class="options-head">
              <div class="options-copy">
                <h2>{% trans "Bedingte Logik" %}</h2>
                <p class="options-sub">{% trans "Lassen Sie Felder abhängig von anderen Antworten ein- oder ausblenden." %}</p>
              </div>
              <div class="builder-panel-meta">
                <span class="builder-panel-count">{{ conditional_rule_items|length }} {% trans "Regeln" %}</span>
              </div>
            </div>
          <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
            {% csrf_token %}
            <input type="hidden" name="conditional_target" value="{{ active_conditional_target }}" />
            <nav class="structure-section-nav" aria-label="{% trans 'Bedingte Regeln' %}">
              {% for item in conditional_rule_items %}
              <a class="structure-section-pill{% if active_conditional_target == item.target_key %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=conditional-rules&conditional_target={{ item.target_key }}">
                <span class="structure-section-pill-copy">
                  <strong>{{ item.title }}</strong>
                  <span>{% blocktrans trimmed with count=item.target_fields|length %}{{ count }} Ziel-Feld/Felder{% endblocktrans %}</span>
                </span>
              </a>
              {% endfor %}
            </nav>
            <div class="conditional-rule-grid">
              {% for item in conditional_rule_items %}
              {% if active_conditional_target == item.target_key %}
              <section class="conditional-rule-card">
                <div class="conditional-rule-head">
                  <div class="conditional-rule-head-main">
                    <div class="conditional-rule-title-row">
                      <span class="conditional-rule-eyebrow">{% trans "Sichtbarkeit" %}</span>
                      <h3>{{ item.title }}</h3>
                    </div>
                    <div class="conditional-rule-target-inline">
                      <span class="conditional-target-label">{% trans "Steuert" %}</span>
                      <div class="conditional-target-chips">
                        {% for field_name in item.target_fields %}
                        <span class="preview-chip">{{ field_name }}</span>
                        {% empty %}
                        <span class="mini">{% trans "Keine Ziel-Felder." %}</span>
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                  <label class="conditional-toggle">
                    <span>{% trans "Aktiv" %}</span>
                    <input type="checkbox" name="conditional_active_{{ item.target_key }}" {% if item.is_active %}checked{% endif %} />
                  </label>
                </div>
                <div class="conditional-meta-grid">
                  <div class="conditional-rule-summary">
                    <span class="conditional-summary-prefix">{% trans "Sichtbar, wenn" %}</span>
                    <div class="conditional-summary-text">{{ item.summary }}</div>
                  </div>
                  <div class="conditional-rule-state">
                    <span class="conditional-summary-prefix">{% trans "Status" %}</span>
                    <strong>{% if item.is_active %}{% trans "Aktiv" %}{% else %}{% trans "Inaktiv" %}{% endif %}</strong>
                    {% if item.description %}
                    <span class="mini">{{ item.description }}</span>
                    {% endif %}
                  </div>
                </div>
                <div class="conditional-sentence-builder">
                  {% with first_clause=item.clauses.0 second_clause=item.clauses.1 %}
                  <div class="conditional-sentence-row">
                    <span class="conditional-sentence-label">{% trans "Zeige dieses Element, wenn" %}</span>
                    <select name="conditional_field_{{ item.target_key }}_0">
                      <option value="">{% trans "Keine" %}</option>
                      {% for value, label in item.field_choices %}
                      <option value="{{ value }}" {% if first_clause.field == value %}selected{% endif %}>{{ label }}</option>
                      {% endfor %}
                    </select>
                    <select name="conditional_operator_{{ item.target_key }}_0">
                      {% for value, label in item.operator_choices %}
                      <option value="{{ value }}" {% if first_clause.operator == value %}selected{% endif %}>{{ label }}</option>
                      {% endfor %}
                    </select>
                    <input type="text" name="conditional_value_{{ item.target_key }}_0" value="{{ first_clause.value }}" placeholder="{% trans 'Wert' %}" />
                  </div>
                  <details class="conditional-extra-clause" {% if second_clause.field %}open{% endif %}>
                    <summary>{% trans "Zusätzliche Bedingung" %}</summary>
                    <div class="conditional-sentence-row conditional-sentence-row-secondary">
                      <span class="conditional-sentence-label">{% trans "Und zusätzlich" %}</span>
                      <select name="conditional_field_{{ item.target_key }}_1">
                        <option value="">{% trans "Keine" %}</option>
                        {% for value, label in item.field_choices %}
                        <option value="{{ value }}" {% if second_clause.field == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                      </select>
                      <select name="conditional_operator_{{ item.target_key }}_1">
                        {% for value, label in item.operator_choices %}
                        <option value="{{ value }}" {% if second_clause.operator == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                      </select>
                      <input type="text" name="conditional_value_{{ item.target_key }}_1" value="{{ second_clause.value }}" placeholder="{% trans 'Wert' %}" />
                    </div>
                  </details>
                  {% endwith %}
                </div>
              </section>
              {% endif %}
              {% endfor %}
            </div>
            <div class="options-actions options-actions-sticky">
              <button class="btn btn-primary" type="submit" name="builder_action" value="save_conditional_rules">{% trans "Bedingte Logik speichern" %}</button>
            </div>
          </form>
          </div>
        </section>
        {% endif %}
      </div>
      </div>
    </section>

    <section class="builder-panel builder-module-surface{% if active_module != 'options' and active_module != 'field-texts' and active_module != 'custom-sections' and active_module != 'custom-fields' and active_module != 'preview' %} builder-module-hidden{% endif %}" id="builder-content">
      <div class="builder-panel-body builder-panel-body-static">
        <div class="builder-panel-head">
          <div class="builder-panel-copy">
            <h2>{% trans "Optionen & Texte" %}</h2>
            <p class="builder-panel-sub">{% trans "Pflegen Sie Auswahlwerte, Feldtexte und benutzerdefinierte Erweiterungen." %}</p>
          </div>
          <div class="builder-panel-meta">
            <span class="builder-panel-count">{{ builder_summary.custom_field_count }} {% trans "eigene Felder" %}</span>
            {% if form_type == 'onboarding' %}
            <span class="builder-panel-count">{{ builder_summary.custom_section_count }} {% trans "eigene Abschnitte" %}</span>
            {% endif %}
          </div>
        </div>

      <nav class="builder-module-nav app-module-nav" aria-label="{% trans 'Inhaltsmodule' %}">
        <a class="builder-module-link app-module-link{% if active_module == 'options' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=options">{% trans "Optionen" %}</a>
        <a class="builder-module-link app-module-link{% if active_module == 'field-texts' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=field-texts">{% trans "Feldtexte" %}</a>
        {% if form_type == 'onboarding' %}
        <a class="builder-module-link app-module-link{% if active_module == 'custom-sections' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=custom-sections">{% trans "Eigene Abschnitte" %}</a>
        {% endif %}
        <a class="builder-module-link app-module-link{% if active_module == 'custom-fields' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=custom-fields">{% trans "Eigene Felder" %}</a>
        <a class="builder-module-link app-module-link{% if active_module == 'preview' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=preview">{% trans "Vorschau" %}</a>
      </nav>

      <div class="builder-stack-layout">
        {% if active_module == 'options' %}
        <section class="options-panel builder-module-card">
          <div class="module-card-body">
            <div class="options-head options-head-inline">
              <form class="category-switch" method="get" action="/admin-tools/form-builder/">
                <input type="hidden" name="form_type" value="{{ form_type }}" />
                <input type="hidden" name="module" value="options" />
                <label for="option_category">{% trans "Kategorie" %}</label>
                <select id="option_category" name="option_category" onchange="this.form.submit()">
                  {% for value, label in option_categories %}
                  <option value="{{ value }}" {% if value == selected_option_category %}selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
              </form>
            </div>

            <form class="add-option-form" method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
              {% csrf_token %}
              <input type="hidden" name="builder_action" value="add_option" />
              <input type="hidden" name="category" value="{{ selected_option_category }}" />
              <input type="text" name="label" placeholder="{% trans 'Label (DE)' %}" required />
              <input type="text" name="label_en" placeholder="{% trans 'Label (EN, optional)' %}" />
              <input type="text" name="value" placeholder="{% trans 'Technischer Wert (optional)' %}" />
              <button class="btn btn-primary" type="submit">{% trans "Option hinzufügen" %}</button>
            </form>

            <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
              {% csrf_token %}
              <div class="option-card-list" id="option-table-body">
                {% for item in option_items %}
                <article class="option-row option-card" draggable="true" data-option-row="1">
                  <input type="hidden" name="option_ids" value="{{ item.id }}" />
                  <div class="option-card-head">
                    <div class="option-card-order">
                      <span class="drag-handle" title="{% trans 'Ziehen zum Sortieren' %}">⋮⋮</span>
                      <div class="option-card-title-block">
                        <strong>{{ item.label }}</strong>
                        <span class="option-card-meta">#{{ forloop.counter }}{% if item.value %} · {{ item.value }}{% endif %}</span>
                      </div>
                    </div>
                    <div class="option-card-actions">
                      <label class="option-card-toggle">
                        <input type="checkbox" name="active_{{ item.id }}" {% if item.is_active %}checked{% endif %} />
                        <span>{% trans "Aktiv" %}</span>
                      </label>
                      <button class="btn btn-secondary" type="submit" name="delete_option_id" value="{{ item.id }}" data-confirm="{% trans 'Option wirklich löschen?' %}">{% trans "Löschen" %}</button>
                    </div>
                  </div>
                  <div class="option-card-grid">
                    <label class="builder-entity-control">
                      <span>{% trans "Label (DE)" %}</span>
                      <input type="text" name="label_{{ item.id }}" value="{{ item.label }}" required />
                    </label>
                    <label class="builder-entity-control">
                      <span>{% trans "Label (EN)" %}</span>
                      <input type="text" name="label_en_{{ item.id }}" value="{{ item.label_en }}" />
                    </label>
                    <label class="builder-entity-control">
                      <span>{% trans "Wert" %}</span>
                      <input type="text" name="value_{{ item.id }}" value="{{ item.value }}" />
                    </label>
                  </div>
                </article>
                {% empty %}
                <div class="option-empty-state">{% trans "Keine Optionen in dieser Kategorie." %}</div>
                {% endfor %}
              </div>
              <div class="options-actions options-actions-sticky">
                <button class="btn btn-primary" type="submit" name="builder_action" value="save_options">{% trans "Optionen speichern" %}</button>
              </div>
            </form>
          </div>
        </section>
        {% elif active_module == 'field-texts' %}

        <section class="options-panel builder-module-card">
          <div class="module-card-body">
            <div class="options-head">
              <div class="options-copy">
                <h2>{% trans "Feldtexte verwalten" %}</h2>
                <p class="options-sub">{% trans "Überschreiben Sie Labels und Hilfetexte pro Feld." %}</p>
              </div>
            </div>
            <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
              {% csrf_token %}
              <input type="hidden" name="field_texts_section" value="{{ active_field_texts_section }}" />
              <nav class="structure-section-nav" aria-label="{% trans 'Feldtext-Abschnitte' %}">
                {% for group in field_text_groups %}
                <a class="structure-section-pill{% if active_field_texts_section == group.key %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=field-texts&field_texts_section={{ group.key }}">
                  <span class="structure-section-pill-copy">
                    <strong>{{ group.title }}</strong>
                    <span>{% blocktrans trimmed with count=group.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
                  </span>
                </a>
                {% endfor %}
              </nav>
              <div class="field-text-card-list">
                {% for group in field_text_groups %}
                {% if active_field_texts_section == group.key %}
                {% for item in group.items %}
                <article class="field-text-card">
                  <input type="hidden" name="field_ids" value="{{ item.id }}" />
                  <div class="field-text-card-head">
                    <div>
                      <strong>{{ item.label_override|default:item.field_name }}</strong>
                      <div class="entity-meta">{{ item.field_name }}</div>
                    </div>
                  </div>
                  <div class="field-text-card-grid">
                    <label class="builder-entity-control">
                      <span>{% trans "Label (DE)" %}</span>
                      <input type="text" name="label_override_{{ item.id }}" value="{{ item.label_override }}" placeholder="{% trans 'Fallback: Standardlabel' %}" />
                    </label>
                    <label class="builder-entity-control">
                      <span>{% trans "Label (EN)" %}</span>
                      <input type="text" name="label_override_en_{{ item.id }}" value="{{ item.label_override_en }}" placeholder="{% trans 'English label' %}" />
                    </label>
                    <label class="builder-entity-control">
                      <span>{% trans "Hilfetext (DE)" %}</span>
                      <input type="text" name="help_text_override_{{ item.id }}" value="{{ item.help_text_override }}" placeholder="{% trans 'Optionaler Hilfetext' %}" />
                    </label>
                    <label class="builder-entity-control">
                      <span>{% trans "Hilfetext (EN)" %}</span>
                      <input type="text" name="help_text_override_en_{{ item.id }}" value="{{ item.help_text_override_en }}" placeholder="{% trans 'Optional English help text' %}" />
                    </label>
                  </div>
                </article>
                {% empty %}
                <div class="builder-empty-state">{% trans "Keine Feldkonfigurationen verfügbar." %}</div>
                {% endfor %}
                {% endif %}
                {% endfor %}
              </div>
              <div class="options-actions options-actions-sticky">
                <button class="btn btn-primary" type="submit" name="builder_action" value="save_field_texts">{% trans "Feldtexte speichern" %}</button>
              </div>
            </form>
          </div>
        </section>
        {% elif form_type == 'onboarding' and active_module == 'custom-sections' %}

        <section class="options-panel builder-module-card">
          <div class="module-card-body">
            <div class="options-head">
              <div class="options-copy">
                <h2>{% trans "Eigene Abschnitte" %}</h2>
                <p class="options-sub">{% trans "Erweitern Sie den Workflow um eigene inhaltliche Blöcke." %}</p>
              </div>
              <div class="builder-panel-meta">
                <span class="builder-panel-count">{{ builder_summary.custom_section_count }} {% trans "eigene Abschnitte" %}</span>
              </div>
            </div>
            <form class="builder-entity-form" method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
              {% csrf_token %}
              <input type="hidden" name="builder_action" value="add_custom_section" />
              <div class="builder-entity-head">
                <div>
                  <h3>{% trans "Abschnitt hinzufügen" %}</h3>
                  <p class="mini">{% trans "Erstellen Sie zusätzliche Bereiche für deployment-spezifische Informationen." %}</p>
                </div>
              </div>
              <div class="builder-entity-grid">
                <label class="builder-entity-control">
                  <span>{% trans "Titel (DE)" %}</span>
                  <input type="text" name="custom_section_title" required />
                </label>
                <label class="builder-entity-control">
                  <span>{% trans "Titel (EN)" %}</span>
                  <input type="text" name="custom_section_title_en" />
                </label>
                <label class="builder-entity-control builder-entity-control-narrow">
                  <span>{% trans "Sortierung" %}</span>
                  <input type="number" name="custom_section_sort_order" min="0" value="0" />
                </label>
              </div>
              <div class="options-actions">
                <button class="btn btn-primary" type="submit">{% trans "Abschnitt hinzufügen" %}</button>
              </div>
            </form>

            <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
              {% csrf_token %}
              <div class="builder-card-list">
                {% for item in custom_section_items %}
                <article class="builder-entity-card">
                  <input type="hidden" name="custom_section_ids" value="{{ item.id }}" />
                  <div class="builder-entity-card-head">
                    <div>
                      <strong>{{ item.title }}</strong>
                      <div class="entity-meta">{{ item.section_key }}</div>
                      <div class="builder-inline-meta">
                        <span class="badge">{{ item.custom_field_count }} {% trans "Feld/Felder" %}</span>
                      </div>
                    </div>
                    <div class="builder-card-head-actions">
                      <label class="builder-switch">
                        <input type="checkbox" name="custom_section_is_active_{{ item.id }}" {% if item.is_active %}checked{% endif %} />
                        <span>{% trans "Aktiv" %}</span>
                      </label>
                      <button class="btn btn-secondary" type="submit" name="delete_custom_section_id" value="{{ item.id }}" data-confirm="{% blocktrans trimmed with count=item.custom_field_count %}Eigenen Abschnitt wirklich löschen? {{ count }} zugehörige eigene Felder werden ebenfalls entfernt.{% endblocktrans %}">{% trans "Löschen" %}</button>
                    </div>
                  </div>
                  <div class="builder-entity-grid">
                    <label class="builder-entity-control">
                      <span>{% trans "Titel (DE)" %}</span>
                      <input type="text" name="custom_section_title_{{ item.id }}" value="{{ item.title }}" required />
                    </label>
                    <label class="builder-entity-control">
                      <span>{% trans "Titel (EN)" %}</span>
                      <input type="text" name="custom_section_title_en_{{ item.id }}" value="{{ item.title_en }}" />
                    </label>
                    <label class="builder-entity-control builder-entity-control-narrow">
                      <span>{% trans "Sortierung" %}</span>
                      <input type="number" min="0" name="custom_section_sort_order_{{ item.id }}" value="{{ item.sort_order }}" />
                    </label>
                  </div>
                </article>
                {% empty %}
                <div class="builder-empty-state">{% trans "Keine eigenen Abschnitte vorhanden." %}</div>
                {% endfor %}
              </div>
              <div class="options-actions options-actions-sticky">
                <button class="btn btn-primary" type="submit" name="builder_action" value="save_custom_sections">{% trans "Abschnitte speichern" %}</button>
              </div>
            </form>
          </div>
        </section>
        {% elif active_module == 'custom-fields' %}

        <section class="options-panel builder-module-card">
          <div class="module-card-body">
            <div class="options-head">
              <div class="options-copy">
                <h2>{% trans "Eigene Felder" %}</h2>
                <p class="options-sub">{% trans "Erstellen Sie zusätzliche Eingaben innerhalb bestehender oder eigener Abschnitte." %}</p>
              </div>
              <div class="builder-panel-meta">
                <span class="builder-panel-count">{{ builder_summary.custom_field_count }} {% trans "eigene Felder" %}</span>
              </div>
            </div>
            <form class="builder-entity-form" method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
              {% csrf_token %}
              <input type="hidden" name="builder_action" value="add_custom_field" />
              <div class="builder-entity-head">
                <div>
                  <h3>{% trans "Feld hinzufügen" %}</h3>
                  <p class="mini">{% trans "Erstellen Sie zusätzliche Eingaben innerhalb eines bestehenden oder eigenen Abschnitts." %}</p>
                </div>
              </div>
              <div class="builder-entity-grid">
                <label class="builder-entity-control">
                  <span>{% trans "Label (DE)" %}</span>
                  <input type="text" name="custom_label" required />
                </label>
                <label class="builder-entity-control">
                  <span>{% trans "Label (EN)" %}</span>
                  <input type="text" name="custom_label_en" />
                </label>
                <label class="builder-entity-control">
                  <span>{% trans "Abschnitt" %}</span>
                  <select name="custom_section_key">
                    {% for group in custom_field_groups %}
                    <option value="{{ group.key }}">{{ group.title }}</option>
                    {% endfor %}
                  </select>
                </label>
                <label class="builder-entity-control">
                  <span>{% trans "Typ" %}</span>
                  <select name="custom_field_type">
                    {% for value, label in custom_field_type_choices %}
                    <option value="{{ value }}">{{ label }}</option>
                    {% endfor %}
                  </select>
                </label>
                <label class="builder-entity-control builder-entity-control-narrow">
                  <span>{% trans "Sortierung" %}</span>
                  <input type="number" name="custom_sort_order" min="0" value="0" />
                </label>
                <label class="builder-switch builder-switch-inline">
                  <input type="checkbox" name="custom_is_required" />
                  <span>{% trans "Pflichtfeld" %}</span>
                </label>
                <label class="builder-entity-control">
                  <span>{% trans "Hilfetext (DE)" %}</span>
                  <input type="text" name="custom_help_text" />
                </label>
                <label class="builder-entity-control">
                  <span>{% trans "Hilfetext (EN)" %}</span>
                  <input type="text" name="custom_help_text_en" />
                </label>
                <label class="builder-entity-control builder-entity-control-full">
                  <span>{% trans "Optionen (DE)" %}</span>
                  <textarea name="custom_select_options" rows="3" placeholder="{% trans 'Eine Option pro Zeile, optional: wert|Label' %}"></textarea>
                </label>
                <label class="builder-entity-control builder-entity-control-full">
                  <span>{% trans "Optionen (EN)" %}</span>
                  <textarea name="custom_select_options_en" rows="3" placeholder="{% trans 'Eine Option pro Zeile, optional: value|Label' %}"></textarea>
                </label>
              </div>
              <div class="options-actions">
                <button class="btn btn-primary" type="submit">{% trans "Eigenes Feld hinzufügen" %}</button>
              </div>
            </form>

            <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
              {% csrf_token %}
              <input type="hidden" name="custom_fields_section" value="{{ active_custom_fields_section }}" />
              <nav class="structure-section-nav" aria-label="{% trans 'Eigene Feld-Abschnitte' %}">
                {% for group in custom_field_groups %}
                <a class="structure-section-pill{% if active_custom_fields_section == group.key %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=custom-fields&custom_fields_section={{ group.key }}">
                  <span class="structure-section-pill-copy">
                    <strong>{{ group.title }}</strong>
                    <span>{% blocktrans trimmed with count=group.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
                  </span>
                </a>
                {% endfor %}
              </nav>
              <div class="builder-group-stack">
                {% for group in custom_field_groups %}
                {% if active_custom_fields_section == group.key %}
                <section class="builder-group-card">
                  <div class="builder-group-head">
                    <h3>{{ group.title }}</h3>
                    <span class="column-count">{% blocktrans trimmed with count=group.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
                  </div>
                  <div class="builder-card-list">
                    {% for item in group.items %}
                    <article class="builder-entity-card">
                      <input type="hidden" name="custom_field_ids" value="{{ item.id }}" />
                      <div class="builder-entity-card-head">
                        <div>
                          <strong>{{ item.label }}</strong>
                          <div class="entity-meta">{{ item.field_key }}</div>
                          <div class="builder-inline-meta">
                            <span class="builder-meta-chip">{{ group.title }}</span>
                            <span class="builder-meta-chip">{{ item.get_field_type_display }}</span>
                            <span class="builder-meta-chip">{% trans "Sortierung" %}: {{ item.sort_order }}</span>
                          </div>
                        </div>
                      <div class="builder-switch-stack">
                          <label class="builder-switch">
                            <input type="checkbox" name="custom_is_required_{{ item.id }}" {% if item.is_required %}checked{% endif %} />
                            <span>{% trans "Pflicht" %}</span>
                          </label>
                          <label class="builder-switch">
                            <input type="checkbox" name="custom_is_active_{{ item.id }}" {% if item.is_active %}checked{% endif %} />
                            <span>{% trans "Aktiv" %}</span>
                          </label>
                      </div>
                      <button class="btn btn-secondary" type="submit" name="delete_custom_field_id" value="{{ item.id }}" data-confirm="{% trans 'Eigenes Feld wirklich löschen?' %}">{% trans "Löschen" %}</button>
                    </div>
                      <div class="builder-entity-grid">
                        <label class="builder-entity-control">
                          <span>{% trans "Abschnitt" %}</span>
                          <select name="custom_section_key_{{ item.id }}">
                            {% for group_choice in custom_field_groups %}
                            <option value="{{ group_choice.key }}" {% if group_choice.key == item.section_key %}selected{% endif %}>{{ group_choice.title }}</option>
                            {% endfor %}
                          </select>
                        </label>
                        <label class="builder-entity-control">
                          <span>{% trans "Typ" %}</span>
                          <select name="custom_field_type_{{ item.id }}">
                            {% for value, label in custom_field_type_choices %}
                            <option value="{{ value }}" {% if value == item.field_type %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                          </select>
                        </label>
                        <label class="builder-entity-control builder-entity-control-narrow">
                          <span>{% trans "Sortierung" %}</span>
                          <input type="number" min="0" name="custom_sort_order_{{ item.id }}" value="{{ item.sort_order }}" />
                        </label>
                        <label class="builder-entity-control">
                          <span>{% trans "Label (DE)" %}</span>
                          <input type="text" name="custom_label_{{ item.id }}" value="{{ item.label }}" required />
                        </label>
                        <label class="builder-entity-control">
                          <span>{% trans "Label (EN)" %}</span>
                          <input type="text" name="custom_label_en_{{ item.id }}" value="{{ item.label_en }}" />
                        </label>
                        <label class="builder-entity-control">
                          <span>{% trans "Hilfetext (DE)" %}</span>
                          <input type="text" name="custom_help_text_{{ item.id }}" value="{{ item.help_text }}" />
                        </label>
                        <label class="builder-entity-control">
                          <span>{% trans "Hilfetext (EN)" %}</span>
                          <input type="text" name="custom_help_text_en_{{ item.id }}" value="{{ item.help_text_en }}" />
                        </label>
                        <label class="builder-entity-control builder-entity-control-full">
                          <span>{% trans "Optionen (DE)" %}</span>
                          <textarea name="custom_select_options_{{ item.id }}" rows="2">{{ item.select_options }}</textarea>
                        </label>
                        <label class="builder-entity-control builder-entity-control-full">
                          <span>{% trans "Optionen (EN)" %}</span>
                          <textarea name="custom_select_options_en_{{ item.id }}" rows="2">{{ item.select_options_en }}</textarea>
                        </label>
                      </div>
                    </article>
                    {% empty %}
                    <div class="builder-empty-state">{% trans "Keine eigenen Felder vorhanden." %}</div>
                    {% endfor %}
                  </div>
                </section>
                {% endif %}
                {% endfor %}
              </div>
              <div class="options-actions options-actions-sticky">
                <button class="btn btn-primary" type="submit" name="builder_action" value="save_custom_fields">{% trans "Eigene Felder speichern" %}</button>
              </div>
            </form>
          </div>
        </section>
        {% elif active_module == 'preview' %}

        <section class="options-panel builder-module-card">
          <div class="module-card-body">
            <div class="options-head">
              <div class="options-copy">
                <h2>{% trans "Live-Vorschau" %}</h2>
                <p class="options-sub">{% trans "So wirkt die aktuelle Struktur für das aktive Formular." %}</p>
              </div>
            </div>
            <div class="preview-shell preview-shell-compact">
              {% for section in preview_sections %}
              <section class="preview-section">
                <div class="preview-section-head">
                  <h3>{{ section.title }}</h3>
                  <span class="column-count">{% blocktrans trimmed with count=section.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
                </div>
                <div class="preview-chip-list">
                  {% for item in section.items %}
                  <span class="preview-chip{% if item.locked %} is-locked{% endif %}">{{ item.label }}</span>
                  {% empty %}
                  <span class="mini">{% trans "Keine sichtbaren Felder." %}</span>
                  {% endfor %}
                </div>
              </section>
              {% endfor %}
            </div>
          </div>
        </section>
        {% endif %}
      </div>
      </div>
    </section>
      </main>
    </div>

{% endblock %}

{% block extra_scripts %}
  <script src="{% static 'workflows/js/form_builder.js' %}"></script>
{% endblock %}