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

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/donation-teaser
additionalProperties: false
required:
  - headline
  - payment_amount
  - image
properties:
  endpoint_url:
    type: string
    format: uri-reference
  headline:
    type: string
  h1_headline:
    type: boolean
  copy:
    type: string
    format: html
  payment_amount:
    $ref: /patterns/form/payment/payment-amount
  donation_examples:
    type: object
    properties:
      id:
        type: string
      items:
        type: array
        items:
          type: string
          format: html
  submit_button:
    $ref: /fsk/form/form-element
  image:
    $ref: /elements/image
  small_donation_teaser:
    type: boolean
  is_on_donation_form:
    type: boolean
  is_first_on_page:
    type: boolean
  counter_end_timestamp:
    type: string
  limited_webform_page:
    type: number
  limited_webform:
    type: string
  counter_target:
    type: number
  counter_rule_id:
    type: number
  counter_state_endpoint:
    type: string
    format: html
  progress:
    type: string

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

$hidden: true
endpoint_url: url
headline: Spenden Sie jetzt für den Umweltschutz
h1_headline: true
$variants:
  - $name: default
    copy: >-
      Denn Aktionen, Laboranalysen, Recherchen und die Öffentlichkeitsarbeit
      finanzieren wir ausschließlich durch Spenden und Förderbeiträge von
      Privatpersonen wie Ihnen. So sichern Sie unsere völlige Unabhängigkeit von
      Politik, Parteien und Industrie. Erst Ihre Spende gibt uns die
      Möglichkeit, mit Schiffen auf hoher See aufzukreuzen oder Spezialisten in
      die entlegensten Ecken unserer Erde zu schicken.
    donation_examples:
      id: test1234
      items:
        - $ref: elements/donation-example#small
          $tpl: elements/donation-example
          is_template: true
          data_attributes:
            - key: interval-dependency
              value: '0'
            - key: amount-dependency
              value: '60'
          copy:
            $tpl: elements/rte
            markup: lorem ipsum 60€.
        - $ref: elements/donation-example#small
          $tpl: elements/donation-example
          is_template: true
          data_attributes:
            - key: interval-dependency
              value: '0'
            - key: amount-dependency
              value: donate_custom_amount
          copy:
            $tpl: elements/rte
            markup: lorem ipsum custom amount.
    image:
      $tpl: elements/image
      width: 569
      height: 349
      src: https://via.placeholder.com/569x349
      alt: Alternative text
      id: '6'
      sources:
        - width: 569
          height: 349
          srcset: >-
            https://via.placeholder.com/569x349 1x,
            https://via.placeholder.com/1138x698 2x
          media: '(max-width: 35.5625rem)'
        - width: 959
          height: 588
          srcset: >-
            https://via.placeholder.com/959x588 1x,
            https://via.placeholder.com/1918x1176 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 707
          height: 970
          srcset: >-
            https://via.placeholder.com/707x970 1x,
            https://via.placeholder.com/1414x1940 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 704
          height: 718
          srcset: >-
            https://via.placeholder.com/704x718 1x,
            https://via.placeholder.com/1408x1436 2x
          media: '(min-width: 80rem)'
    payment_amount:
      has_flyout: true
      interval:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: DonationTeaser-interval js-DonationTeaser-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
                    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
      amount:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: DonationTeaser-amount js-DonationTeaser-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: 'Oder Betrag eintippen:'
              children:
                attributes:
                  placeholder: Ihr Betrag
    submit_button:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#submit'
        attributes:
          class: DonationTeaser-buttonHolder
        children:
          $tpl: '@fsk/form/form-element/input/input--submit'
          $ref: '@fsk/form/form-element/input/input--submit'
          modifiers:
            - donation
          attributes:
            class: DonationTeaser-button
            value: Ich möchte aktiv werden
  - $name: on multisteps form (with progress)
    copy: >-
      Denn Aktionen, Laboranalysen, Recherchen und die Öffentlichkeitsarbeit
      finanzieren wir ausschließlich durch Spenden und Förderbeiträge von
      Privatpersonen wie Ihnen. So sichern Sie unsere völlige Unabhängigkeit von
      Politik, Parteien und Industrie. Erst Ihre Spende gibt uns die
      Möglichkeit, mit Schiffen auf hoher See aufzukreuzen oder Spezialisten in
      die entlegensten Ecken unserer Erde zu schicken.
    donation_examples:
      id: test1234
      items:
        - $ref: elements/donation-example#small
          $tpl: elements/donation-example
          is_template: true
          data_attributes:
            - key: interval-dependency
              value: '0'
            - key: amount-dependency
              value: '60'
          copy:
            $tpl: elements/rte
            markup: lorem ipsum 60€.
        - $ref: elements/donation-example#small
          $tpl: elements/donation-example
          is_template: true
          data_attributes:
            - key: interval-dependency
              value: '0'
            - key: amount-dependency
              value: donate_custom_amount
          copy:
            $tpl: elements/rte
            markup: lorem ipsum custom amount.
    image:
      $tpl: elements/image
      width: 569
      height: 349
      src: https://via.placeholder.com/569x349
      alt: Alternative text
      id: '6'
      sources:
        - width: 569
          height: 349
          srcset: >-
            https://via.placeholder.com/569x349 1x,
            https://via.placeholder.com/1138x698 2x
          media: '(max-width: 35.5625rem)'
        - width: 959
          height: 588
          srcset: >-
            https://via.placeholder.com/959x588 1x,
            https://via.placeholder.com/1918x1176 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 707
          height: 970
          srcset: >-
            https://via.placeholder.com/707x970 1x,
            https://via.placeholder.com/1414x1940 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 704
          height: 718
          srcset: >-
            https://via.placeholder.com/704x718 1x,
            https://via.placeholder.com/1408x1436 2x
          media: '(min-width: 80rem)'
    payment_amount:
      has_flyout: true
      interval:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: DonationTeaser-interval js-DonationTeaser-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
                    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
      amount:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: DonationTeaser-amount js-DonationTeaser-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: 'Oder Betrag eintippen:'
              children:
                attributes:
                  placeholder: Ihr Betrag
    submit_button:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#submit'
        attributes:
          class: DonationTeaser-buttonHolder
        children:
          $tpl: '@fsk/form/form-element/input/input--submit'
          $ref: '@fsk/form/form-element/input/input--submit'
          modifiers:
            - donation
          attributes:
            class: DonationTeaser-button
            value: Ich möchte aktiv werden
    progress:
      $tpl: elements/progress-tracker
      $ref: elements/progress-tracker
  - $name: small
    small_donation_teaser: true
    copy: Bitte unterstützen Sie uns mit Ihrer Spende.
    image:
      $tpl: elements/image
      width: 569
      height: 310
      src: https://via.placeholder.com/569x310
      alt: Alternative text
      id: '6'
      sources:
        - width: 569
          height: 310
          srcset: >-
            https://via.placeholder.com/569x310 1x,
            https://via.placeholder.com/1138x620 2x
          media: '(max-width: 35.5625rem)'
        - width: 959
          height: 522
          srcset: >-
            https://via.placeholder.com/959x522 1x,
            https://via.placeholder.com/1918x1044 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 707
          height: 360
          srcset: >-
            https://via.placeholder.com/707x360 1x,
            https://via.placeholder.com/1414x720 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 704
          height: 254
          srcset: >-
            https://via.placeholder.com/704x254 1x,
            https://via.placeholder.com/1408x508 2x
          media: '(min-width: 80rem)'
    payment_amount:
      has_flyout: true
      interval:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: DonationTeaser-interval js-DonationTeaser-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
                    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
      amount:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: DonationTeaser-amount js-DonationTeaser-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: 'Oder Betrag eintippen:'
              children:
                attributes:
                  placeholder: Ihr Betrag
    submit_button:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#submit'
        attributes:
          class: DonationTeaser-buttonHolder
        children:
          $tpl: '@fsk/form/form-element/input/input--submit'
          $ref: '@fsk/form/form-element/input/input--submit'
          modifiers:
            - donation
          attributes:
            class: DonationTeaser-button
            value: Ich möchte aktiv werden
  - $name: As part of the donation form
    headline: Spenden Sie jetzt für den Umwelt- und Klimaschutz
    copy: >-
      Aktionen, Laboranalysen, Recherchen und Öffentlichkeitsarbeit werden
      ausschließlich durch Spenden und Förderbeiträge von Privatpersonen wie
      Ihnen finanziert. Erst Ihre Spende gibt uns die Möglichkeit, mit Schiffen
      auf hoher See aufzukreuzen oder Spezialisten in die entlegensten Ecken
      unserer Erde zu schicken.
    is_on_donation_form: true
    image:
      $tpl: elements/image
      width: 600
      height: 450
      src: https://via.placeholder.com/600x450
      alt: Alternative text
      id: '6'
      sources:
        - width: 600
          height: 450
          srcset: >-
            https://via.placeholder.com/600x450 1x,
            https://via.placeholder.com/1200x900 2x
          media: '(max-width: 35.5625rem)'
        - width: 960
          height: 720
          srcset: >-
            https://via.placeholder.com/960x720 1x,
            https://via.placeholder.com/1920x1440 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 707
          height: 530
          srcset: >-
            https://via.placeholder.com/707x530 1x,
            https://via.placeholder.com/1414x1060 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 704
          height: 528
          srcset: >-
            https://via.placeholder.com/704x528 1x,
            https://via.placeholder.com/1408x1056 2x
          media: '(min-width: 80rem)'
    payment_amount:
      has_flyout: true
      interval:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: DonationTeaser-interval js-DonationTeaser-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'
                label:
                  title: Monatlich
                  attributes:
                    for: input2
                children:
                  attributes:
                    name: spendenbetrag[interval_count]
                    id: input2
                    value: 1
                    checked: true
              - $tpl: '@fsk/form/form-element'
                $ref: '@fsk/form/form-element#radio'
                label:
                  title: Einmalig
                  attributes:
                    for: input100
                children:
                  attributes:
                    name: spendenbetrag[interval_count]
                    id: input100
                    value: 0
      amount:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: DonationTeaser-amount js-DonationTeaser-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: 'Oder Betrag eintippen:'
              children:
                attributes:
                  placeholder: Ihr Betrag
  - $name: Progressbar
    limited_webform_page: 0
    limited_webform: aktionspaket_formular_climate_em|3013
    counter_state_endpoint: /api/limited-webform-state
    counter_target: 1000
    counter_rule_id: 1225
    headline: Europas Wildnis schützen
    copy: >-
      Die Karpaten sind in Gefahr - und damit die Heimat für Bären und andere
      Wildtiere in Europa. Holzeinschlag und Straßenbau zerstören die
      einzigartigen Laubwälder um kurzfristige Profite zu machen. Bitte
      unterstützen Sie Greenpeace beim Einsatz für den Artenschutz mit Ihrer
      Spende!
    payment_amount:
      has_flyout: true
      interval:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: DonationTeaser-interval js-DonationTeaser-interval
        legend:
          title: Ja, ich bin dabei und unterstütze Greenpeace e.V.
        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
      amount:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: >-
            DonationTeaser-amount DonationTeaser-amount--progress
            js-DonationTeaser-amount
        legend:
          title: mit einem Betrag von
        legend_span:
          attributes:
            class: u-hiddenVisually
        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: 'Oder Betrag eintippen:'
              children:
                attributes:
                  placeholder: Ihr Betrag
    submit_button:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#submit'
        attributes:
          class: DonationTeaser-buttonHolder
        children:
          $tpl: '@fsk/form/form-element/input/input--submit'
          $ref: '@fsk/form/form-element/input/input--submit'
          modifiers:
            - donation
          attributes:
            class: DonationTeaser-button
            value: Jetzt spenden
    image:
      $tpl: elements/image
      width: 569
      height: 349
      src: https://via.placeholder.com/569x349
      alt: Alternative text
      id: '6'
      sources:
        - width: 569
          height: 349
          srcset: >-
            https://via.placeholder.com/569x349 1x,
            https://via.placeholder.com/1138x698 2x
          media: '(max-width: 35.5625rem)'
        - width: 959
          height: 588
          srcset: >-
            https://via.placeholder.com/959x588 1x,
            https://via.placeholder.com/1918x1176 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 500
          height: 883
          srcset: >-
            https://via.placeholder.com/500x883 1x,
            https://via.placeholder.com/1000x1766 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 496
          height: 642
          srcset: >-
            https://via.placeholder.com/496x642 1x,
            https://via.placeholder.com/992x1284 2x
          media: '(min-width: 80rem)'
  - $name: Progressbar and countdown
    limited_webform_page: 0
    limited_webform: aktionspaket_formular_climate_em|3013
    counter_state_endpoint: /api/limited-webform-state
    counter_target: 1000
    counter_rule_id: 1225
    counter_end_timestamp: '2023-07-21 15:30:00'
    headline: Europas Wildnis schützen
    copy: >-
      Die Karpaten sind in Gefahr - und damit die Heimat für Bären und andere
      Wildtiere in Europa. Holzeinschlag und Straßenbau zerstören die
      einzigartigen Laubwälder um kurzfristige Profite zu machen. Bitte
      unterstützen Sie Greenpeace beim Einsatz für den Artenschutz mit Ihrer
      Spende!
    payment_amount:
      has_flyout: true
      interval:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: DonationTeaser-interval js-DonationTeaser-interval
        legend:
          title: Ja, ich bin dabei und unterstütze Greenpeace e.V.
        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
      amount:
        $tpl: '@fsk/form/fieldset'
        $ref: '@fsk/form/fieldset'
        attributes:
          class: >-
            DonationTeaser-amount DonationTeaser-amount--progress
            js-DonationTeaser-amount
        legend:
          title: mit einem Betrag von
        legend_span:
          attributes:
            class: u-hiddenVisually
        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: 'Oder Betrag eintippen:'
              children:
                attributes:
                  placeholder: Ihr Betrag
    submit_button:
      - $tpl: '@fsk/form/form-element'
        $ref: '@fsk/form/form-element#submit'
        attributes:
          class: DonationTeaser-buttonHolder
        children:
          $tpl: '@fsk/form/form-element/input/input--submit'
          $ref: '@fsk/form/form-element/input/input--submit'
          modifiers:
            - donation
          attributes:
            class: DonationTeaser-button
            value: Jetzt spenden
    image:
      $tpl: elements/image
      width: 569
      height: 349
      src: https://via.placeholder.com/569x349
      alt: Alternative text
      id: '6'
      sources:
        - width: 569
          height: 349
          srcset: >-
            https://via.placeholder.com/569x349 1x,
            https://via.placeholder.com/1138x698 2x
          media: '(max-width: 35.5625rem)'
        - width: 959
          height: 588
          srcset: >-
            https://via.placeholder.com/959x588 1x,
            https://via.placeholder.com/1918x1176 2x
          media: '(min-width: 35.625rem) and (max-width: 59.9375rem)'
        - width: 500
          height: 1285
          srcset: >-
            https://via.placeholder.com/500x1285 1x,
            https://via.placeholder.com/1000x2570 2x
          media: '(min-width: 60rem) and (max-width: 79.9375rem)'
        - width: 496
          height: 786
          srcset: >-
            https://via.placeholder.com/496x786 1x,
            https://via.placeholder.com/992x1572 2x
          media: '(min-width: 80rem)'

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

<div class="DonationTeaser u-grid
  {%- if small_donation_teaser %} DonationTeaser--small{% endif -%}
  {%- if counter_state_endpoint %} DonationTeaser--progress{% endif -%}
  {%- if class %} {{ class }}{% endif -%}
  {%- if is_first_on_page %} DonationTeaser--firstOnPage{% endif -%}
  {{- is_on_donation_form ? " DonationTeaser--inDonationForm" : " u-container" -}}
">

  <div class="DonationTeaser-imageContainer">
    {{ image|raw }}
  </div>
  {% if not small_donation_teaser %}
    <div class="DonationTeaser-formHolder">
  {% endif %}
    <div class="DonationTeaser-text">
      <{{ h1_headline ? 'h1' : 'h3' }} class="DonationTeaser-headline u-typo-headline3">{{ headline }}</{{ h1_headline ? 'h1' : 'h3' }}>
      {% if counter_end_timestamp %}
        {% include "@elements/countdown/countdown.html.twig" with {
          counter_end_timestamp: counter_end_timestamp,
          class: "DonationTeaser-countdown",
        } only %}
      {% endif %}
      {% if copy %}
        <p class="DonationTeaser-copy">{{ copy }}</p>
      {% endif %}
      {% if progress %}
        <div class="DonationTeaser-progressTracker">
          {{ progress|raw }}
        </div>
      {% endif %}
      {% if counter_state_endpoint %}
        {% include "@elements/progress/progress.html.twig" with {
          class: "DonationTeaser-progress",
          counter_rule_id: counter_rule_id,
          counter_state_endpoint: counter_state_endpoint,
          counter_target: counter_target,
          limited_webform: limited_webform,
          limited_webform_page: limited_webform_page,
        } only %}
      {% endif %}
    </div>
    {% if not is_on_donation_form  %}
      <form action="{{ endpoint_url }}" class="DonationTeaser-form js-DonationTeaser-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>
    {% endif %}
        {% include "@patterns/form/payment/payment-amount/payment-amount.html.twig" with {
          interval: payment_amount.interval,
          amount: payment_amount.amount,
          has_flyout: payment_amount.has_flyout,
          hidden_fields: payment_amount.hidden,
          has_flyout_open: payment_amount.has_flyout_open|default(FALSE),
          is_drupal_form: TRUE,
          donation_examples: donation_examples,
          donation_notice: payment_amount.donation_notice,
          gift_page_url: payment_amount.gift_page_url,
          is_simple_version: payment_amount.is_simple_version,
          form_wrapper_id: payment_amount.form_wrapper_id,
          is_hidden: payment_amount.is_hidden
        } only %}
    {% if not is_on_donation_form  %}
        {{ submit_button }}
      </form>
    {% endif %}
  {% if not small_donation_teaser %}
    </div>
  {% endif %}
</div>