<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Invoice {{ invoice.number }}</title>
    <link rel="stylesheet" href="/styles/invoice.css">
</head>
<body>
{% set subtotal = 0 %}
{% for item in invoice.items %}
    {% set subtotal = subtotal + item.quantity * item.unit_price %}
{% endfor %}
{% set tax = subtotal * invoice.tax_rate %}
{% set total = subtotal + tax %}

<main class="invoice">
    <header class="invoice-header">
        <div class="brand"><img src="/images/northstar-mark.svg" alt=""><strong>NORTHSTAR</strong></div>
        <div class="invoice-title"><span>Invoice</span><h1>{{ invoice.number }}</h1><p>Issued {{ invoice.issued_at }}</p></div>
    </header>

    <section class="summary">
        <div><span>Billed to</span><strong>{{ invoice.customer.name }}</strong><p>{{ invoice.customer.address }}<br>{{ invoice.customer.city }}</p></div>
        <div><span>Payment due</span><strong>{{ invoice.due_at }}</strong><p>Net 14 · USD</p></div>
        <div class="amount"><span>Amount due</span><strong>${{ total|number_format(2, '.', ',') }}</strong><p>Thank you for your business</p></div>
    </section>

    <section class="line-items">
        <table>
            <thead><tr><th>Service</th><th>Qty</th><th>Rate</th><th>Amount</th></tr></thead>
            <tbody>
            {% for item in invoice.items %}
                <tr>
                    <td>{{ item.description }}</td>
                    <td>{{ item.quantity }}</td>
                    <td>${{ item.unit_price|number_format(2, '.', ',') }}</td>
                    <td>${{ (item.quantity * item.unit_price)|number_format(2, '.', ',') }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </section>

    <section class="totals">
        <dl>
            <div><dt>Subtotal</dt><dd>${{ subtotal|number_format(2, '.', ',') }}</dd></div>
            <div><dt>Tax ({{ (invoice.tax_rate * 100)|number_format(0) }}%)</dt><dd>${{ tax|number_format(2, '.', ',') }}</dd></div>
            <div class="grand-total"><dt>Total due</dt><dd>${{ total|number_format(2, '.', ',') }}</dd></div>
        </dl>
    </section>

    <footer>
        <div><strong>Payment details</strong><p>Northstar Analytics · Account ending 2042<br>Reference {{ invoice.number }}</p></div>
        <div><strong>Questions?</strong><p>billing@northstar.example<br>northstar.example</p></div>
    </footer>
</main>
</body>
</html>
