// 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://via.placeholder.com/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">
        <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 %}
      </div>
      <div class="GiftCertificate-share">
        <h3 class="GiftCertificate-shareHeadline u-typo-headline6">{{ services_headline }}</h3>
        <a href="mailto:?body={{ 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>
      {% include "@elements/button/button.html.twig" with {
        label: "PDF anzeigen",
        class: "GiftCertificate-button",
        url: download_pdf_url,
        icon: "eye",
        mutation: "secondary",
        target: "_blank",
      } only %}
    </div>
    <div class="GiftCertificate-imageHolder GiftCertificate-imageHolder--desktop">
      <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 %}
    </div>
  </div>
</div>