<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
    }

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

    .runnercard {
      border: 1px solid;
      height: 5.5cm;
      overflow: hidden;
    }
  </style>
</head>

<body class="A4 landscape">
  <div class="sheet">
    <div class="columns is-multiline">
      {{#each cards}}
      <div class="column is-half runnercard">
        <p class="title is-5" style="text-align: center; padding-bottom: 0; margin-top: -0.75rem;">{{../eventname}}</p>
        <p style="text-align: center; margin-top: -1.5rem; font-size: small;">lauf-fuer-kaya.de - am 01.01.2021</p>
        <p style="font-size: small;">Mit unterstützung von:</p>
        <div class="columns" style="height: 6rem; overflow: hidden;">
          <div class="column is-two-thirds">
            <!--SPONSOR LOGO HERE-->
            <img style="vertical-align: revert; margin-top: auto; object-fit: cover; max-height: 2cm;"
              src="{{--sponsor this.id}}" />
          </div>
          <div class="column is-one-third">
            <!--BARCODE HERE-->
            <img style="vertical-align: revert; margin-top: auto; object-fit: cover; max-height: 2cm;"
              src="{{--bc this.id ../codeformat}}" />
          </div>
        </div>
        <p>{{this.runner.lastname}}, {{this.runner.firstname}} {{this.runner.middlename}}</p>
        <p>{{this.runner.group.fullName}}</p>
      </div>
      {{/each}}
    </div>
  </div>
  <div class="sheet">
    <div class="columns is-multiline">
      {{#each cards_swapped}}
      <div class="column is-half runnercard" style="justify-content: center; align-items: center; text-align: center;">
        <!--SPONSOR LOGO FIRST-->
        <div style="height: 2cm; padding: 0 0 2.25cm 0">
          <img style="object-fit: cover; max-height: 2cm;" src="{{--sponsor this.id}}" />
        </div>
        <img style="object-fit: cover; max-height: 2.5cm; position: relative;" src="{{--bc this.id ../codeformat}}" />
      </div>
      {{/each}}
    </div>
  </div>
</body>

</html>