{% extends 'common.html' %}
{% block title %}
    Task Results
{% endblock %}
{% block content %}
    <style>
        body {
            max-width: unset;
            width: 100%;
        }
        .task-results-wrapper {
            width: 100%;
        }
        .task-results-wrapper table {
            width: 100%;
            table-layout: auto;
        }
        .task-results-wrapper th,
        .task-results-wrapper td {
            vertical-align: top;
        }
    </style>
    <div class="task-results-wrapper">
    <h1>DB Task Results</h1>
    <p>
        {{ page_obj.paginator.count }} résultat(s) au total.
        Affichage page {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}.
    </p>
    <form method="post" action="{{ request.get_full_path }}">
        {% csrf_token %}
        <input type="hidden" name="action" value="delete_successful_tasks" />
        <button
            type="submit"
            onclick="return confirm('Supprimer toutes les tâches SUCCESSFUL ?');"
        >
            Supprimer les tâches SUCCESSFUL
        </button>
    </form>

    <form method="get">
        <input type="hidden" name="sort" value="{{ sort }}">
        <p id="filter-actions">
            <button type="submit">Filtrer</button>
            <a href="{{ request.path }}">Réinitialiser</a>
        </p>
        <div style="overflow-x: auto;">
            <table>
                <thead>
                <tr>
                    {% for column in columns %}
                        <th>
                            {% if column.sortable %}
                                <a href="?{{ column.sort_link }}">
                                    {{ column.label }}
                                    {% if column.is_sorted %}
                                        {% if sort_desc %}▼{% else %}▲{% endif %}
                                    {% endif %}
                                </a>
                            {% else %}
                                {{ column.label }}
                            {% endif %}
                        </th>
                    {% endfor %}
                </tr>
                <tr>
                    {% for column in columns %}
                        <th>
                            {% if column.filterable %}
                                {% if column.name == "status" %}
                                    <select name="f_status">
                                        <option value="">Tous statuts</option>
                                        {% for status_value in status_filter_values %}
                                            <option value="{{ status_value }}" {% if column.filter_value == status_value %}selected{% endif %}>
                                                {{ status_value }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                {% elif column.name == "task_path" %}
                                    <select name="f_task_path">
                                        <option value="">Tous task_path</option>
                                        {% for task_path_value in task_path_filter_values %}
                                            <option value="{{ task_path_value }}" {% if column.filter_value == task_path_value %}selected{% endif %}>
                                                {{ task_path_value }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                {% elif column.name == "enqueued_at" %}
                                    <select name="f_enqueued_at_date">
                                        <option value="">Toutes dates</option>
                                        {% for enqueued_date in enqueued_at_date_filter_values %}
                                            <option value="{{ enqueued_date }}" {% if column.filter_value == enqueued_date %}selected{% endif %}>
                                                {{ enqueued_date }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                {% else %}
                                    <input
                                        type="text"
                                        name="f_{{ column.name }}"
                                        value="{{ column.filter_value }}"
                                        placeholder="Filtrer {{ column.name }}"
                                    />
                                {% endif %}
                            {% endif %}
                        </th>
                    {% endfor %}
                </tr>
                </thead>
                <tbody>
                {% for row in rows %}
                    <tr>
                        {% for value in row %}
                            <td>
                                {% if forloop.first %}
                                    <a href="{{ value }}" up-layer="new" up-size="large" up-history="false">détails</a>
                                {% else %}
                                    <pre style="margin:0;white-space:pre-wrap;">{{ value }}</pre>
                                {% endif %}
                            </td>
                        {% endfor %}
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="{{ columns|length }}">Aucun résultat.</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </form>

    <p>
        {% if previous_page_link %}
            <a href="?{{ previous_page_link }}">← Page précédente</a>
        {% endif %}
        {% if next_page_link %}
            <a href="?{{ next_page_link }}" style="margin-left: 1em;">Page suivante →</a>
        {% endif %}
    </p>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const form = document.querySelector("form[method='get']");
            if (!form) {
                return;
            }
            function submitFiltersForm() {
                if (form.requestSubmit) {
                    form.requestSubmit();
                } else {
                    form.submit();
                }
            }

            const actions = document.getElementById("filter-actions");
            if (actions) {
                actions.style.display = "none";
            }

            const filterFields = form.querySelectorAll(
                "input[name^='f_'], select[name^='f_']"
            );
            const lastSubmittedFilterValues = {};

            function maybeSubmitForField(field) {
                const currentValue = field.value;
                if (lastSubmittedFilterValues[field.name] === currentValue) {
                    return;
                }
                lastSubmittedFilterValues[field.name] = currentValue;
                submitFiltersForm();
            }

            for (const field of filterFields) {
                lastSubmittedFilterValues[field.name] = field.value;
                field.addEventListener("change", function () {
                    maybeSubmitForField(field);
                });
            }
        });
    </script>
    </div>
{% endblock %}