{% if not pivot_configured %}
<div class="rounded-xl border border-warning-light bg-base p-6 text-sm text-dark">
    <c-i18n.blocktrans>Select at least one row field and one value field in the display options to configure the pivot table.</c-i18n.blocktrans>
</div>
{% else %}
<div
    bloomerp-component="pivot-table"
    data-content-type-id="{{ content_type_id }}"
    class="w-full overflow-x-auto rounded-xl border border-gray-200 bg-base"
>
    <table class="w-full min-w-max border-collapse text-sm">
        <thead class="bg-base">
            {% for header_row in pivot_result.header_rows %}
            <tr class="border-b border-gray-200">
                {% if forloop.first %}
                <th
                    rowspan="{{ pivot_result.header_rows|length }}"
                    class="sticky left-0 z-20 min-w-64 border-r border-gray-200 bg-base px-3 py-2 text-left font-semibold text-dark"
                >
                    <c-i18n.blocktrans>Rows</c-i18n.blocktrans>
                </th>
                {% endif %}
                {% for header in header_row %}
                <th
                    colspan="{{ header.colspan }}"
                    class="min-w-32 border-r border-gray-200 px-3 py-2 text-right font-semibold text-dark last:border-r-0"
                >
                    {{ header.label }}
                </th>
                {% endfor %}
                {% if forloop.first and pivot_show_row_totals %}
                    {% for value_header in pivot_result.value_headers %}
                    <th
                        rowspan="{{ pivot_result.header_rows|length }}"
                        class="min-w-32 border-l border-gray-200 px-3 py-2 text-right font-semibold text-dark"
                    >
                        <c-i18n.blocktrans>Total {{ value_header }}</c-i18n.blocktrans>
                    </th>
                    {% endfor %}
                {% endif %}
            </tr>
            {% endfor %}
        </thead>
        <tbody>
            {% for row in pivot_result.rows %}
            <tr
                data-pivot-row-id="{{ row.row_id }}"
                data-pivot-parent-id="{{ row.parent_id }}"
                {% if row.depth %}hidden{% endif %}
                class="border-b border-gray-200 last:border-b-0 {% if row.has_children %}bg-base font-medium{% else %}bg-white{% endif %}"
            >
                <th
                    scope="row"
                    class="sticky left-0 z-10 border-r border-gray-200 bg-inherit py-2 pr-3 text-left text-dark"
                    style="padding-left: calc(0.75rem + {{ row.depth }} * 1.25rem);"
                >
                    <span class="flex items-center gap-2 whitespace-nowrap">
                        {% if row.has_children %}
                        <button
                            type="button"
                            data-pivot-toggle="{{ row.row_id }}"
                            aria-expanded="false"
                            class="flex size-6 items-center justify-center rounded-md text-gray-500 hover:bg-gray-100 hover:text-dark"
                            title="Expand row"
                        >
                            <i class="fa fa-chevron-right text-xs transition-transform" aria-hidden="true"></i>
                        </button>
                        {% else %}
                        <span class="inline-block size-6" aria-hidden="true"></span>
                        {% endif %}
                        <span>{{ row.label }}</span>
                    </span>
                </th>
                {% for value in row.cells %}
                <td class="border-r border-gray-200 px-3 py-2 text-right tabular-nums text-dark last:border-r-0">
                    {{ value|default_if_none:"—" }}
                </td>
                {% endfor %}
                {% if pivot_show_row_totals %}
                    {% for value in row.totals %}
                    <td class="border-l border-gray-200 px-3 py-2 text-right font-semibold tabular-nums text-dark">
                        {{ value|default_if_none:"—" }}
                    </td>
                    {% endfor %}
                {% endif %}
            </tr>
            {% empty %}
            <tr>
                <td colspan="100" class="px-6 py-8 text-center text-sm text-gray-500">
                    <c-i18n.blocktrans>No records found.</c-i18n.blocktrans>
                </td>
            </tr>
            {% endfor %}
        </tbody>
        {% if pivot_show_column_totals and pivot_result.rows %}
        <tfoot>
            <tr class="border-t-2 border-gray-200 bg-base font-semibold">
                <th class="sticky left-0 z-10 border-r border-gray-200 bg-base px-3 py-2 text-left text-dark">
                    <c-i18n.blocktrans>Column totals</c-i18n.blocktrans>
                </th>
                {% for value in pivot_result.column_totals %}
                <td class="border-r border-gray-200 px-3 py-2 text-right tabular-nums text-dark last:border-r-0">
                    {{ value|default_if_none:"—" }}
                </td>
                {% endfor %}
                {% if pivot_show_row_totals %}
                    {% for value in pivot_result.grand_totals %}
                    <td class="border-l border-gray-200 px-3 py-2 text-right tabular-nums text-dark">
                        {{ value|default_if_none:"—" }}
                    </td>
                    {% endfor %}
                {% endif %}
            </tr>
        </tfoot>
        {% endif %}
    </table>
</div>
{% endif %}