// src/components/patterns/stage/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /template-components/stage
additionalProperties: false
required:
  - headline
  - image
properties:
  image:
    type: string
    format: html
  image_copyright:
    type: string
  headline:
    type: string
    format: html
  subline:
    type: string
  copy:
    type: string
    format: html
  button:
    $ref: /elements/button
  small:
    type: boolean
  x_position:
    type: string
    enum:
      - left
      - right
  y_position:
    type: string
    enum:
      - top
      - bottom
  tenant:
    type: string
  share:
    $ref: /elements/share
  form_headline:
    type: string
  endpoint_url:
    type: string
    format: uri-reference
  payment_amount:
    $ref: /patterns/form/payment/payment-amount
  submit_button:
    $ref: /fsk/form/form-element

// src/components/patterns/stage/mocks.yaml

headline: >-
  Hier steht eine <span class="Stage-supporter is-hidden"></span> längere
  Headline mit drei Zeilen Textinhalt
subline: Das ist eine optionale Subline.
copy: >-
  <p>Nisi ullamco tempor tempor nulla labore ad labore sit eu duis. Ut et esse
  cupidatat consequat ea exercitation. Nisi ullamco tempor tempor nulla labore
  ad labore sit eu duis. Ut et esse cupidatat cons.</p>
image:
  $ref: elements/image#stage
  $tpl: elements/image
  id: 30
button:
  label: Weitere Infos zu Meeren
  url: '#url'
$variants:
  - $name: Stage with copyright
    image_copyright: © Erika Musterfrau
  - $name: Stage with text right
    x_position: right
    image:
      id: 31
  - $name: Small Stage with text left top
    small: true
    y_position: top
    x_position: left
    image:
      $ref: elements/image#stage-small
      id: 32
  - $name: Small Stage with text left bottom
    small: true
    y_position: bottom
    x_position: left
    image:
      $ref: elements/image#stage-small
      id: 33
  - $name: Small Stage with text right top
    small: true
    y_position: top
    x_position: right
    image:
      $ref: elements/image#stage-small
      id: 34
  - $name: Small Stage with text right bottom
    small: true
    y_position: bottom
    x_position: right
    image:
      $ref: elements/image#stage-small
      id: 35
  - $name: Stage with Share
    share:
      $ref: /elements/share
      url: https://random.url
  - $name: Stage Kids
    tenant: kids
  - $name: Stage Kids with Share
    tenant: kids
    share:
      $ref: /elements/share
      url: https://random.url
  - $name: Stage with long word
    headline: >-
      Hier steht eine <span class="Stage-supporter is-hidden"></span> längere
      Headline mit langem Honorificabilitudin
    copy: >-
      <p>Nisi ullamco tempor tempor nulla Honoificabilitudin labore ad labore
      sit eu duis. Ut et esse cupidatat consequat ea exercitation. Nisi ullamco
      tempor tempor nulla labore ad labore sit eu duis. Ut et esse cupidatat
      cons.</p>
  - $name: with donation form
    x_position: right
    form_headline: Ja, ich bin dabei und unterstütze Greenpeace e.V.
    payment_amount:
      interval:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: Stage-interval js-Stage-interval
        legend:
          title: Ich unterstütze Greenpeace
        children:
          $tpl: '@fsk/form/radios'
          $ref: '@fsk/form/radios'
          layout: row
          children:
            $render:
              - $tpl: '@fsk/form/form-element'
                $ref: '@fsk/form/form-element#radio'
                attributes:
                  class: FskFormElement--switcher
                label:
                  title: Monatlich
                  attributes:
                    for: input2
                children:
                  attributes:
                    name: spendenbetrag[interval_count]
                    id: input2
                    value: 1
                    class: FskRadio--switcher
                    checked: true
              - $tpl: '@fsk/form/form-element'
                $ref: '@fsk/form/form-element#radio'
                attributes:
                  class: FskFormElement--switcher
                label:
                  title: Einmalig
                  attributes:
                    for: input100
                children:
                  attributes:
                    name: spendenbetrag[interval_count]
                    id: input100
                    value: 0
                    class: FskRadio--switcher
      amount:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: Stage-amount js-Stage-amount
        legend:
          title: mit einem Betrag von
        children:
          $render:
            - $tpl: '@fsk/form/radios'
              $ref: '@fsk/form/radios'
              layout: row
              children:
                $render:
                  - $tpl: '@fsk/form/form-element'
                    $ref: '@fsk/form/form-element#radio'
                    label:
                      title: 20€
                      attributes:
                        for: input20
                    children:
                      attributes:
                        name: spendenbetrag[amount]
                        id: input20
                        value: 20
                  - $tpl: '@fsk/form/form-element'
                    $ref: '@fsk/form/form-element#radio'
                    label:
                      title: 60€
                      attributes:
                        for: input60
                    children:
                      attributes:
                        name: spendenbetrag[amount]
                        id: input60
                        value: 60
                        checked: true
                  - $tpl: '@fsk/form/form-element'
                    $ref: '@fsk/form/form-element#radio'
                    label:
                      title: 120€
                      attributes:
                        for: input120
                    children:
                      attributes:
                        name: spendenbetrag[amount]
                        id: input120
                        value: 120
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#input'
              placeholder: Ihr Betrag
              label:
                title: 'anderer Betrag:'
              children:
                attributes:
                  placeholder: Ihr Betrag
    submit_button:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#submit'
        attributes:
          class: Stage-buttonHolder
        children:
          $tpl: '@fsk/form/form-element/input/input--submit'
          $ref: '@fsk/form/form-element/input/input--submit'
          modifiers:
            - donation
          attributes:
            class: Stage-button
            value: Jetzt spenden
    endpoint_url: url

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

<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 -%}
">
  <div class="Stage-container u-grid u-container">
    <div class="Stage-image">
      {{ image|raw }}
      {% if image_copyright %}
        <span class="Stage-copyright u-typo-copy-small">{{ image_copyright }}</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">{{ subline }}</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: "Stage-button Tracking--stageButton",
            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">
        <p class="Stage-formHeadline u-typo-headline6">{{ form_headline }}</p>
        {# 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>