<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ _('Details for Month') }}: {{ _(data[0].date.display if data) }}</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 and highlights for JavaScript -->
    <script>
        globalThis.resultId = '{{ result_id }}';
        globalThis.highlights = '{{ highlights | tojson }}';
    </script>
</head>
<body>
    <header>
        {% include 'header.html' %}
    </header>
    <main class="container-fluid">
        <h1>{{ _('Details for Month') }}: {{ _(data[0].date.display if data) }}</h1>
        <h2>{{ _('Account') }}: {{ formatted_account }}</h2>

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

        <div class="table-responsive">
            <table id="datatable-month" class="table table-bordered" data-datatable="true">
                <thead>
                    <tr>
                        <th>{{ _('Category') }}</th>
                        <th>{{ _('Total') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in data %}
                    <tr>
                        <td><a href="{{ urls.category_urls[row.category].category_url }}" class="clickable">{{ row.category }}</a></td>
                        <td data-row-id="{{ row.row_id }}" class="">{{ row.total.display }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <a href="/" class="btn btn-secondary">{{ _('Back') }}</a>
    </main>
    <footer class="bg-success text-white text-center py-3 mt-3">
        {% include 'footer.html' %}
    </footer>
</body>
</html>