<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Invoice 0001</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
        <style type="text/css">
body {
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;

    padding: 2em;
}
ul {
    list-style: none;
    padding: 0;
}
ul li {
    margin-bottom: 0.2em;
}

@page {
  size: A4;
  margin: 0;
}
div.rhs {
    float: right;
    width: 50%;
    text-align: right;
}
div.lhs {
    float: left;
    text-align: left;
    width: 50%;
    min-height: 35em;
}
div.metadata {
    margin-top: 2em;
}
div.invoicee {
    margin-top: 9em;
}
h1 {
    font-size: 1.5em;
    margin: 0;
    text-transform: uppercase;
}
h2 {
    font-size: 1.2em;
    margin: 0;
}
table.items {
    text-align: right;
    border-spacing: 0px;
    border-collapse: collapse;
    border: 0;
    width: 100%;
}
table.items td,th {
    border: 1px solid black;
}
table.items tr:first-child {
    background-color: #eee;
    color: #111;
    padding: 0.8em;
    text-align: left;
}
table.items td {
    background-color: #fff;
}
table.items td,th {
    padding: 0.5em 1em 0.5em 1em;
}
td.lhead {
    border: 0 !important;
    text-align: right;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0) !important;
}
div.bgtext {
    z-index: -10;
    position: absolute;
    top: 140mm;
    left: 0;
    width: 100%;
}
div.bgtext div {
    text-align: center;
    font-size: 10em;
    color: #ddd;
    -webkit-transform: rotate(-45deg);
    text-transform: uppercase;
}
div.symbols {
    padding: 0 0 0.5rem 0.1rem;
}
        </style>
    </head>
    <body>
        {{ if .Proforma }}
        <div class="bgtext"><div>Proforma</div></div>
        {{ end }}
        <div class="rhs">
            <div class="invoicer">
                <ul>
                    {{ range $i, $e := .InvoicerBilling }}
                    {{ if eq $i 0 }}
                    <li><b>{{ $e }}</b></li>
                    {{ else }}
                    <li>{{ $e }}</li>
                    {{ end }}
                    {{ end }}
                    {{ if .InvoicerCompanyNumber }}
                    <li>{{ .InvoicerCompanyNumber }}</li>
                    {{ end }}
                    <li><b>Tax Number:</b> {{ .InvoicerVAT }}</li>
                </ul>
            </div>
            <div class="metadata">
                <ul>
                    <li><b>Invoice number:</b> {{ .InvoiceNumber }}</li>
                    <li><b>Date:</b> {{ .Date.Format "2006/01/02" }}</li>
                    <li><b>Due date:</b> {{ .DueDate.Format "2006/01/02" }}</li>
                    <li><b>IBAN:</b> {{ .IBAN }}</li>
                    <li><b>SWIFT/BIC:</b> {{ .SWIFT }}</li>
                </ul>
            </div>
        </div>
        <div class="lhs">
            <div class="invoicee">
                {{ if .Proforma }}
                <h1>Proforma Invoice</h1>
                {{ else }}
                <h1>VAT Invoice</h1>
                {{ end }}
                <ul>
                    {{ range $i, $e := .InvoiceeBilling }}
                    {{ if eq $i 0 }}
                    <li><b>{{ $e }}</b></li>
                    {{ else }}
                    <li>{{ $e }}</li>
                    {{ end }}
                    {{ end }}
                    {{ if .USCustomer }}
                    <li>{{ .InvoiceeVAT }}</li>
                    <li style="margin-top: 2em;"><b>VAT NP</b> <i>(zero rate)</i></li>
                    {{ else if .InvoiceeVAT }}
                    <li><b>NIP:</b> {{ .InvoiceeVAT }}</li>
                    {{ end }}

                    {{ if .ReverseVAT }}
                    <li><b>Obciążenie odwrotne</b> <i>(reverse charge)</ii></li>
                    {{ end }}
                </ul>
            </div>
        </div>
        <div style="clear: both; height: 1em;"></div>
        <div class="symbols">
            <b>Oznaczenia</b> <i>(JPK symbols)</i>: {{ .Symbols }}
        </div>
        <table class="items">
            <tr>
                <th style="width: 60%;">Name of goods / service</th>
                <th>Unit price<br />(net)</th>
                <th>Qty</th>
                {{ if not .ReverseVAT }}
                <th>VAT rate</th>
                {{ end }}
                <th>Goods value<br />(net)</th>
                {{ if not .ReverseVAT }}
                <th>Goods value<br />(gross)</th>
                {{ end }}
            </tr>
            {{ range .Items }}
            <tr>
                <td style="text-align: left;">{{ .Title }}</td>
                <td>{{ .UnitPrice }}</td>
                <td>{{ .Qty }}</td>
                {{ if not $.ReverseVAT }}
                <td>{{ .VATRate }}</td>
                {{ end }}
                <td>{{ .TotalNet }}</td>
                {{ if not $.ReverseVAT }}
                <td>{{ .Total }}</td>
                {{ end }}
            </tr>
            {{ end }}
            {{ if not .ReverseVAT }}
            <tr>
                <td colspan="5" class="lhead">Subtotal without VAT</td>
                <td>{{ .TotalNet }}</td>
            </tr>
            <tr>
                <td colspan="5" class="lhead">VAT Total {{ if .USCustomer }}(VAT zero rate){{ end }}</td>
                <td>{{ .VATTotal }}</td>
            </tr>
            {{ end }}
            <tr>
                <td colspan="{{ if .ReverseVAT }}3{{ else }}5{{ end }}" class="lhead"><b>Total</b></td>
                <td><b>{{ .Total }}</b></td>
            </tr>
        </table>
    </body>
</html>