{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>{% if document.state == 'canceled' %} Canceled {% endif %}{{ document.kind }} {{ document.series }}-{{ document.number }}
        {% if document.is_storno %}, storno of {{ document.related_document.series }}-{{ document.related_document.number }}{% endif %}
    </title>
    <style type="text/css">
        @page {
            size: a4;
            margin: 2cm;
        }

        /* Normal */
        @font-face {
            font-family: open-sans;
            src: url({% static 'font/OpenSans-Regular.ttf' %});
        }

        /* Bold */
        @font-face {
            font-family: open-sans;
            src: url({% static 'font/OpenSans-Bold.ttf' %});
            font-weight: bold;
        }

        /* Italic */
        @font-face {
            font-family: open-sans;
            src: url({% static 'font/OpenSans-Italic.ttf' %});
            font-style: italic;
        }

        /* Bold Italic */
        @font-face {
            font-family: open-sans;
            src: url({% static 'font/OpenSans-BoldItalic.ttf' %});
            font-style: italic;
            font-weight: bold;
        }

        hr {
            color: #86ba49;
        }

        html {
            font-family: open-sans;
        }

        body {
            font-family: open-sans;
            font-size: 8pt;
            color: #4d4d4d;
        }

        strong {
            font-weight: bold;
        }

        #parties td {
            vertical-align: top;
        }

        #entries {
            margin-top: 1cm;
        }

        #entries th {
            text-align: left;
        }

        #entries th.price {
            text-align: left;
        }

        #entries tr {
            padding: 5pt 0 1pt;
            border-bottom: 1pt solid #ddd;
        }

        #entries tbody td {
            vertical-align: top;
        }

        #entries tbody td {
            padding-right: 3pt;
        }

        #entries tfoot {
            font-weight: bold;
        }

        #entries tfoot tr {
            border-bottom: none;
        }

        #entries tfoot td {
            vertical-align: top;
        }

        #entries tfoot .total {
            padding-left: 5pt;
            padding-right: 5pt;
            text-align: right;
        }
    </style>
</head>
<body>
<div id="header">
    <table>
        <tr>
            <td class="title">
                <h1>{% if document.state == 'canceled' %} Canceled {% endif %}{{ document.kind }} {{ document.series }}-{{ document.number }}</h1>
                {% if document.is_storno %}<h2>Storno of {{ document.related_document.series }}-{{ document.related_document.number }}</h2>{% endif %}
                <table>
                    <tr>
                        <td width="48mm"><strong>Issue date</strong></td>
                        <td>{{ document.issue_date|date:"d M. Y" }}</td>
                    </tr>
                    <tr>
                        <td width="48mm"><strong>Due date</strong></td>
                        <td>{{ document.due_date|date:"d M. Y" }}</td>
                    </tr>
                    {% if document.sales_tax_percent %}
                    <tr>
                        <td width="48mm" style="vertical-align: top;">
                            <strong> {% if document.sales_tax_name %} {{ document.sales_tax_name }} {% else %} Tax {% endif %} </strong>
                        </td>
                        <td>
                            {{ document.sales_tax_percent }}%
                        </td>
                    </tr>
                    {% endif %}
                </table>
            </td>
        </tr>
    </table>
    <hr color="#86ba49" size="0.5mm">
</div>

<div id="content">
    <table id="parties">
        <tr>
            <td width="8cm">
                <h1>Issuer: {{ provider.billing_name }}</h1>

                <strong>Address</strong>: {{ provider.address_1 }}<br>

                {% if provider.address_2 %}
                    {{ provider.address_2 }}<br>
                {% endif %}

                {{ provider.city }}<br>
                {% if provider.state %}
                    {{ provider.state }}<br>
                {% endif %}

                {% if provider.zip_code %}
                    {{ provider.zip_code }}<br>
                {% endif %}

                {% if provider.email %}
                    <strong>Email</strong>: {{ provider.email }}<br>
                {% endif %}

                {% if provider.extra %}
                <br>
                    {{ provider.extra|linebreaksbr }}<br>
                {% endif %}
            </td>
            <td width="8cm">
                <h1>Customer: {{ customer.billing_name }}</h1>

                {% if customer.sales_tax_number %}
                    <strong>Tax ID</strong>: {{ customer.sales_tax_number }}<br>
                {% endif %}

                <strong>Address</strong>: {{ customer.address_1 }}<br>

                {% if customer.address_2 %}
                    {{ customer.address_2 }}<br>
                {% endif %}

                {{ customer.city }}<br>
                {% if customer.state %}
                    {{ customer.state }}<br>
                {% endif %}

                {% if customer.zip_code %}
                    {{ customer.zip_code }}<br>
                {% endif %}

                {% if customer.email %}
                    <strong>Email</strong>: {{ customer.email }}<br>
                {% endif %}

                {% if customer.company %}
                    <strong>Name</strong>: {{ customer.name }}<br>
                {% endif %}

                {% if customer.customer_reference %}
                    <strong>Customer Reference</strong>:
                    {{ customer.customer_reference }}
                    <br>
                {% endif %}

                {% if customer.extra %}
                <br>
                    {{ customer.extra|linebreaksbr }}
                {% endif %}
            </td>
        </tr>
    </table>
    <table id="entries">
        <thead>
            <tr>
                <th width="3%">
                    <i>#</i><br>
                </th>
                <th width="40%" class="description">
                    Service
                </th>
                <th class="unit" width="18%">
                    Unit
                </th>
                <th class="count" width="7%">
                    Qty.
                </th>
                <th class="unit_price" width="16%">
                    Unit price
                </th>
                <th class="price" width="16%">
                    Total Amount
                </th>
            </tr>
        </thead>
        <hr color="#86ba49" size="0.5mm">
        <tbody>
            {% for entry in entries %}
                <tr>
                    <td class="index">
                        {{ forloop.counter }}
                    </td>
                    <td class="description">
                        {{ entry.description }}
                    </td>
                    <td class="unit">
                        {{ entry.unit }}
                    </td>
                    <td class="count">
                        {{ entry.quantity|floatformat:-2 }}
                    </td>
                    <td class="unit_price">
                        {{ entry.unit_price|floatformat:2 }} {{ document.currency }}
                    </td>
                    <td class="price">
                        {{ entry.total|floatformat:2 }} {{ document.currency }}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                    <td colspan="5" class="total">Total</td>
                    <td class="total_amount">
                        {{ document.total|floatformat:2 }} {{ document.currency }}
                    </td>
            </tr>
        </tfoot>
    </table>
</div>
</body>
</html>
