Formular: Komplexes Formular

{% set id = id ??? html_id('form') %}
{% set showForm = showForm ?? true %}
{% set submitActionMessagePosition = submitActionMessagePosition ?? 'top-form' %}
{% set errorMessagePosition = errorMessagePosition ?? 'top-form' %}
{% set progressPosition = progressPosition ?? 'end' %}
{% set pages = pages ?? [] %}
{% set showTabs = showTabs ?? false %}

<div {{ html_attributes({
  id: id,
  class: 'form',
}, attrs ?? {}) }}>
  {% if submitActionMessagePosition == 'top-form' and submitActionMessage|default %}
    <div class="form__alert form__alert--success">
      {% include '@alert' with {
        type: 'success',
        text: submitActionMessage,
      } only %}
    </div>
  {% endif %}

  {% if errorMessagePosition == 'top-form' and errorMessage|default %}
    <div class="form__alert form__alert--error">
      {% include '@alert' with {
        type: 'error',
        text: errorMessage,
      } only %}
    </div>
  {% endif %}

  {% if showForm %}
    <form {{ html_attributes({
      id: 'form' | namespaceInputId(id),
      class: 'form__form',
      action: action ??? '',
      method: method ??? 'post',
      enctype: 'multipart/form-data',
      'accept-charset': 'utf-8',
    }, formAttrs ?? {}) }}>
      {{ csrf|default ? csrfInput({ autocomplete: 'false' }) }}
      {{ actionUrl|default ? actionInput(actionUrl) }}
      {{ redirectUrl|default ? redirectInput(redirectUrl) }}

      {% for name, value in hiddenInputs|default %}
        {{ value ? hiddenInput(name, value) }}
      {% endfor %}

      {% if title|default %}
        <div class="form__title">
          {% include '@headline' with {
            text: title,
            level: 2,
            size: 3,
          } only %}
        </div>
      {% endif %}

      {% if introText|default %}
        <div class="form__intro-text">
          {{ introText | componentize }}
        </div>
      {% endif %}

      {% if progressPosition == 'start' and progress|default %}
        <div class="form__progress">
          {% include '@progress' with {
            current: progress,
          } only %}
        </div>
      {% endif %}

      {# Errors #}
      {% if errors|default %}
        <div class="form__errors">
          {% include '@notice' with {
            type: 'error',
            text: errors | join('<br>'),
          } only %}
        </div>
      {% endif %}

      {# Tabs #}
      <div class="form__pages">
        {% if pages|length > 1 and showTabs %}
          <ol class="form__tabs" role="tablist">
            {% for page in pages %}
              {% set isCurrent = page.isCurrent ?? loop.first %}

              <li {{ html_attributes({
                class: {
                  'form__tab': true,
                  'form__tab--current': isCurrent,
                  'form__tab--errors': page.hasErrors ?? false,
                },
                role: 'presentation',
              }, page.tabAttrs ?? {}) }}>
                {% set tag = not isCurrent and page.url|default ? 'a' : 'span' %}
                <{{ tag }} {{ html_attributes({
                  class: ['form__tab-link', 'u-underline'],
                  href: not isCurrent and page.url|default ? page.url,
                  role: 'tab',
                  'aria-selected': isCurrent ? 'true',
                  'tabindex': isCurrent ? '0',
                }) }}>
                  {{- page.title -}}
                </{{ tag }}>
              </li>
            {% endfor %}
          </ol>
        {% endif %}

        {% for page in pages %}
          {% set isCurrent = page.isCurrent ?? loop.first %}

          <div {{ html_attributes({
            class: {
              'form__page': true,
              'form__page--current': isCurrent,
              'form__page--errors': page.hasErrors ?? false,
            },
          }) }}>
            {% if showTabs %}
              <div class="form__page-title">
                {% set tag = not isCurrent and page.url|default ? 'a' : 'span' %}
                <{{ tag }} {{ html_attributes({
                  class: ['form__page-title-link', 'u-underline'],
                  href: not isCurrent and page.url|default ? page.url,
                  'aria-selected': isCurrent ? 'true',
                  'tabindex': isCurrent ? '0',
                }) }}>
                  {{- page.title -}}
                </{{ tag }}>
              </div>
            {% endif %}

            <fieldset class="form__page-fields{{ page.hidden|default ? ' form__page-fields--hidden' }}">
              <legend {{ html_attributes({
                class: {
                  'form__page-legend': true,
                  'form__page-legend--hidden': not page.showTitle|default,
                },
              }) }}>
                {{- page.title ?? 'Form page' -}}
              </legend>

              {% for row in page.fields %}
                <div {{ html_attributes({
                  class: 'form__row',
                  hidden: row | filter(field => field.hidden|default) | length == row | length,
                }) }}>
                  {% for field in row %}
                    {% include '@field' with field | merge({
                      id: field.id | default(html_id('field')) | namespaceInputId(id),
                      formId: id,
                      attrs: field.attrs | default({}) | merge({
                        class: html_classes(field.attrs.class ?? '', 'form__field'),
                      }),
                    }) only %}
                  {% endfor %}
                </div>
              {% endfor %}

              {{ page.captchas | default('') | raw }}

              {% if submitActionMessagePosition == 'bottom-form' and submitActionMessage|default %}
                <div class="form__alert form__alert--success">
                  {% include '@alert' with {
                    type: 'success',
                    text: submitActionMessage,
                  } only %}
                </div>
              {% endif %}

              {% if errorMessagePosition == 'bottom-form' and errorMessage|default %}
                <div class="form__alert form__alert--error">
                  {% include '@alert' with {
                    type: 'error',
                    text: errorMessage,
                  } only %}
                </div>
              {% endif %}

              {% if page.buttons|default %}
                <div class="form__buttons {{ "form__buttons--#{page.buttonsPosition ?? 'right'}" }}">
                  {% for button in page.buttons %}
                    {% set buttonAction = button.action %}
                    {% set button = button | without('action') %}

                    <div {{ html_attributes({
                      class: "form__button form__button--#{buttonAction}",
                    }, button.containerAttrs ?? {}) }}>
                      {% include button.type|default == 'link' ? '@icon-button' : '@button' with button only %}
                    </div>
                  {% endfor %}
                </div>
              {% endif %}
            </fieldset>
          </div>
        {% endfor %}
      </div>

      {% if buttons|default %}
        <div class="form__buttons {{ "form__buttons--#{buttonsPosition ?? 'right'}" }}">
          {% for button in buttons %}
            {% set buttonAction = button.action %}
            {% set button = button | withoutKey('action') %}

            <div {{ html_attributes({
              class: "form__button form__button--#{buttonAction}",
            }, button.containerAttrs ?? {}) }}>
              {% include button.type|default == 'link' ? '@icon-button' : '@button' with button only %}
            </div>
          {% endfor %}
        </div>
      {% endif %}

      {% if progressPosition == 'end' and progress|default %}
        <div class="form__progress">
          {% include '@progress' with {
            current: progress,
          } only %}
        </div>
      {% endif %}
    </form>
  {% endif %}

  {% if not showForm and submitActionMessagePosition == 'bottom-form' and submitActionMessage|default %}
    <div class="form__alert form__alert--success">
      {% include '@alert' with {
        type: 'success',
        text: submitActionMessage,
      } only %}
    </div>
  {% endif %}
</div>