<!doctype html>
<!-- A plain sample of a twig table -->
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            margin-top: 2rem;
            min-width: 100%;
            table-layout: fixed;
            overflow-wrap: break-word;
        }

        .table-header>tr>th {
            border-bottom: solid 1px #efefef;
        }

        .table-body>tr>td {
            border-bottom: solid 1px #efefef;
        }

        th {
            text-align: left;
            padding-left: 6px;
            padding-right: 6px;
            padding-top: 6px;
            padding-bottom: 6px;
        }

        td {
            padding-left: 6px;
            padding-right: 6px;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .item-row {
            border-bottom: 1px #000 dotted;
        }

        .totals-row-label {
            text-align: right;
            white-space: nowrap;
        }

        .totals-row-value {
            text-align: right;
            white-space: nowrap;
        }

        .table-totals {
            display: grid;
            grid-template-columns: 2fr 1fr;
        }

        .centered {
            text-align: center;
        }
    </style>
</head>

<body>
    <ninja>
        {% set invoice = invoices|first %}
        <table width="100%" cellspacing="0" cellpadding="0" class="">
            <thead class="table-header">
                <tr class="table-header">
                    <th class="">Item #</th>
                    <th class="" width="50%">Description</th>
                    <th class="centered">Quantity</th>
                    <th class="totals-row-label centered">Delivered</th>
                </tr>
            </thead>
            <tbody class="table-body">
                {% for item in invoice.line_items|filter(item => item.type_id == 1) %}
                <tr class="item-row">
                    <td class="">{{ item.product_key }}</td>
                    <td class="">{{ item.notes }}</td>
                    <td class="centered">{{ item.quantity }}</td>
                    <td class="totals-row-label centered">{{ item.quantity }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </ninja>
</body>

</html>