{% load i18n %}

<html>
  <head>
    <title>
      {% blocktrans with order_id=order.order_id %}Invoice {{ order_id }}{% endblocktrans %}
    </title>
    <link rel="stylesheet" href="style.css">
    <style>
    @page {
      margin: 5cm 2cm 5cm 2cm;

      @top-right {
        content: url("logo-document.svg");
      }

      @bottom-left {
        white-space: pre;
        text-align: left;
        font-size: 8pt;
        content: "{{ vendor.address.name }}\a"
             "{{ vendor.address.street }}\a"
             "{{ vendor.address.postcode }} {{ vendor.address.city }}\a"
             "{% blocktrans trimmed with vat_number=vendor.vat_number %}
                VAT Number: {{ vat_number }}
              {% endblocktrans %}\a"
             "\a\a"
      }

      @bottom-center {
        white-space: pre;
        text-align: center;
        font-size: 8pt;
        content: {% for text in vendor.additional_text %}"{{ text }}\a" {% endfor %}
        "{{ vendor.bottom_padding|safe }}"
        {% blocktrans %}"Page " counter(page) " of " counter(pages){% endblocktrans %}
      }

      @bottom-right {
        white-space: pre;
        text-align: left;
        font-size: 8pt;
        content: {% for text in invoice.additional_text %}"{{ text }}\a" {% endfor %}
        "{{ invoice.bottom_padding|safe }}"
      }
    }
    </style>
  </head>
  <body>
    <div>
      <table class="addressTable">
        <tr>
          <td class="small">
            {{ vendor.address.name }},
            {{ vendor.address.street }},
            {{ vendor.address.postcode }} {{ vendor.address.city }}
          </td>
        </tr>

        <tr>
          <td>{{ billing_address.name }}</td>
        </tr>

        <tr>
          <td>{{ billing_address.street }}</td>
        </tr>

        <tr>
          <td>
            {{ billing_address.postcode }}
            {{ billing_address.city }}
          </td>
        </tr>
      </table>
    </div>

    <div class="section">
      <table class="infoTable">
        <tr>
          {% if order.order_id %}
            <td class="bold">
              {% blocktrans with order_id=order.order_id %}Order ID: {{ order_id }}{% endblocktrans %}
            </td>
          {% endif %}

          <td>
            {% blocktrans with customer_id=order.customer_id %}Customer ID: {{ customer_id }}{% endblocktrans %}
          </td>
        </tr>
        <tr>
          {% if order.shipping_date_range %}
            <td class="small">{% blocktrans %}The order will be shipped upon receipt of payment.{% endblocktrans %}</td>
          {% endif %}
          <td>
            {% blocktrans with date=order.date|date %}Date of Invoice: {{ date }}{% endblocktrans %}
          </td>
        </tr>
      </table>
    </div>

    <div class="section">
      <table class="invoiceTable">
        <thead>
          <tr>
            <td>{% blocktrans %}REF{% endblocktrans %}</td>
            <td>{% blocktrans %}Description{% endblocktrans %}</td>
            <td>{% blocktrans %}Quantity{% endblocktrans %}</td>
            <td>{% blocktrans %}Price per Unit{% endblocktrans %}</td>
            <td>{% blocktrans %}Tax Rate{% endblocktrans %}</td>
            <td>{% blocktrans %}Net Price{% endblocktrans %}</td>
          </tr>
        </thead>
        <tbody>
          {% for item in invoice.items %}
          <tr>
            <td class="text-center">{{ item.reference }}</td>
            <td>{{ item.text|safe }}</td>
            <td class="nowrap text-center">{{ item.quantity }}</td>
            <td class="nowrap text-center">{{ item.net_price|floatformat:2 }} {{ currency }}</td>
            <td class="nowrap text-center">{{ item.tax_rate }} %</td>
            <td class="nowrap text-center">{{ item.total_net|floatformat:2 }} {{ currency }}</td>
          </tr>
          {% endfor %}
          <tr class="tfoot">
            <td class="padrow"></td>
          </tr>
          {% if order.total_discounted %}
          <tr class="tfoot">
            <td class="noborder"></td>
            <td class="noborder"></td>
            <td colspan="3"> {% blocktrans %}Total discounted{% endblocktrans %}</td>
            <td class="nowrap" colspan="2">{{ order.total_discounted|floatformat:2 }} {{ currency }}</td>
          </tr>
          {% endif %}
          {% if order.total_shipping_net %}
          <tr class="tfoot">
            <td class="noborder"></td>
            <td class="noborder"></td>
            <td colspan="3"> {% blocktrans %}Shipping{% endblocktrans %}</td>
            <td class="nowrap" colspan="2">{{ order.total_shipping_net|floatformat:2 }} {{ currency }}</td>
          </tr>
          {% endif %}
          <tr class="tfoot">
            <td class="noborder"></td>
            <td class="noborder"></td>
            <td colspan="3"> {% blocktrans %}Net total{% endblocktrans %}</td>
            <td class="nowrap" colspan="2">{{ order.total_net|floatformat:2 }} {{ currency }}</td>
          </tr>
          <tr class="tfoot">
            <td class="noborder"></td>
            <td class="noborder"></td>
            <td colspan="3">{% blocktrans with tax=order.tax_rate %}VAT ({{ tax }}%){% endblocktrans %}</td>
            <td class="nowrap" colspan="2">{{ order.total_tax|floatformat:2 }} {{ currency }}</td>
          </tr>
          <tr class="tfoot gross-total bold">
            <td class="noborder"></td>
            <td class="noborder"></td>
            <td colspan="3"> {% blocktrans %}Gross total{% endblocktrans %}</td>
            <td class="nowrap" colspan="2">{{ order.total_gross|floatformat:2 }} {{ currency }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="section">
      <p>{% blocktrans %}Thank you for your order.{% endblocktrans %}</p>

      {% if order.pay_until_date %}
        <p>{% blocktrans with date=order.pay_until_date|date %}Please settle the payment by {{ date }}{% endblocktrans %}.</p>
      {% endif %}

      {% if order.shipping_date_range %}
        <p>
          {% blocktrans trimmed with from=order.shipping_from|date to=order.shipping_to|date %}
          Order will be delivered between {{ from }} and {{ to }}.
          {% endblocktrans %}
        </p>
      {% endif %}
    </div>

  </body>
</html>