<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .popover-wide {
        max-width: 400px;
        min-width: 300px;
        word-break: break-word;
    }
    </style>
    <meta charset="UTF-8">
    <title>"What's the Damage" - {{ _('Result') }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.3.4/css/dataTables.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/4.0.4/css/fixedHeader.bootstrap5.min.css">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
    <!-- jQuery and DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/4.0.4/js/dataTables.fixedHeader.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('#resultsTable').DataTable({
                responsive: false,
                fixedHeader: true,
                order: [],
                pageLength: 25,
                scrollX: true,
                autoWidth: false
            });

            // Enable Bootstrap popovers for details
            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
            var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
                return new bootstrap.Popover(popoverTriggerEl, {
                    html: true,
                    sanitize: false
                });
            });

            document.getElementById('downloadCSVButton').addEventListener('click', function() {
                fetch('/download', { method: 'GET', credentials: 'same-origin' })
                    .then(response => response.blob())
                    .then(blob => {
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.style.display = 'none';
                        a.href = url;
                        a.download = 'result.csv';
                        document.body.appendChild(a);
                        a.click();
                        window.URL.revokeObjectURL(url);
                    })
                    .catch(error => console.error('Error downloading CSV:', error));
            });
        });
    </script>
</head>
<body>
    <header>
        {% include 'header.html' %}
    </header>
    <main class="container-fluid">
        <h1 class="text-center p-2 pb-1">{{ _('Processed results') }}</h1>
        <div class="row">
            <div class="col-md-12 mb-3">
                <div class="table-responsive">
                    <table id="resultsTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                {% for header in headers %}
                                    {% if header is mapping %}
                                        <th data-order="{{ header.timestamp }}">{{ header.display }}</th>
                                    {% else %}
                                        <th>{{ header }}</th>
                                    {% endif %}
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in rows %}
                            <tr>
                                {% for cell_data in row %}
                                    {% if loop.index0 == 0 %}
                                        <!-- Categories column - no data-order needed -->
                                        <td>{{ cell_data.display }}</td>
                                    {% else %}
                                        <!-- Numeric columns with data-order for sorting and popover for details -->
                                        <td data-order="{{ cell_data.order }}"
                                            {% if cell_data.details %}
                                                tabindex="0"
                                                data-bs-toggle="popover"
                                                data-bs-trigger="hover focus"
                                                data-bs-html="true"
                                                data-bs-content="{{ cell_data.details.replace('\n', '<br>')|safe }}"
                                                data-bs-placement="top"
                                                data-bs-custom-class="popover-wide"
                                            {% endif %}
                                        >{{ cell_data.display }}</td>
                                    {% endif %}
                                {% endfor %}
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <a href="/" class="btn btn-secondary mt-3 mb-3">{{ _('Back') }}</a>
            </div>
            <div class="col-md-6 text-end">
                <button type="button" class="btn btn-secondary mt-3 mb-3" id="downloadCSVButton">{{ _('Download CSV') }}</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-end">
                <p class="fw-light fs-6">{{ _('Note: Should you want to have better results in importing the generated CSV file, please make sure to check "No Currenty Format" on the previous form.') }}</p>
            </div>
        </div>
    </main>
    <footer class="bg-success text-white text-center py-3 mt-3">
        {% include 'footer.html' %}
    </footer>
</body>
</html>