{% load static i18n %}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{%trans "Invoice: " %} {{bill.id}}</title>
    <style>
        @font-face {
                    font-family: 'Avenir';
                    src: url("{{ base_url }}{% static 'uncloud_pay/webfonts/Avenir-Book.ttf' %}");
                    }
    </style>
    <link href="{{ base_url }}{% static 'uncloud_pay/css/invoice.css' %}" rel="stylesheet">
</head>
<body>

<div class="invoice-container">

    <div class="header" style="line-height:1.1em;">
        <div class="d1">
            <div class="logo">
                <img class="" src="{{ base_url }}{% static 'uncloud_pay/images/company-small.jpg' %}" width="50%"/>
            </div>
        </div>
        <div class="d2" name="company_address">
            <span class="bold">ungleich glarus ag</span>
            <address style="font-style: normal;">
                Bahnhofstrasse 1<br>
                8783 Linthal<br>
                    Switzerland
            </address>
        </div>
    <div class="first-page">
        
        <div class="d1">
            <b>
                <span style="font-size: 16px">{{bill.billing_address.full_name}}</span>
            </b>
            <br/>
            <span>{{bill.billing_address.owner.email}}</span>
            <address style="font-style: normal;">
                {{bill.billing_address.street}}<br>
                {{bill.billing_address.city}}<br>
                {{bill.billing_address.get_country_display}}
                </address>
        </div>
    </div>
    <div class="d4" style="margin-top:15px;">
        <div class="bold">
            <div class="b1">
                <span>{%trans "Bill Number:" %}</span>
            </div>
            <div class="b2">
                <span>#{{bill.id}}</span>
            </div>
        </div>
        <div>
            <div class="b1">
                <span>{%trans "Date of invoice:" %}</span>
            </div>
            
            <div class="b2">
                <span>{{bill.starting_date|date:"Y-m-d"}}</span>
            </div>
        </div>
        <div>
            <div class="b1">
                <span>{%trans "Due Date:" %}</span>
            </div>
            <div class="b2">
                <span>{{bill.due_date|date:"Y-m-d"}}</span>
                
            </div>
        </div>
    </div>
    <div style="clear: both;">
    </div>
    <div style="clear: both;">
    <table class="wf" style="margin-top:20px; margin-bottom:10px important;border-top: 1px solid gray;">
        <thead >
            <tr class="" style="padding-top: 10px; padding-bottom:10px;background-color: #f5f5f5;">
                <th class="tl bold" style="padding: 5px 0px 5px 0px !important;">{%trans "Product" %}</th>
                <th class="tc bold" style="padding: 5px 0px 5px 0px !important;">{%trans "Quantity" %}</th>
                <th class="bold" style="text-align: right; padding: 5px 0px 5px 0px !important;">{%trans "Amount in " %} <span>CHF</span></th>
            </tr>
        </thead>
        {% for record in bill.bill_records.all %}
        <tr class="ts" style="line-height:1.8em !important;">
            <td class="tl">
                <span>{{record.description}}</span>
            </td>
            <td class="tc">
                <span>{{record.quantity}}</span>
            </td>
            <td style="text-align: right;">
                <span>{{record.subtotal}}</span>
            </td>
        </tr>
        {% endfor %}
    </table>
    <div class="page">
        <div class="wf th">
            <p class="ts">
                <span class="tl">SubTotal</span>
                <span class="tr">{{bill.subtotal}}</span>
                </span>
            </p>
            <p class="ts">
                <span class="tl">{{bill.billing_address.get_country_display}} VAT {{vat_rate}}%</span>
                <span class="tr">{{tax_amount}}
                </span>
            </p>
        </div>
        <div class="wf pc" style="background-color: #f5f5f5;padding-top:5px;padding-bottom:5px;">
            <p class="bold" style="padding-top:5px;">
                <span class="tl" style="font-size: 16px">{%trans "Total CHF" %}</span>
                <span class="tr" style="font-size: 16px">{{bill.sum}}</span>
            </p>
        </div>
    </div>
</div>
</div>

</body>
</html>