teaser-body

// src/components/patterns/donation-teaser/teaser-body/teaser-body.html.twig

{#
  Attention: form elements with all relevant classes will be rendered by Drupal and passed as rendered html strings.
  The form tag in this template is needed only for miyagi.
#}

{# set new headline class if copy_for_one_time_doubling is present #}
{% set has_description = copy_for_one_time|default('')|trim is not empty or copy_for_other_intervals|default('')|trim is not empty %}
{% set show_arrow = not copy_for_one_time_doubling and has_description %}
{% set headline_class = show_arrow ? '' : 'TeaserBody-headline--noSpacing' %}

{% if not is_drupal_form %}
<form>
{% endif %}
  <div class="TeaserBody js-TeaserBody js-PaymentAmount{% if use_slider %} TeaserBody--slider{% endif %}">
    <div class="TeaserBody-topRow">
      {# The following <div> is populated with a paragraph via JS with the proper copy text.
         Only render when Einmalig/Dauerhaft Beschreibung fields have actual content. #}
      {% if show_arrow %}
        <div
          data-copy-for-one-time="{{ copy_for_one_time }}"
          data-copy-for-other-intervals="{{ copy_for_other_intervals }}"
          class="TeaserBody-copy js-TeaserBody-copy u-typo-copy"
          aria-live="polite"
        ></div>
        {% include "@elements/icon/icon.html.twig" with {
          name: "green-arrow",
          class: "TeaserBody-arrow",
        } only %}
      {% endif %}

      <p class="TeaserBody-headline u-typo-headline6 {{ headline_class }}">{{ headline }}</p>
    </div>

    <div class="TeaserBody-middleRow">
      <div class="TeaserBody-intervalWrapper js-DonationTeaser-interval{% if has_flyout %} PaymentAmount-intervalHolder js-PaymentAmount-intervalHolder{% if has_flyout_open %} is-flyoutOpened{% endif %}{% endif %}">
        {{ interval|raw }}
        {% if has_flyout %}
          {% include "@elements/flyout/flyout.html.twig" with {
            class: "PaymentAmount-flyout js-PaymentAmount-flyout",
            has_flyout_open: has_flyout_open,
          } only %}
        {% endif %}
      </div>

      {% if use_slider %}
        <div
          class="TeaserBody-sliderWrapper js-TeaserBody-slider"
          data-slider-config='{{ slider_config }}'
        >
          <div class="TeaserBody-sliderRow">
            <button
              type="button"
              class="TeaserBody-sliderBtn TeaserBody-sliderBtn--minus js-TeaserBody-sliderMinus"
              aria-label="Betrag verringern"
            >
              {% include "@elements/icon/icon.html.twig" with {
                name: "minus",
                class: "TeaserBody-sliderBtnIcon",
              } only %}
            </button>

            <div class="TeaserBody-sliderTrack">
              <input
                type="range"
                class="TeaserBody-sliderInput js-TeaserBody-sliderInput"
                min="{{ slider_default_min }}"
                max="{{ slider_default_max }}"
                value="{{ slider_default_value }}"
                step="1"
                aria-label="Spendenbetrag"
                aria-valuemin="{{ slider_default_min }}"
                aria-valuemax="{{ slider_default_max }}"
                aria-valuenow="{{ slider_default_value }}"
                aria-valuetext="{{ slider_default_value }}€"
              >
              <span class="TeaserBody-sliderBubble js-TeaserBody-sliderBubble" role="status" aria-live="polite">
                {{ slider_default_value }}€
              </span>
            </div>

            <button
              type="button"
              class="TeaserBody-sliderBtn TeaserBody-sliderBtn--plus js-TeaserBody-sliderPlus"
              aria-label="Betrag erhöhen"
            >
              {% include "@elements/icon/icon.html.twig" with {
                name: "plus",
                class: "TeaserBody-sliderBtnIcon",
              } only %}
            </button>
          </div>

          <div class="TeaserBody-sliderLabels">
            <span class="TeaserBody-sliderMin js-TeaserBody-sliderMin">{{ slider_default_min }}€</span>
            <span class="TeaserBody-sliderMax js-TeaserBody-sliderMax">{{ slider_default_max }}€</span>
          </div>

        </div>
      {% endif %}

      {% if use_slider %}
        <div class="TeaserBody-amountRow">
          <div class="TeaserBody-amountWrapper js-DonationTeaser-amount">
            {{ amount|raw }}
          </div>
          <div class="TeaserBody-sliderNudge js-TeaserBody-sliderNudge" hidden aria-live="polite">
            Sie möchten noch mehr bewirken? Geben Sie hier Ihren Wunschbetrag ein.
          </div>
        </div>
      {% else %}
        <div class="TeaserBody-amountWrapper js-DonationTeaser-amount">
          {{ amount|raw }}
        </div>
      {% endif %}
    </div>

    {% if donation_examples %}
      <div
        class="TeaserBody-examples js-PaymentAmount-examples"
        aria-live="polite"
        id="{{ donation_examples.id }}"
      >
        {% for example in donation_examples.items %}
          {{ example|raw }}
        {% endfor %}
      </div>
    {% endif %}

    {% if copy_for_one_time_doubling %}
      {# The following <span> and <div> is populated via JS with the proper copy text #}
      <div class="TeaserBody-copy TeaserBody-copy--doubling">
        <p class="TeaserBody-doublingHeadlineWrapper">
          <span class="TeaserBody-doubleHeartWrapper js-TeaserBody-doubleHeartWrapper">
            {% include "@elements/icon/icon.html.twig" with {
              name: "double-heart",
              class: "TeaserBody-doubleHeart",
            } only %}
          </span>
          <span class="js-TeaserBody-doublingHeadline u-typo-headline5" aria-live="polite"></span>
        </p>

        <div
          data-copy-for-one-time-doubling="{{ copy_for_one_time_doubling }}"
          data-copy-for-other-intervals-doubling="{{ copy_for_other_intervals_doubling }}"
          data-headline-one-time-doubling="{{ headline_one_time_doubling }}"
          data-headline-other-intervals-doubling="{{ headline_other_intervals_doubling }}"
          class="js-TeaserBody-copy u-typo-copy"
          aria-live="polite"
        ></div>
      </div>
    {% endif %}

    <div class="TeaserBody-bottomRow">
      {{ submit_button }}

      <div class="TeaserBody-checks">
        <div class="TeaserBody-check">
          {% include "@elements/icon/icon.html.twig" with {
            name: "check-circle",
          } only %}
          <p class="u-typo-copy-small">Jederzeit kündbar - ohne Frist</p>
        </div>

        <div class="TeaserBody-check">
          {% include "@elements/icon/icon.html.twig" with {
            name: "check-circle",
          } only %}
          <p class="u-typo-copy-small">Steuerlich absetzbar</p>
        </div>
      </div>

      <div class="TeaserBody-paymentMethods">
        <span class="TeaserBody-paymentWrapper">
          {% include "@elements/icon/icon.html.twig" with {
            name: "paypal",
            class: "TeaserBody-PaymentMethod",
          } only %}
        </span>

        <span class="TeaserBody-paymentWrapper">
          {% include "@elements/icon/icon.html.twig" with {
            name: "visa",
            class: "TeaserBody-PaymentMethod",
          } only %}
        </span>

        <span class="TeaserBody-paymentWrapper">
          {% include "@elements/icon/icon.html.twig" with {
            name: "mastercard",
            class: "TeaserBody-PaymentMethod",
          } only %}
        </span>

        <span class="TeaserBody-paymentWrapper">
          <span class="TeaserBody-paymentText">Lastschrift</span>
        </span>
      </div>
    </div>

    {% if hidden_fields %}
      {% for field in hidden_fields %}
        {{ field }}
      {% endfor %}
    {% endif %}
  </div>
{% if not is_drupal_form %}
</form>
{% endif %}

{% if dialog_id is defined %}
  {% include "@elements/dialog/dialog.html.twig" with {
    id: dialog_id,
    dialog_headline: dialog_headline,
    dialog_subline: dialog_subline,
    dialog_copy: dialog_copy,
    dialog_button: dialog_button,
    dialog_image: dialog_image,
    is_open: false,
  } only %}
{% endif %}