<html>

<head>
  <meta charset="utf8">
  <title>Sponsoring contract</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
  <style>
    .sheet {
      margin: 0;
      overflow: hidden;
      position: relative;
      box-sizing: border-box;
      page-break-after: always;
      padding: 1.2cm 2cm 1.2cm 2cm;
      background-image: url("data:image/png;base64,[encoded data, 66292 characters]");
      background-repeat: no-repeat;
      background-size: 11cm;
      background-position: 5cm 5cm;
      color: #000;
      /* border-style: solid; */
    }

    h1,
    h2,
    h3,
    p {
      color: black;
    }

    body.A4 .sheet {
      width: 210mm;
      height: 296mm
    }

    .certificate-footer {
      position: absolute;
      bottom: 0cm;
    }

    td {
      border: 1px solid black;
      font-size: large;
      font-weight: 600;
    }
  </style>
</head>

<body class="A4 landscape">
  {{#each runners}}
  <article class="sheet">
    <header class="content has-text-centered">
      <p style="font-size: 3cm; font-weight: bold;">{{__ "urkunde"}}</p>
    </header>
    <main class="content has-text-centered" style="padding-top: 3cm;">
      <p style="width: 50%; font-size: 4vw; font-weight: bold; margin-bottom: 0; display: inline;">{{this.firstname}}
        {{this.middlename}} {{this.lastname}}
      </p>
      <p style="font-size: 1cm; margin-bottom: 0;">{{__ "hat-beim-eventname"}}</p>
      <p style="font-size: 2cm; font-weight: bold; margin-bottom: 0;">{{--format_kilometers this.distance}}km</p>
      <p style="font-size: 1cm;">{{__ "fuer-den-guten-zweck-zurueckgelegt"}}</p>
    </main>
    <footer class="certificate-footer">
      <img src="./certificate_footer.png">
    </footer>
  </article>
  <article class="sheet">
    <header class="content has-text-centered">
      <p style="font-size: 2.5cm; font-weight: bold;">{{__ "sponsorings"}}</p>
    </header>
    <main>
      <table style="border: solid; width: 17cm;">
        <thead>
          <td class=".td-head">{{__ "sponsor-in"}}</td>
          <td>{{__ "betrag-km"}}</td>
          <td>{{__ "gesamtbetrag"}}</td>
        </thead>
        <tbody>
          {{#each this.distanceDonations}}
          <tr>
            <td>{{this.donor.firstname}} {{this.donor.middlename}} {{this.donor.lastname}}</td>
            <td>{{--format_currency this.amountPerDistance}} {{../../currency_symbol}}</td>
            <td>{{--format_currency this.amount}} {{../../currency_symbol}}</td>
          </tr>
          {{/each}}
        </tbody>
        <tfoot>
          <td>{{__ "gesamt"}}</td>
          <td>{{--format_currency this.donationPerDistanceTotal}} {{../currency_symbol}}</td>
          <td>{{--format_currency this.donationTotal}} {{../currency_symbol}}</td>
        </tfoot>
      </table>
    </main>
    <footer class="certificate-footer">
      <p>
        {{../donations_footer_text}}
      </p>
    </footer>
  </article>
  {{/each}}
</body>

</html>