motive

// src/components/patterns/motive/motive.html.twig

{% set lightbox_content %}
  {% include "@patterns/motive/motive-lightbox/motive-lightbox.html.twig" with {
    items: variants
  } only %}
{% endset %}

{% if variants|length > 10 %}
  {% set motive_size = "huge" %}
{% elseif variants|length > 8 %}
  {% set motive_size = "large" %}
{% elseif variants|length > 6 %}
  {% set motive_size = "medium" %}
{% else %}
  {% set motive_size = "small" %}
{% endif %}

<div class="Motive js-Motive Motive--{{ motive_size }}">
  <h3 class="Motive-headline u-typo-headline4">{{ headline|german_quotes }}</h3>
  <p class="Motive-copy u-typo-copy">{{ copy|german_quotes }}</p>
  <div class="Motive-variantsHolder">
    <div class="Motive-preview">
      <img
        alt="{{ variants[0].image.alt }}"
        class="Motive-image js-Motive-previewImage"
        height="{{ variants[0].image.height }}"
        src="{{ variants[0].image.src }}"
        width="{{ variants[0].image.width }}"
      >
    </div>
    <ul class="Motive-variants">
      {% for variant in variants %}
        <li class="Motive-variant">
          <input
            class="Motive-radio js-Motive-radio u-hiddenVisually"
            id="motive-variant-{{ variant.name|clean_id }}"
            name="{{ motives_name }}"
            type="radio"
            value="{{ variant.value }}"
            aria-hidden="true"
            {% if loop.index == "1" %}checked{% endif %}
          >
          <label for="motive-variant-{{ variant.name|clean_id }}" class="Motive-label js-Motive-label">
            <img
              alt="{{ variant.image.alt }}"
              class="Motive-image js-Motive-variantImage"
              height="{{ variant.image.height }}"
              src="{{ variant.image.src }}"
              width="{{ variant.image.width }}"
            >
            <span class="u-hiddenVisually">{{ variant.name }}</span>
          </label>
        </li>
      {% endfor %}
    </ul>
  </div>
  <div class="Motive-confirmation">
    {{ motive_confirmation }}
  </div>
  {{ greetings_text }}

  <div class="Motive-previewButtonHolder">
    {% include "@elements/button/button.html.twig" with {
      label: "Vorschau der Urkunde",
      class: "js-Motive-previewButton",
      icon: "eye",
      mutation: "secondary",
      target: "_blank",
      disabled: true
    } only %}
  </div>
  {% include "@elements/lightbox/lightbox.html.twig" with {
    id: lightbox.name,
    title: lightbox.title,
    rendered_content: lightbox_content,
    wide: true,
    clickable_overlay: true,
    hide_opener: true,
    class: "js-MotiveLightbox"
  } only %}
</div>