{% load static %}

<!--

  BIG WARNING TO EVERYONE EDITING THIS AFTER Nico:

  Icons, fonts, etc. are INLINED. This is rather ugly, but as the PDF
  generation is based on a local snapshot of the HTML file, URLs are
  screwed if they are not absolute to the *local* filesystem.

  As this document is used ONLY for bills and ONLY for downloading, I
  decided that this is an acceptable uglyness.

  If you want to update anything:

  base64 < filename > filename.base64

  Use the output of filename.base64 and paste it inside this document.

  Nico Schottelius, 2020-04-03

 -->

<!DOCTYPE>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>{{ bill }}</title>

    <style>
      body {
          font-family: Avenir;
          background: white;
          padding: 20px;
          font-weight: 500;
          line-height: 1.1;
          font-size: 14px;
          margin: auto;
          padding-top: 40px;
          padding-bottom: 15px;

      }
      p {
          display: block;
          -webkit-margin-before: 14px;
          -webkit-margin-after: 14px;
          -webkit-margin-start: 0px;
          -webkit-margin-end: 0px;
      }
      table {
        width: 100%;
        text-align: left;
      }
      .bold {
          font-weight: bold;
      }
      .logo {
          width: 220px;
          height: 120px;
      }
      .d1 {
          width: 60%;
          float: left;

      }
      .d2 {
          padding-top: 15px;
          width: 40%;
          float: left;
      }
      .d4 {
          width: 40%;
          float: left;
      }
      .b1 {
          width: 50%;
          float: left;
      }
      .b2 {
          width: 50%;
          float: left;
          text-align: right;
          left: 0;
      }
      .d5 {
          margin-top: 50px;
          width: 100%;
      }
      .d6 {
          width: 60%;
          float: left;
          font-size: 13px;
      }
      .d7 {
          width: 40%;
          float: left;
      }
      .wf {
          width: 100%;
      }
      hr {
          border: 0;
          clear:both;
          display: inline-block;
          width: 100%;
          background-color:gray;
          height: 1px;
      }
      .tl {
          text-align: left;
      }

      .tr {
          text-align: right;
          float: right;
      }
      .pc p {
          display: block;
          -webkit-margin-before: 3px;
          -webkit-margin-after: 5px;
          -webkit-margin-start: 0px;
          -webkit-margin-end: 0px;
      }
      .th {
          border-top: 1px solid gray;
          border-bottom: 1px solid gray;
      }
      .ts {
          font-size: 14px;
      }
      .icon {
          width: 16px;
          height: 14px;
          vertical-align: middle;
          margin-right: 2px;
      }
      .footer {
          margin-top: 70px;
          font-size: 14px;
      }

      .footer p {
          display: block;
          -webkit-margin-before: 5px;
          -webkit-margin-after: 5px;
          -webkit-margin-start: 0px;
          -webkit-margin-end: 0px;
      }

      @font-face {
	      font-family: 'Avenir';
          src: url(data:font/opentype;charset=utf-8;base64,[encoded data, 36592 characters]);
      }

    </style>
</head>

<body>

    <div class="d1">
        <div class="logo">
            <img src="data:image/png;base64,
[encoded data, 38346 characters]
46xVAAAAAElFTkSuQmCC" width="140%" height="80%">

        </div>
    </div>
    <div class="d2">
        <strong> ungleich glarus ag</strong>
        <br> Bahnhofstrasse 1
        <br> 8783 Linthal
        <br> Switzerland
        <br>
    </div>
    <div class="d1">
        <b>{{ bill.billing_address.organization }}</b><br/>
        <b>{{ bill.billing_address.name }}</b><br/>
        {{ bill.owner.email }}<br/>
        {{ bill.billing_address.street }}<br/>
        {{ bill.billing_address.country }} {{ bill.billing_address.postal_code }} {{ bill.billing_address.city }}<br/>

    </div>
    <div class="d4">
        <div class="b1">
            Bill id: {{ bill }}
            <br>{{ bill.starting_date|date:"Ymd" }} -
            {{ bill.ending_date|date:"Ymd" }}
        </div>
    </div>
    <div style="clear: both;"></div>
    <div class="d5">
        <h1>Invoice</h1>
    </div>
    <table>
      <thead>
        <tr>
          <th>Detail</th>
          <th>Price/Unit</th>
          <th>Units</th>
          <th>Total price</th>
        </tr>
      </thead>
      <tbody>
        {% for record in bill_records %}
        <tr class="table-list">
          <td>{{ record.starting_date|date:"Ymd-H:i:s" }}
          - {{ record.ending_date|date:"Ymd-H:i:s" }}
          {{ record.order }}
          </td>
          <td>{{ record.price|floatformat:2 }}</td>
          <td>{{ record.quantity|floatformat:2 }}</td>
          <td>{{ record.sum|floatformat:2 }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    <div class="wf th">
        <p class="ts">
            <span class="tl">Total (excl. VAT)</span>
            <span class="tr">{{ bill.amount }}</span>
        </p>
        <p class="ts">
          <span class="tl">VAT 7.7%</span>
          <span class="tr">{{ bill.vat_amount|floatformat:2 }}</span>
        </p>
    </div>
    <div class="wf pc">
        <p class="bold">
            <span class="tl">Total amount to be paid</span>
            <span class="tr">{{ bill.sum|floatformat:2 }}</span>
        </p>
    </div>
    <div class="wf footer">
        <div class="d6">
            <p>
              <img class="icon"
                   src="data:image/png;base64,
[encoded data, 4697 characters]
7z9MvAEsXH8GANKWWwKI1PELAAAAAElFTkSuQmCC

">+41 (0) 55 505-62-66</p>

            <p>
              <img class="icon"
                   src="data:image/png;base64,
[encoded data, 6237 characters]
AGYBzAKYBTALYBbADLY/BgB4BvvCXEs8AAAAAABJRU5ErkJggg==
">buchhaltung-ag@ungleich.ch</p>

            <p>
              <img class="icon"
                   src="data:image/png;base64,
[encoded data, 4924 characters]
">https://ungleich.ch</p>
            <p>
              <img class="icon"
                   src="data:image/png;base64,
[encoded data, 6468 characters]
AkwLMC3AtADvMv4/APXQmI5I8gGiAAAAAElFTkSuQmCC
">@ungleich</p>
        </div>
        <div class="d7">
            <p>Glarner Kantonalbank</p>
            <p>
                <span class="bold">IBAN: CH 4300 7730 0055 5931 177</span>
            </p>
            <p>
                <span class="bold">BIC: GLKBCH22</span>
            </p>
            <p style="font-size: 13px">Mwst-Nummer: CHE-156.970.649 MWST</p>
        </div>
    </div>
</body>

</html>
