{% 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"/>
    {% if kraft.VERSION %}
      <meta name="Producer" content="Kraft {{ kraft.VERSION }}"/>
    {% endif %}
    <meta name="author" content="{{ me.NAME }}"/>
    <meta name="document type" content="{{ doc.docType }}"/>
    <meta name="correspondent" content="{{ customer.organisation }}"/>
    {% if doc.buyerReference %}
      <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 {
        @bottom-left {
          font-family: "Arial Narrow";
          font-size: 8pt;
          {% comment %}
            content: "{{ doc.docType }} {{ doc.ident }}, printed 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 {
        @bottom-right {
          font-family: "Arial Narrow";
          font-size: 8pt;
          {% comment %}
            content: "{{ doc.docType }} {{ doc.ident }}, printed 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.items|length > 0 %}
      <table class="doc-items">
        <thead>
          <!-- This line prints the item number and the text over the whole width -->
          <tr class="doc-items-header">
            <th class="col-item-no align-right">{{ label.NO_SHORT }}</td>
            <th class="col-item-amount align-right">{{ label.QUANTITY_SHORT }}</td>
            <th class="col-item-unit align-left">{{ label.UNIT }}</td>
            <th class="col-item-unitprice align-right">{{ label.PRICE }}</td>
            <th class="col-item-total align-right">{{ label.SUM }}</td>
          </tr>
        </thead>

        <tbody>
          {% for item in doc.items %}
            <div class="no-page-break-inside">
              {% comment %}
                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.
                As it is also generating an empty line as separator it has been
                kept inside the for-loop instead of putting it in front of the
                loop. 
              {% endcomment %}
              <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">
                  {{ item.unitPrice }}
                </td>
                <td class="col-item-total align-right">
                  {{ item.nettoPrice }}
                  {% if doc.hasIndividualTaxation %}
                     <span class="doc-item-style-individualTaxation">
                       {{ item.taxMarker }}
                     </span>
                     &nbsp;
                  {% endif %}
                </td>
              </tr>
            </div>
          {% endfor %}
        </tbody>
      </table>

      <table class="totals main-font-regular-10">
        <tbody>
          <tr>
            <td class="totals-col-spacer"></td>
            <td class="totals-col-label totals-first-line">{{ label.NET }}</td>
            <td class="totals-col-value totals-first-line">{{ doc.nettoSumStr }}</td>
          </tr>
          <tr>
          {% if doc.hasIndividualTaxation %}
            <!-- This section is shown for documents with individual tax rates -->
            <tr>
              <td class="totals-col-spacer"></td>
              <td class="totals-col-label"><span class="superscript">{{ doc.taxMarkerReduced }}</span>&nbsp;
              +{{ doc.reducedTaxPercentStr }}% {{ label.VAT }}</td>
              <td class="totals-col-value">{{ doc.reducedTaxSumStr }}</td>
            </tr>
            <tr>
              <td class="totals-col-spacer"></td>
              <td class="totals-col-label"><span class="superscript">{{ doc.taxMarkerFull }}</span>&nbsp;
              +{{ doc.fullTaxPercentStr }}% {{ label.VAT }}</td>
              <td class="totals-col-value">{{ doc.fullTaxSumStr }}</td>
            </tr>
          {% else %}
            <tr>
            <!-- This section is shown for documents with one consistent tax rate -->
            <!-- Note: taxPercentStr can either be reduced or full, depending on
                 the tax settings of the document -->
              <td class="totals-col-spacer"></td>
              <td class="totals-col-label">+{{ doc.taxPercentStr }}% {{ label.VAT }}</td>
              <td class="totals-col-value">{{ doc.taxSumStr }}</td>
            </tr>
          {% endif %}
          <tr class="main-font-regular-12 weight-bold">
            <td class="totals-col-spacer"></td>
            <td class="totals-col-label totals-final-line">{{ label.SUM }}</td>
            <td class="totals-col-value totals-final-line">{{ doc.bruttoSumStr }}</td>
          </tr>
        </tbody>
      </table>
    {% endif %}

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

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