// src/components/patterns/gift-certificate/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/gift-certificate
additionalProperties: false
required:
  - download_pdf_url
  - image
  - send_via_email_href
  - headline
  - services_headline
  - copy
properties:
  download_pdf_url:
    type: string
    format: uri-reference
  send_via_email_href:
    type: string
    format: uri-reference
  image:
    type: object
    properties:
      width:
        type: number
      height:
        type: number
      src:
        type: string
        format: uri-reference
      alt:
        type: string
  title:
    type: string
  headline:
    type: string
  services_headline:
    type: string
  copy:
    type: string

// src/components/patterns/gift-certificate/mocks.yaml

download_pdf_url: https://www.africau.edu/images/default/sample.pdf
image:
  src: https://placehold.co/1074x1520?text=Gift+Donation+Image+Preview
  width: 391
  height: 553
  alt: Geschenkspenden-Urkunde Vorschau
  copyright: Foto © Brooke Pyke / Greenpeace
send_via_email_href: foo
title: Vielen Dank für Ihre Geschenkspende Nina Kunze!
headline: Geschenkspenden-Urkunde jetzt versenden
services_headline: 'Urkunde versenden:'
copy: >-
  Ein Downloadlink zur Spendenurkunde ist per E-Mail an die von Ihnen angegebene
  E-Mailadresse unterwegs. Alternativ können Sie die Urkunde auch per
  Direktnachricht versenden:

// src/components/patterns/gift-certificate/gift-certificate.html.twig

<div class="GiftCertificate u-container Tracking--giftCertificate">
  <div class="u-grid">
    <h1 class="GiftCertificate-title u-typo-headline2-desktop-headline1-mobile">{{ title }}</h1>
  </div>
  <div class="u-grid">
    <div class="GiftCertificate-text">
      <h2 class="GiftCertificate-headline u-typo-headline3">{{ headline }}</h2>
      <p class="GiftCertificate-copy">{{ copy }}</p>
      <div class="GiftCertificate-imageHolder GiftCertificate-imageHolder--mobile">
        {% if send_event_form %}
          {{ image|raw }}
          {% if image_copyright %}
            <figcaption class="GiftCertificate-copyright u-typo-copy-small">{{ image_copyright }}</figcaption>
          {% endif %}
        {% else %}
          <img src="{{ image.src }}" alt="{{ image.alt }}" class="GiftCertificate-image" width="{{ image.width }}" height="{{ image.height }}">
          {% if image.copyright %}<figcaption class="GiftCertificate-copyright u-typo-copy-small">{{ image.copyright }}</figcaption> {% endif %}
        {% endif %}
      </div>
      <div class="GiftCertificate-share">
        <h3 class="GiftCertificate-shareHeadline u-typo-headline6">{{ services_headline }}</h3>
        <a href="mailto:?{{ send_event_form ? 'subject=Mach mit - meine Spendenaktion für Greenpeace&' : '' }}body={% if send_event_form and mail_copy %}{{ mail_copy }}%0A%0A {% endif %}{{ download_pdf_url|url_encode }}" target="_blank" rel="noopener" class="GiftCertificate-shareLink">
          {% include "@elements/icon/icon.html.twig" with {
            class: "GiftCertificate-shareIcon",
            name: "mail-rounded"
          } only %}
          <span class="u-hiddenVisually">Per E-Mail senden:</span>
        </a>
      </div>
      {% if not send_event_form %}
        {% include "@elements/button/button.html.twig" with {
          label: "PDF anzeigen",
          class: "GiftCertificate-button",
          url: download_pdf_url,
          icon: "eye",
          mutation: "secondary",
          target: "_blank",
        } only %}
      {% endif %}
    </div>
    <div class="GiftCertificate-imageHolder GiftCertificate-imageHolder--desktop">
      {% if send_event_form %}
        {{ image|raw }}
        {% if image_copyright %}
          <figcaption class="GiftCertificate-copyright u-typo-copy-small">{{ image_copyright }}</figcaption>
        {% endif %}
      {% else %}
        <img src="{{ image.src }}" alt="{{ image.alt }}" class="GiftCertificate-image" width="{{ image.width }}" height="{{ image.height }}">
        {% if image.copyright %}<figcaption class="GiftCertificate-copyright u-typo-copy-small">{{ image.copyright }}</figcaption> {% endif %}
      {% endif %}
    </div>
  </div>
</div>