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

    body.A5.landscape .sheet {
      width: 210mm;
      height: 147mm
    }

    .column {
      margin-bottom: -20;
    }
  </style>
</head>

<body class="A5 landscape">
  {{#each runners}}
  <div class="sheet">
    <img id="header_img" width="100%" src="sponsoringheader.png" />
    <div style=" padding: 0 1rem 0 1rem;">
      <div class="columns" style="padding-bottom: 0;">
        <div class="column is-two-fifths">
          <p style="font-size: large; font-weight: bold;">{{__ "sponsoring_title"}}</p>
        </div>
        <div class="column">
          <p style="font-size: x-small; vertical-align: revert; margin-top: auto;">{{__ "please_use_blockletters"}}
          </p>
        </div>
      </div>
      <p> {{__ "sponsoring_subtitle"}} </p>
      <div class="columns" style="padding-top: 0;">
        <div class="column is-8">
          <span style="border-bottom: 1px solid; width: 100%; display: block;">{{this.firstname}}
            {{this.middlename}}</span>
          <p style="font-size: x-small; display: block;">{{__ "firstname"}}</p>
        </div>
        <div class="column is-2">
          <span style="border-bottom: 1px solid; width: 100%; display: block;">{{this.id}}</span>
          <p style="font-size: x-small; display: block;">ID</p>
        </div>
        <div class="column">
          <!-- CODE Here -->
        </div>
      </div>
      <div class="columns">
        <div class="column is-6">
          <span style="border-bottom: 1px solid; width: 100%; display: block;">{{this.lastname}}</span>
          <p style="font-size: x-small; display: block;">{{__ "lastname"}}</p>
        </div>
        <div class="column is-6">
          <span style="border-bottom: 1px solid; width: 100%; display: block;">{{this.group.name}}</span>
          <p style="font-size: x-small; display: block;">{{__ "group"}}</p>
        </div>
      </div>
      <p>{{__ "sponsoring_amount_per_distance"}}</p>
      <div class="columns">
        <div class="column is-6">
          <span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
          <p style="font-size: x-small; display: block;">{{__ "lastname"}}</p>
        </div>
        <div class="column is-6">
          <span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
          <p style="font-size: x-small; display: block;">{{__ "firstname"}}</p>
        </div>
      </div>
      <p style="font-size: medium;">{{__ "address"}} ({{__ "sponsor"}})</p>
      <p style="font-size: x-small;">({{__ "sponsoring_address_condition"}})</p>
      <div class="columns">
        <div class="column is-8">
          <span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
          <p style="font-size: x-small; display: block;">{{__ "street"}}</p>
        </div>
        <div class="column is-4">
          <span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
          <p style="font-size: x-small; display: block;">{{__ "house_number"}}</p>
        </div>
      </div>
      <div class="columns">
        <div class="column is-4">
          <span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
          <p style="font-size: x-small; display: block;">{{__ "postalcode"}}</p>
        </div>
        <div class="column is-8">
          <span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
          <p style="font-size: x-small; display: block;">{{__ "city"}}</p>
        </div>
      </div>
      <br>
      <div class="columns">
        <div class="column is-7">
          <span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
          <p style="font-size: x-small; display: block;">{{__ "location"}}, {{__ "date"}}</p>
        </div>
        <div class="column is-5">
          <span style="border-bottom: 1px solid; width: 100%; display: block;"> </span>
          <p style="font-size: x-small; display: block;">{{__ "signature"}}</p>
        </div>
      </div>
    </div>
  </div>
  {{/each}}
</body>

</html>