// src/components/patterns/donation-teaser/teaser-body/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/donation-teaser/teaser-body
additionalProperties: false
properties:
  copy_for_one_time:
    type: string
    format: html
  copy_for_other_intervals:
    type: string
    format: html
  copy_for_one_time_doubling:
    type: string
    format: html
  copy_for_other_intervals_doubling:
    type: string
    format: html
  headline_one_time_doubling:
    type: string
  headline_other_intervals_doubling:
    type: string
  headline:
    type: string
  interval:
    $ref: /fsk/form/fieldset
    format: html
  amount:
    $ref: /fsk/form/fieldset
    format: html
  is_drupal_form:
    type: boolean
  submit_button:
    $ref: /fsk/form/form-element
  dialog_id:
    type: string
  dialog_headline:
    type: string
    format: html
  dialog_subline:
    type: string
  dialog_copy:
    type: string
    format: html
  dialog_button:
    $ref: /elements/button
  dialog_image:
    type: string
    format: html
required:
  - copy_for_one_time
  - copy_for_other_intervals
  - headline
  - interval
  - amount
  - submit_button

// src/components/patterns/donation-teaser/teaser-body/mocks.yaml

is_drupal_form: false
copy_for_one_time: >-
  Durch Ihre <strong>Spende</strong> unterstützen Sie Greenpeace dabei, Umwelt-
  und Klimaschutzprojekte umzusetzen. So können wir Tieren und Menschen helfen,
  ein besseres Leben zu haben. Greenpeace finanziert sich zu 100% aus
  Privatspenden!
copy_for_other_intervals: >-
  Durch Ihre <strong>monatliche Spende</strong> unterstützen Sie Greenpeace
  dabei, Umwelt- und Klimaschutzprojekte umzusetzen. So können wir Tieren und
  Menschen helfen, ein besseres Leben zu haben. Greenpeace finanziert sich zu
  100% aus Privatspenden!
headline: Ich unterstütze Greenpeace e.V.
interval:
  $tpl: '@fsk/form/fieldset'
  $ref: '@fsk/form/fieldset'
  attributes:
    class: TeaserBody-interval
  legend:
    title: Ich unterstütze Greenpeace e.V.
  children:
    $render:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#select'
        attributes:
          class: js-TeaserBody-intervalSelect
        label:
          title: Ich unterstütze Greenpeace e.V. *
          attributes:
            for: input3
        label_display: invisible
        children:
          $tpl: '@fsk/form/form-element/input/select'
          $ref: '@fsk/form/form-element/input/select'
          options:
            - type: option
              value: 12
              label: monatlich
              selected: true
            - type: option
              value: 4
              label: vierteljährlich
            - type: option
              value: 2
              label: halbjährlich
            - type: option
              value: 1
              label: jährlich
            - type: option
              value: '0'
              label: einmalig
          attributes:
            id: input3
amount:
  $tpl: '@fsk/form/fieldset'
  $ref: '@fsk/form/fieldset'
  attributes:
    class: TeaserBody-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: 10€
                attributes:
                  for: input10
                  aria-controls: test1234
              children:
                attributes:
                  name: spendenbetrag[amount]
                  id: input10
                  value: 10
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#radio'
              label:
                title: 15€
                attributes:
                  for: input15
                  aria-controls: test1234
              children:
                attributes:
                  name: spendenbetrag[amount]
                  id: input15
                  value: 15
            - $tpl: '@fsk/form/form-element'
              $ref: '@fsk/form/form-element#radio'
              label:
                title: 40€
                attributes:
                  for: input40
                  aria-controls: test1234
              children:
                attributes:
                  name: spendenbetrag[amount]
                  id: input40
                  value: 40
                  checked: true
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#input'
        label_display: invisible
        children:
          attributes:
            class: TeaserBody-amountInput
            placeholder: oder eigener Betrag
submit_button:
  $tpl: '@elements/button'
  $ref: '@elements/button#donation-button-with-icon-left'
  label: Jetzt spenden
  icon: heart
  class: TeaserBody-submit
$variants:
  - $name: double donation
    copy_for_one_time_doubling: >-
      Vielen Dank für Ihre Unterstützung. <strong>Regelmäßige Spenden</strong>
      helfen Greenpeace am meisten. Deswegen verdoppelt eine großzügige Person
      aktuell alle regelmäßigen Spenden. Jetzt ist der perfekte Moment,
      gemeinsam doppelt so viel für unseren Planeten zu bewirken! <button
      data-dialog-id='stage-dialog' type='button' class='TeaserBody-dialogButton
      js-TeaserBody-dialogButton'><strong>Hier finden Sie mehr Infos zur
      Aktion</strong></button>.
    copy_for_other_intervals_doubling: >-
      Eine großzügige Person verdoppelt für ein Jahr Ihre <strong
      class='js-DoubleFrequency'>monatliche Spende auf 80 €</strong>. Mit <span
      class='js-DoubleAmounts'>960€ statt 480€ in 2026</span> wird aus Ihrem
      Beitrag noch mehr Schutz für Natur, Klima und Artenvielfalt. Jetzt ist der
      perfekte Moment, gemeinsam doppelt so viel für unseren Planeten zu
      bewirken! <button data-dialog-id='stage-dialog' type='button'
      class='TeaserBody-dialogButton js-TeaserBody-dialogButton'><strong>Hier
      finden Sie mehr Infos zur Aktion</strong></button>.
    headline_one_time_doubling: Jetzt Einsatz verdoppeln
    headline_other_intervals_doubling: Ihr Einsatz zählt doppelt
    dialog_id: stage-dialog
    dialog_headline: >-
      Hier steht eine <span class="Stage-supporter is-hidden"></span> längere
      Headline mit drei Zeilen Textinhalt
    dialog_subline: Das ist eine optionale Subline.
    dialog_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>
    dialog_image:
      $ref: elements/image#stage
      $tpl: elements/image
      id: 30
    dialog_button:
      label: Weitere Infos zu Meeren
      url: '#url'
  - $name: with radio buttons
    $opts:
      interval: overwrite
    interval:
      $tpl: '@fsk/form/fieldset'
      $ref: '@fsk/form/fieldset'
      attributes:
        class: js-TeaserBody-intervalRadios TeaserBody-intervalRadios
      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
                  data-text: Monatlich
              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
                  data-text: Einmalig
              children:
                attributes:
                  name: spendenbetrag[interval_count]
                  id: input100
                  value: 0
                  class: FskRadio--switcher

// 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 headline_class = copy_for_one_time_doubling is defined ? 'TeaserBody-headline--noSpacing' : '' %}

{% if not is_drupal_form %}
<form>
{% endif %}
  <div class="TeaserBody js-TeaserBody js-PaymentAmount">
    <div class="TeaserBody-topRow">
      {# The following <div> is populated with a paragraph via JS with the proper copy text #}
      {% if not copy_for_one_time_doubling %}
        <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">
        {{ interval|raw }}
      </div>
      <div class="TeaserBody-amountWrapper js-DonationTeaser-amount">
        {{ amount|raw }}
      </div>
    </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-headline6" 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>
  </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 %}