<html>
<head>
    <style>
        @font-face {
            font-family: "Barlow Semi Condensed";
            src: url("fonts/BarlowSemiCondensed-Regular.ttf");
        }

        @font-face {
            font-family: "Barlow Semi Condensed";
            src: url("fonts/BarlowSemiCondensed-Light.ttf");
            font-style: normal;
            font-weight: normal;
        }

        @font-face {
            font-family: "Barlow Semi Condensed";
            src: url("fonts/BarlowSemiCondensed-LightItalic.ttf");
            font-style: italic;
            font-weight: normal;
        }

        @font-face {
            font-family: "Barlow Semi Condensed";
            src: url("fonts/BarlowSemiCondensed-Bold.ttf");
            font-style: normal;
            font-weight: bold;
        }

        @font-face {
            font-family: "Barlow Semi Condensed";
            src: url("fonts/BarlowSemiCondensed-BoldItalic.ttf");
            font-style: italic;
            font-weight: bold;
        }

        @page {
            size: a4 portrait;
            margin: 1cm 1cm 1cm 2cm;
            font-size: 12pt;

            @frame address_frame {
                /* Static Frame */
                -pdf-frame-content: address_frame_content;
                left: 2.5cm;
                width: 8.5cm;
                top: 5.5cm;
                height: 4cm;
            }

            @frame letter_head_frame {
                /* Another static Frame */
                -pdf-frame-content: letter_head_content;
                left: 15.5cm;
                width: 4cm;
                top: 1cm;
            }

            @frame content_first_page_frame {
                /* Content Frame */
                left: 2cm;
                width: 13cm;
                top: 11cm;
                bottom: 1cm;
            }
        }

        body {
            font-family: 'Barlow Semi Condensed';
            font-size: 10pt;
        }

        table {
        }

        #address_frame_content {
        }

        #letter_head_content {
        }

        .head {
        }

        .positionen {
            padding-top: 1pt;
            padding-bottom: 1pt;
        }

        .links {
            text-align: left;
        }

        .rechts {
            text-align: right;
        }

        .summe {
            padding-top: 1mm;
            border-top: .1pt solid black;
        }

        .bold {
            font-weight: bold;
        }

        .underline {
            border-bottom: .1pt solid black;
        }

        .overline {
            border-top: .1pt solid black;
        }

        .center {
            text-align: center;
        }

        .head_data {
            width: 100%;
            border-collapse: collapse;
        }

        .head_data td {
            text-align: center;
        }

        .small {
            font-size: 8pt;
        }

        #letter_head_content img {
            display: block;
            margin-left: -.55cm;
        }

        .position_top {
            padding-top: 1pt;
        }

        .position_bottom {
            padding-bottom: 1pt;
        }

    </style>
</head>

<body>
{% macro format_number_de(value) -%}
{{ "{:,.2f}".format(value|float).replace(",", "X").replace(".", ",").replace("X", ".") }}
{%- endmacro %}
<!-- Content for Static Frame 'header_frame' -->
<div id="address_frame_content">
    <p class="underline small center">{{ envelope.AddressContent.AddressBoxSender }}</p>
    <address>
        {{ invoice.AddressField | markdown_to_html }}
    </address>
</div>
<div id="letter_head_content" class="small">
    {% for address in envelope.AddressContent.Contents %}
    {{ address.Text | markdown_to_html }}
    {% endfor %}
</div>


<!-- HTML Content -->
<table class="head_data">
    <tr class="small">
        <td>Rechnungsnummer:</td>
        <td>Kundennummer:</td>
        <td>Rechnungsdatum:</td>
    </tr>
    <tr>
        <td>{{ invoice.Id }}</td>
        <td>{{ invoice.CustomerId }}</td>
        <td>{{ invoice.InvoiceDate.strftime('%d. %B %Y') }}</td>
    </tr>
    </tr>
</table>

<section>
    <p>{{ invoice.Introduction | markdown_to_html }}</p>
</section>

<section>
    <table>
        <tr class="head underline">
            <th class="links" style="width: 55%">Aktivität</th>
            <th class="rechts" style="width: 15%">Anzahl</th>
            <th class="rechts" style="width: 15%">Einheit</th>
            <th class="rechts" style="width: 15%">Betrag</th>
        </tr>
        {% for position in invoice.Positions %}
        <tr>
            <td class="links position_top">{{ position.Title }}</td>
            <td class="rechts" rowspan="2">{{ format_number_de(position.Quantity) }}</td>
            <td class="rechts" rowspan="2">{{ format_number_de(position.PricePerUnit or invoice.PricePerUnit) }}
            </td>
            <td class="rechts" rowspan="2">{{ format_number_de(position.Quantity * ( position.PricePerUnit or
                invoice.PricePerUnit ))}}
            </td>
        </tr>
        <tr>
            <td class="links small position_bottom">{{ position.SubTitle }}</td>
        </tr>
        {% endfor %}
        <tr class="summe">
            <td></td>
            <td colspan="2" class="rechts">Nettosumme:</td>
            <td class="rechts">{{ format_number_de(calculate_total(invoice)) }}</td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2" class="rechts">USt. ({{ format_number_de(invoice.Vat) }}%):</td>
            <td class="rechts">{{ format_number_de(calculate_total(invoice) * ((invoice.Vat / 100))) }}</td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2" class="rechts bold overline">Gesamt Summe:</td>
            <td class="rechts bold overline">{{ format_number_de(calculate_total(invoice) * ((invoice.Vat / 100)+1)) }}</td>
        </tr>
    </table>
</section>

<section>
    <p>{{ invoice.Footer | markdown_to_html | named_replace(ZahlungsZiel=(invoice.InvoiceDate |
        add_days(invoice.DueDate)).strftime('%d. %B %Y')) }}</p>
</section>
</body>
</html>
