<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>"What's the Damage" - {{ _('Result') }}</title>
    <link href="{{ url_for('static', filename='dist/css/main.css') }}" rel="stylesheet">
    <script type="module" src="{{ url_for('static', filename='dist/js/main.js') }}"></script>
    <!-- Translated strings for JavaScript -->
    <script>
        globalThis.resultId = '{{ result_id }}';
        globalThis.exportCsvText = '{{ _("Export CSV") }}';
        globalThis.exportExcelText = '{{ _("Export Excel") }}';
        globalThis.highlights = '{{ accounts_data.highlights | tojson }}'
    </script>
</head>
<body>
    <header>
        {% include 'header.html' %}
    </header>
    <main class="container-fluid">
        <h1 class="text-center p-2 pb-1">{{ _('Processed results') }}</h1>

        {% from '_statistical_controls.html' import render_statistical_controls %}
        {{ render_statistical_controls(result_id) }}

        {% for account in accounts_data.accounts %}
        {% set dt_response = account.dt_response %}
        {% set urls = drilldown_urls_by_account[account.id] %}
        <div class="account-section">
            <div class="account-header">
                <h2>
                    {{ _('Account') }}: {{ account.formatted_id }}
                    {% if account.currency %}
                        ({{ account.currency }})
                    {% endif %}
                </h2>
            </div>

            <div class="row">
                <div class="col-md-12 mb-3">
                    <div class="table-responsive">
                        <table id="datatable-{{ account.id }}" class="table table-bordered" data-datatable="true">
                            <thead>
                                <tr>
                                    <th>{{ _('Categories') }}</th>
                                    {% set months = [] %}
                                    {% for agg_row in dt_response.data %}
                                        {% set _month_field = agg_row.date %}
                                        {% if (_month_field.display, _month_field.timestamp) not in months %}
                                            {% set _ = months.append((_month_field.display, _month_field.timestamp)) %}
                                        {% endif %}
                                    {% endfor %}
                                    {% for month_display, month_ts in months | sort(attribute='1', reverse=True) %}
                                        <th data-order="{{ month_ts }}"><a href="{{ urls.month_urls.get(month_ts|string, {}).month_url or '#' }}" class="clickable">{{ month_display }}</a></th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody>
                                {% set cat_month_map = {} %}
                                    {% for agg_row in dt_response.data %}
                                    {% if agg_row.category not in cat_month_map %}
                                        {% set _ = cat_month_map.update({agg_row.category: {}}) %}
                                    {% endif %}
                                    {% set _month_field = agg_row.date %}
                                    {% set _month_key = _month_field.timestamp %}
                                    {% set _ = cat_month_map[agg_row.category].update({_month_key: agg_row}) %}
                                {% endfor %}

                                {% for category in cat_month_map.keys() | sort %}
                                <tr>
                                    <td><a href="{{ urls.category_urls[category].category_url }}" class="clickable">{{ category }}</a></td>
                                    {% for month_display, month_ts in months | sort(attribute='1', reverse=True) %}
                                        {% set agg_row_data = cat_month_map[category].get(month_ts) %}
                                        {% if agg_row_data %}
                                            {% set details_list = [] %}
                                                {% for detail in agg_row_data.details %}
                                                {% set _ = details_list.append(detail.date.display ~ ': ' ~ detail.amount.display ~ ' - ' ~ detail.merchant) %}
                                            {% endfor %}
                                            {% set details_str = details_list | join('<br>') %}

                                            <td data-order="{{ agg_row_data.total.raw }}"
                                                data-row-id="{{ agg_row_data.row_id }}"
                                                class=""
                                                {% if agg_row_data.details %}
                                                    tabindex="0"
                                                    data-bs-toggle="popover"
                                                    data-bs-trigger="hover focus"
                                                    data-bs-html="true"
                                                    data-bs-content="{{ details_str }}"
                                                    data-bs-placement="top"
                                                    data-bs-custom-class="popover-wide"
                                                {% endif %}
                                            ><a href="{{ urls.cell_urls.get(agg_row_data.row_id, {}).cell_url or '#' }}" class="clickable">{{ agg_row_data.total.display }}</a></td>
                                        {% else %}
                                            <td data-order="0"></td>
                                        {% endif %}
                                    {% endfor %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}

        <div class="row">
            <div class="col-md-6">
                <a href="/" class="btn btn-secondary mt-3 mb-3">{{ _('Back') }}</a>
            </div>
        </div>
    </main>
    <footer class="bg-success text-white text-center py-3 mt-3">
        {% include 'footer.html' %}
    </footer>
</body>
</html>