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

{% 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 %}

    <header class="header">
      <h1>{% trans "Form Builder" %}</h1>
      <p>{% trans "Felder per Drag-and-Drop sortieren und pro Schritt gruppieren." %}</p>
    </header>

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

    <div class="toolbar">
      {% 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>

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

    <div class="columns {% if form_type == 'offboarding' %}single{% endif %}" id="builder-columns" data-form-type="{{ form_type }}">
      {% for column in columns %}
      <section class="column" data-column-key="{{ column.key }}">
        <h2>{{ column.title }}</h2>
        <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.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>
          {% endfor %}
        </div>
      </section>
      {% endfor %}
    </div>

    <section class="options-panel">
      <div class="options-head">
        <h2>{% trans "Optionen verwalten" %}</h2>
        <form class="category-switch" method="get" action="/admin-tools/form-builder/">
          <input type="hidden" name="form_type" value="{{ form_type }}" />
          <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-table-wrap">
          <table class="option-table">
            <thead>
              <tr>
                <th>{% trans "Sortierung" %}</th>
                <th>{% trans "Label (DE)" %}</th>
                <th>{% trans "Label (EN)" %}</th>
                <th>Value</th>
                <th>{% trans "Aktiv" %}</th>
                <th>{% trans "Löschen" %}</th>
              </tr>
            </thead>
            <tbody id="option-table-body">
              {% for item in option_items %}
              <tr class="option-row" draggable="true" data-option-row="1">
                <td>
                  <input type="hidden" name="option_ids" value="{{ item.id }}" />
                  <span class="drag-handle" title="{% trans 'Ziehen zum Sortieren' %}">⋮⋮</span>
                </td>
                <td><input type="text" name="label_{{ item.id }}" value="{{ item.label }}" required /></td>
                <td><input type="text" name="label_en_{{ item.id }}" value="{{ item.label_en }}" /></td>
                <td><input type="text" name="value_{{ item.id }}" value="{{ item.value }}" /></td>
                <td><input type="checkbox" name="active_{{ item.id }}" {% if item.is_active %}checked{% endif %} /></td>
                <td>
                  <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>
                </td>
              </tr>
              {% empty %}
              <tr><td colspan="6">{% trans "Keine Optionen in dieser Kategorie." %}</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="options-actions">
          <button class="btn btn-primary" type="submit" name="builder_action" value="save_options">{% trans "Optionen speichern" %}</button>
        </div>
      </form>
    </section>

    <section class="options-panel">
      <div class="options-head">
        <h2>{% trans "Feldtexte verwalten" %}</h2>
      </div>
      <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
        {% csrf_token %}
        <div class="option-table-wrap">
          <table class="option-table">
            <thead>
              <tr>
                <th>{% trans "Feld" %}</th>
                <th>{% trans "Label (DE)" %}</th>
                <th>{% trans "Label (EN)" %}</th>
                <th>{% trans "Hilfetext (DE)" %}</th>
                <th>{% trans "Hilfetext (EN)" %}</th>
              </tr>
            </thead>
            <tbody>
              {% for item in field_text_items %}
              <tr>
                <td>
                  <input type="hidden" name="field_ids" value="{{ item.id }}" />
                  <strong>{{ item.field_name }}</strong>
                </td>
                <td><input type="text" name="label_override_{{ item.id }}" value="{{ item.label_override }}" placeholder="{% trans 'Fallback: Standardlabel' %}" /></td>
                <td><input type="text" name="label_override_en_{{ item.id }}" value="{{ item.label_override_en }}" placeholder="{% trans 'English label' %}" /></td>
                <td><input type="text" name="help_text_override_{{ item.id }}" value="{{ item.help_text_override }}" placeholder="{% trans 'Optionaler Hilfetext' %}" /></td>
                <td><input type="text" name="help_text_override_en_{{ item.id }}" value="{{ item.help_text_override_en }}" placeholder="{% trans 'Optional English help text' %}" /></td>
              </tr>
              {% empty %}
              <tr><td colspan="5">{% trans "Keine Feldkonfigurationen verfügbar." %}</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="options-actions">
          <button class="btn btn-primary" type="submit" name="builder_action" value="save_field_texts">{% trans "Feldtexte speichern" %}</button>
        </div>
      </form>
    </section>
{% endblock %}