<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;
        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;
    }

    .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;
    }

    .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; }

    @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>{%= __("Customer") %}:</strong>
                    {%= (filters.party && filters.party.length && filters.party.join(", ")) || __("All Parties") %}
                </div>
            </div>

            <div class="right text-right">
                <div>
                    <strong>{%= __("Ageing Based On") %}:</strong>
                    {%= __(filters.ageing_based_on) %}
                </div>
                <div>
                    <strong>{%= __("As on Date") %}:</strong>
                    {%= frappe.datetime.str_to_user(filters.report_date) %}
                </div>
            </div>
        </div>
    {% } %}

    <div class="report-table">
        <table>
            <thead>
                <tr>
                    <th class="text-left">{%= __("Customer") %}</th>
                    <th class="text-right">{%= __("Total Invoiced Amount") %}</th>
                    <th class="text-right">{%= __("Total Paid Amount") %}</th>
                    <th class="text-right">{%= __("Credit Note Amount") %}</th>
                    <th class="text-right">{%= __("Total Outstanding Amount") %}</th>
                </tr>
                </thead>

                <tbody>
                {% for (var i = 0, l = data.length; i < l; i++) {
                    var row = data[i];
                    if (!(row.party || row.is_total_row)) continue;
                %}
                    <tr>
                        <td class="{% if (row.is_total_row) { %}text-bold{% } %}">
                            {% if (row.is_total_row) { %}
                                {%= __("Total") %}
                            {% } else { %}
                                {%= row.party %}
                            {% } %}
                        </td>

                        <td class="text-right">
                            {%= format_currency(row.invoiced, row.currency) %}
                        </td>
                        <td class="text-right">
                            {%= format_currency(row.paid, row.currency) %}
                        </td>
                        <td class="text-right">
                            {%= format_currency(row.credit_note, row.currency) %}
                        </td>
                        <td class="text-right">
                            {%= format_currency(row.outstanding, row.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>