{% 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.preText %}
      <p class="entrytext">
        {{ doc.preText }}
      </p>
    {% endif %}

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

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