<style type="text/css">
    body, html {
        margin-top: 10px;
        padding: 0;
        width: 100%;
        height: auto;
        font-family: Inter, sans-serif;
        font-size: 14px;
        line-height: 21px;
        color: #171717;
    }

    .title-letter-spacing {
        font-size: 15px;
        font-weight: 600;
        color: #171717;
    }

    .report-table table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .report-table thead th {
        background: #f8f8f8;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        color: #7c7c7c;
        border-top: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
        padding: 6px 8px;
    }

    .report-table tbody td {
        padding: 6px 8px;
        border-top: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
        vertical-align: top;
        word-wrap: break-word;
        font-size: 14px;
    }

    .report-table thead th:first-child {
        border-left: 1px solid #ededed;
    }

    .report-table thead th:last-child {
        border-right: 1px solid #ededed;
    }

    .report-table tbody tr:last-child td {
        border-bottom: none;
    }

    .text-center { text-align: center; }
    .text-right { text-align: right; font-variant-numeric: tabular-nums; }
    .text-left { text-align: left; }
    .text-bold { font-weight: 700; }

    .report-meta {
        margin: 10px 0 14px;
        padding: 8px 10px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
    }

    .report-meta .left,
    .report-meta .right {
        display: flex;
        flex-direction: column;
    }

    .report-meta strong {
        color: #7c7c7c;
        font-weight: 500;
    }

    .report-subtitle {
        margin: 10px 0 14px;
    }

    @media print {
        @page {
            size: A4;
            margin-top: 10mm;
        }
        thead { display: table-header-group; }
        tr { page-break-inside: avoid; }
    }
</style>

<br>

<div>

    <div class="text-center" style="margin-bottom: 12px;">
        <div class="title-letter-spacing">
            {%= __(report.report_name) %}
        </div>
    </div>

    {% if (subtitle && subtitle.trim()) { %}
        <div class="report-subtitle">
            {{ subtitle }}
        </div>
    {% } else { %}
        <div class="report-meta">
            <div class="left">
                <div>
                    <strong>{%= __("Supplier") %}:</strong>
                    {%= (filters.party.length && filters.party.join(", ")) || __("All Parties") %}
                </div>
            </div>

            <div class="right text-right">
                <div>
                    <strong>{%= __("Report Date") %}:</strong>
                    {%= frappe.datetime.str_to_user(filters.report_date) %}
                </div>
            </div>
        </div>
    {% } %}

    <div class="report-table">
        <table>
            <thead>
                <tr>
                    <th style="width: 8em; text-align: left;">{%= __("Date") %}</th>
                    <th style="text-align: left;">{%= __("Reference") %}</th>

                    {% if(filters.show_remarks) { %}
                        <th style="text-align: left;">{%= __("Remarks") %}</th>
                    {% } %}

                    <th style="width: 10em; text-align: right;">{%= __("Age (Days)") %}</th>
                    <th style="width: 10em; text-align: right;">{%= __("Invoiced Amount") %}</th>
                    <th style="width: 11em; text-align: right;">{%= __("Outstanding Amount") %}</th>
                </tr>
            </thead>

            <tbody>
                {% for(var i=0, l=data.length; i<l; i++) { %}
                    <tr>
                        <td class="text-left">{%= frappe.datetime.str_to_user(data[i]["posting_date"]) %}</td>

                        <td class="{% if(i == data.length - 1) { %}text-left text-bold{% } %}">
                            {% if(i == data.length - 1) { %}
                                {%= __("Total") %}
                            {% } else { %}
                                {%= data[i]["voucher_no"] %}
                            {% } %}
                        </td>

                        {% if(filters.show_remarks) { %}
                            <td class="text-left">
                                {% if(data[i]["remarks"] && data[i]["remarks"] != "No Remarks") { %}
                                    {%= data[i]["remarks"] %}
                                {% } %}
                            </td>
                        {% } %}

                        <td class="text-right">{%= data[i]["age"] %}</td>
                        <td class="text-right">{%= format_currency(data[i]["invoiced"], data[i]["currency"]) %}</td>
                        <td class="text-right">{%= format_currency(data[i]["outstanding"], data[i]["currency"]) %}</td>
                    </tr>
                {% } %}
            </tbody>
        </table>
    </div>

    &nbsp;

    {% if(filters.show_future_payments) { %}
        {%
            var balance_row = data.slice(-1).pop();
            var start = report.columns.findIndex(e => e.fieldname == 'age');
            var currency = data[data.length - 1]["currency"];

            var ranges = [
                report.columns[start].label,
                report.columns[start+1].label,
                report.columns[start+2].label,
                report.columns[start+3].label,
                report.columns[start+4].label,
                report.columns[start+5].label
            ];
        %}

        {% if(balance_row) { %}
        <div class="report-table">
            <table>
                <thead>
                    <tr>
                        <th style="text-align: right;"></th>
                        {% for(var i = 0; i < ranges.length; i++) { %}
                            <th style="text-align: right;">{%= __(ranges[i]) %}</th>
                        {% } %}
                        <th style="text-align: right;">{%= __("Total") %}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{%= __("Total Outstanding") %}</td>
                        <td class="text-right">{%= format_number(balance_row["age"], null, 2) %}</td>
                        <td class="text-right">{%= format_currency(balance_row["range1"], currency) %}</td>
                        <td class="text-right">{%= format_currency(balance_row["range2"], currency) %}</td>
                        <td class="text-right">{%= format_currency(balance_row["range3"], currency) %}</td>
                        <td class="text-right">{%= format_currency(balance_row["range4"], currency) %}</td>
                        <td class="text-right">{%= format_currency(balance_row["range5"], currency) %}</td>
                        <td class="text-right">{%= format_currency(flt(balance_row["outstanding"]), currency) %}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        {% } %}
    {% } %}

    <p class="text-right">
        {%= __("Printed on {0}", [
            frappe.datetime.str_to_user(frappe.datetime.get_datetime_as_string())
        ]) %}
    </p>

</div>