{% comment %}
  To test this file, get an intermediate HTML output of Kraft, copy the
  referenced CSS into the <style></style> block and paste it into
  https://printcss.live/ to be able modify it with an immediate preview
{% endcomment %}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="generated by" content="Kraft ### Kraft braucht eine Versionsnummer im Report!!!###"/>
    <meta name="author" content="{{ me.NAME }}"/>
    <meta name="document type" content="{{ doc.docType }}"/>
    <meta name="correspondent" content="{{ customer.organisation }}"/>
    {% if doc.projectLabel %}
      <meta name="correspondent's reference" content="{{ doc.buyerReference }}"/>
    {% endif %}
    <meta name="validity date" content="{{ doc.dateStrISO }}"/>
    <meta name="document ID" content="{{ doc.ident }} {{ doc.docIDStr }} {{ doc.identifier }}"/>
    {% if doc.predecessor %}
      <meta name="predecessor" content="{{ doc.predecessor }}"/>
    {% endif %}
    {% if doc.projectLabel %}
      <meta name="project" content="{{ doc.projectLabel }}"/>
    {% endif %}

{% comment %}
  If there is a need for style definitions containing variables or other
  template language elements they have to be put here. If they are necassary
  for multiple template definitions consider moving them to an include file. 
{% endcomment %}

    <style>
      @page :first {
        @bottom-right {
          color: #000000 !important;
          font-size: 0.5pt !important;
          display: none !important;
          content: " ";
        }
      }

      @page :left {
        margin-left: 20mm;
        margin-top: 20mm;
        margin-right: 25mm;
        margin-bottom: 15mm;
        @bottom-left {
          font-family: "Arial Narrow";
          font-size: 8pt;
          {% comment %}
            content: "{{ doc.docType }} {{ doc.ident }}, printned on " {% now  "Y-m-d G:i" %} ", "  {{ label.PAGE }} " counter(page) " {{ label.PAGE_OF }} " counter(pages);
          {% endcomment %}
          content: "{{ doc.docType }} {{ doc.ident }}, {{ label.PAGE }} " counter(page) " {{ label.PAGE_OF }} " counter(pages);
        }
      }

      @page :right {
        margin-left: 25mm;
        margin-top: 20mm;
        margin-right: 20mm;
        margin-bottom: 15mm;
        @bottom-right {
          font-family: "Arial Narrow";
          font-size: 8pt;
          {% comment %}
            content: "{{ doc.docType }} {{ doc.ident }}, printned on " {% now  "Y-m-d G:i" %} ", "  {{ label.PAGE }} " counter(page) " {{ label.PAGE_OF }} " counter(pages);
          {% endcomment %}
          content: "{{ doc.docType }} {{ doc.ident }}, {{ label.PAGE }} " counter(page) " {{ label.PAGE_OF }} " counter(pages);
        }
      }
    </style>

    <!-- Include the stylesheet file. It will have to reside in the same dir as the template file -->
    <link href="bnc-global.css" media="print" rel="stylesheet"/>

    <title>{{ doc.docType }} {{ doc.ident }} </title>
  </head>

  {% autoescape off %}
  <body>
    <div class="address-field">
      {{ doc.address }}
    </div>

    <div class="header-block-1">
      <span class="main-font-regular-6">Rechnungsanschrift</span><BR>
      <BR>
      Lerchenweg 7<BR>
      53359 Rheinbach<BR>
      <BR>
      Ihr Ansprechpartner<BR>
      Telefon<BR>
      E-Mail
    </div>

    <div class="header-block-2">
      <span class="main-font-regular-6">Lieferanschrift</span><BR>
      <BR>
      Lerchenweg 7<BR>
      53359 Rheinbach<BR>
      <BR>
      {{ me.NAME }}<BR>
      {{ me.PHONE }}<BR>
      {{ me.EMAIL }}
    </div>

    <div class="date">
       {{ doc.dateStr }}
    </div>

    <div class="document-type-and-number">
      {{ doc.docType }}<BR>
      {{ doc.ident }}
      {% if doc.predecessor %}
        &nbsp;&nbsp;&nbsp;
        <span class="main-font-regular-6 weight-normal">
          ({{ label.PREDECESSOR }}: {{ doc.predecessor }})
        </span>
      {% endif %}
    </div>

    {% if doc.doc.buyerReference  %}
      <div class="buyer-reference">
         <span class="main-font-regular-8">{{ label.BUYERREFERENCE }}</span><BR>
         {{ doc.buyerReference }}
      </div>
    {% endif %}

    {% if doc.projectLabel %}
      <div class="project">
         {{ label.PROJECT }}: {{ doc.projectLabel }}
      </div>
    {% endif %}

    <div class="generate-first-page-margin"> </div>

    {% if doc.salut %}
      <p>
        {{ doc.salut }}
      </p>
    {% endif %}

    {% if doc.preTextHtml %}
      <p class="entrytext">
        {{ doc.preTextHtml|safe }}
      </p>
    {% endif %}

    {% for item in doc.items %}
      <table class="doc-items">
        <tbody>
          <!-- this empty row is needed to define the width
               of the columns. In tables with fixed width defined in CSS
               the first row is the defining one. -->
          <tr>
            <td class="col-item-no"></td>
            <td class="col-item-amount"></td>
            <td class="col-item-unit"></td>
            <td class="col-item-unitprice"></td>
            <td class="col-item-total"></td>
          </tr>

          <!-- This line prints the item number and the text over the whole width -->
          <tr>
            <td class="col-item-no align-right">
              {{ item.itemNumber }}
            </td>
            <td colspan="4" class="align-left">
              {% if item.kind == 'Alternative' %}
                <span class="col-item-alternative  ">
              {% elif item.kind == 'Comment' %}
                <span class="col-item-comment ">
              {% elif item.kind == 'Demand' %}
                <span class="col-item-ondemand ">
              {% else %}
                <span class="col-item-standard ">
              {% endif %}
                  {{ item.htmlText }}
                </span>
            </td>
          </tr>

          <!-- This line prints the amount and prices at defined positions. -->
          <tr>
            <td class="col-item-no">
            </td>
            <td class="col-item-amount align-right">
              {{ item.amount }}
            </td>
            <td class="col-item-unit align-left">
              &nbsp;{{ item.unit }}
            </td>
            <td class="col-item-unitprice align-right">
            </td>
            <td class="col-item-total align-right">
            </td>
          </tr>
        </tbody>
      </table>
    {% endfor %}

    {% if doc.postTextHtml %}
      <p class="bottomtext">
        {{ doc.postTextHtml }}
      </p>
    {% endif %}

    <p class="goodbye">
      {{ doc.goodbye }}
    </p>
  </body>
{% endautoescape %}
</html>
