stage

// src/components/patterns/stage/stage.html.twig

{% set button_classes = "Stage-button Tracking--stageButton" %}
{% if center_button_mobile %}
  {% set button_classes = button_classes ~ " Stage-button--centered" %}
{% endif %}

<section class="Stage js-Stage
  {%- if x_position%} Stage--{{ x_position }}{% endif -%}
  {%- if small%} Stage--small{% endif -%}
  {%- if tenant %} Stage--{{ tenant }}{% endif -%}
  {%- if endpoint_url %} Stage--withDonationForm{% endif -%}
  {%- if endpoint_url and donation_bar_bottom %} Stage--donationBarBottom{% endif -%}
">
  <div class="Stage-container u-grid u-container">
    <div class="Stage-image">
      {{ image|raw }}
      {% if image_copyright %}
        <span class="Stage-copyright Stage-copyright--{{ x_position ?? "left" }} u-typo-copy-small">{{ image_copyright|german_quotes }}</span>
      {% endif %}
    </div>
    <div class="Stage-info{% if small and y_position %} Stage-info--{{ y_position }}{% endif %}">
      <div class="Stage-text">
        <h1 class="Stage-headline">
          {% if tenant and tenant == "kids" %}
            {% include "@elements/icon/icon.html.twig" with {
              name: "decoration-stage-desktop",
              class: "Stage-decoration--desktop",
            } only %}
          {% endif %}
          <span class="Stage-headlineMarker">{{ headline|raw }}</span>
        </h1>
        {% if not small %}
          {% if (tenant and tenant == "kids") and (subline or copy) and not button %}
            <div class="Stage-decorationHolder--text">
          {% endif %}
          {% if subline %}
            <p class="Stage-subline u-typo-big-copy-subline{% if italic_subline %} Stage-subline--italic{% endif %}">{{ subline|german_quotes }}</p>
          {% endif %}
          {% if copy %}
            <div class="Stage-copy">{{ copy|raw }}</div>
          {% endif %}
          {% if (tenant and tenant == "kids") and (subline or copy) and not button %}
            {% include "@elements/icon/icon.html.twig" with {
              name: "decoration-stage-mobile",
              class: "Stage-decoration--mobile",
            } only %}
            </div>
          {% endif %}
        {% endif %}
        {% if button %}
          {% set merged_button = button|merge({
            class: button_classes,
            tenant: tenant
          }) %}
          {% if tenant and tenant == "kids" %}
            <div class="Stage-decorationHolder--button">
          {% endif %}
          {% include "@elements/button/button.html.twig" with merged_button only %}
          {% if endpoint_url %}
            <a href="{{ button.url }}" class="u-brandLink u-typo-copy-bold Stage-link">{{ button.label }}</a>
          {% endif %}
          {% if tenant and tenant == "kids" %}
            {% include "@elements/icon/icon.html.twig" with {
              name: "decoration-stage-mobile",
              class: "Stage-decoration--mobile",
            } only %}
              </div>
          {% endif %}
        {% endif %}
        {% if share %}
          {% include "@elements/share/share.html.twig" with share|merge({
            class: "Stage-share"
          }) only %}
        {% endif %}
      </div>
    </div>
    {% if endpoint_url and not small %}
      <form action="{{ endpoint_url }}" class="Stage-form js-Stage-form" method="get">
        {# this link is only relevant for SEO reasons. Please do not delete #}
        <a href="{{ endpoint_url }}" aria-hidden="true" class="u-hiddenVisually">Jetzt spenden</a>
        {% include "@patterns/form/payment/payment-amount/payment-amount.html.twig" with {
          interval: payment_amount.interval,
          amount: payment_amount.amount,
          hidden_fields: payment_amount.hidden,
          is_drupal_form: TRUE,
        } only %}
        {{ submit_button }}
      </form>
    {% endif %}
  </div>
</section>