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

{% block title %}{% trans "Onboarding-Anfrage" %}{% endblock %}

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

{% block pre_shell %}
<div id="saved-popup" class="popup-backdrop {% if saved %}show{% endif %}">
    <div class="popup">
      <h3>{% trans "Anfrage gespeichert" %}</h3>
      <p>{% blocktrans trimmed with request_id=saved_request_id %}Onboarding wurde erfolgreich gespeichert (ID: {{ request_id }}). Das PDF wird im Hintergrund erzeugt.{% endblocktrans %}</p>
      <button class="btn btn-secondary" type="button" onclick="document.getElementById('saved-popup').classList.remove('show')">{% trans "Schließen" %}</button>
    </div>
  </div>
{% endblock %}

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

    <div class="shell-body">
      <aside class="panel">
<h1>{% trans "Onboarding" %}</h1>
<p class="sub">{% trans "Mehrseitiges Formular mit konfigurierbaren Feldern aus dem Admin." %}</p>
      <ol class="step-list">
        {% for section in onboarding_sections %}
          <li class="step-item {% if forloop.first %}active{% endif %}" data-nav-step="{{ forloop.counter }}" role="button" tabindex="0" aria-label="{{ section.title }}">
            <span class="dot">{{ forloop.counter }}</span>
            <div>
              <div class="step-title">{{ section.title }}</div>
              <div class="step-sub">{{ section.subtitle }}</div>
            </div>
          </li>
        {% endfor %}
      </ol>
    </aside>

      <main class="main">
      {% if form.errors %}
<div class="error-banner">{% trans "Bitte prüfen Sie die markierten Felder. Ungültige Eingaben wurden erkannt." %}</div>
      {% endif %}

      <form method="post" id="onboarding-form" enctype="multipart/form-data" data-email-domain="{{ portal_email_domain }}">
        {% csrf_token %}

        {% for section in onboarding_sections %}
          <section class="page {% if forloop.first %}active{% endif %}" data-step="{{ forloop.counter }}">
            <div class="section-card section-{{ section.key }}">
              <div class="section-head">
                <h2>{{ section.title }}</h2>
                <p>{{ section.subtitle }}</p>
              </div>
              <div class="grid-2">
                {% for block in section.blocks %}
                  {% if block.kind == 'field' %}
                    {% with field=block.field %}
                      {% if field.is_hidden %}
                        {{ field }}
                      {% elif field.name in onboarding_inline_checks %}
                        <div class="field inline-check field-full {% if section.key == 'abschluss' %}finish-check{% endif %}">
                          {{ field }} {{ field.label_tag }}
                          {% if field.help_text %}<div class="hint">{{ field.help_text }}</div>{% endif %}
                          {{ field.errors }}
                        </div>
                      {% elif section.key == 'itsetup' and field.name in onboarding_checkbox_lists %}
                        <div class="itsetup-checklist-panel field-full">
                          <div class="itsetup-checklist-head">
                            <h3>{{ field.label }}</h3>
                            <button
                              type="button"
                              class="checklist-toggle-btn"
                              data-checklist-toggle
                              data-label-select="{% trans 'Alle auswählen' %}"
                              data-label-clear="{% trans 'Auswahl aufheben' %}"
                            >{% trans "Alle auswählen" %}</button>
                          </div>
                          <div class="itsetup-checklist-body">
                            {{ field }}
                            {% if field.help_text %}<div class="hint">{{ field.help_text }}</div>{% endif %}
                            {{ field.errors }}
                          </div>
                        </div>
                      {% else %}
                        <div class="field {% if section.key == 'abschluss' %}finish-field{% endif %} {% if field.name in onboarding_checkbox_lists or field.name == 'gender' or field.name == 'additional_hardware_needed_choice' or field.name == 'additional_software_needed_choice' or field.name == 'additional_access_needed_choice' or field.name == 'successor_required_choice' %}field-full{% endif %} {% if field.name in onboarding_checkbox_lists %}checkbox-list{% endif %} {% if section.key == 'itsetup' and field.name in onboarding_checkbox_lists %}itsetup-checklist-block{% endif %}">
                          {{ field.label_tag }}
                          {{ field }}
                          {% if field.help_text %}<div class="hint">{{ field.help_text }}</div>{% endif %}
                          {{ field.errors }}
                        </div>
                      {% endif %}
                    {% endwith %}
                  {% else %}
                    <div id="{{ block.id }}" class="field-group field-full {% if block.hidden_default %}hidden{% endif %}">
                      <div class="grid-2">
                        {% for field in block.fields %}
                          {% if field.is_hidden %}
                            {{ field }}
                          {% elif field.name in onboarding_inline_checks %}
                            <div class="field inline-check field-full {% if section.key == 'abschluss' %}finish-check{% endif %}">
                              {{ field }} {{ field.label_tag }}
                              {% if field.help_text %}<div class="hint">{{ field.help_text }}</div>{% endif %}
                              {{ field.errors }}
                            </div>
                          {% elif section.key == 'itsetup' and field.name in onboarding_checkbox_lists %}
                            <div class="itsetup-checklist-panel field-full">
                              <div class="itsetup-checklist-head">
                                <h3>{{ field.label }}</h3>
                                <button
                                  type="button"
                                  class="checklist-toggle-btn"
                                  data-checklist-toggle
                                  data-label-select="{% trans 'Alle auswählen' %}"
                                  data-label-clear="{% trans 'Auswahl aufheben' %}"
                                >{% trans "Alle auswählen" %}</button>
                              </div>
                              <div class="itsetup-checklist-body">
                                {{ field }}
                                {% if field.help_text %}<div class="hint">{{ field.help_text }}</div>{% endif %}
                                {{ field.errors }}
                              </div>
                            </div>
                          {% else %}
                            <div class="field {% if section.key == 'abschluss' %}finish-field{% endif %} {% if field.name in onboarding_checkbox_lists or field.name == 'gender' or field.name == 'additional_hardware_needed_choice' or field.name == 'additional_software_needed_choice' or field.name == 'additional_access_needed_choice' or field.name == 'successor_required_choice' %}field-full{% endif %} {% if field.name in onboarding_checkbox_lists %}checkbox-list{% endif %} {% if section.key == 'itsetup' and field.name in onboarding_checkbox_lists %}itsetup-checklist-block{% endif %}">
                              {{ field.label_tag }}
                              {{ field }}
                              {% if field.help_text %}<div class="hint">{{ field.help_text }}</div>{% endif %}
                              {{ field.errors }}
                            </div>
                          {% endif %}
                        {% endfor %}
                      </div>
                    </div>
                  {% endif %}
                {% endfor %}
                {% if not section.blocks %}
<div class="field field-full empty-step">{% trans "Keine konfigurierten Felder in diesem Schritt." %}</div>
                {% endif %}

                {% if section.key == 'abschluss' %}
                  <div class="field-full finish-note">
                    {% trans "Fast geschafft. Bitte Abschlussdaten prüfen und die Anfrage absenden." %}
                  </div>
                  <div class="field-full">
                    <div class="legal">{{ legal_text }}</div>
                  </div>
                {% endif %}
              </div>
            </div>
          </section>
        {% endfor %}

        <div class="actions">
<button class="btn btn-secondary" type="button" id="btn-prev">{% trans "Zurück" %}</button>
<button class="btn btn-primary" type="button" id="btn-next">{% trans "Weiter" %}</button>
<button type="submit" id="btn-submit" class="btn btn-primary hidden" data-loading-label="{% trans 'Wird gesendet...' %}">{% trans "Onboarding-Anfrage absenden" %}</button>
        </div>
      </form>
      </main>
    </div>
  </div>
{% endblock %}

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