{% extends "wagtailadmin/base.html" %}
{% load i18n wagtailadmin_tags %}
{% block titletag %}{% blocktrans trimmed with form_title=form_page.title|capfirst %}Submissions of {{ form_title }}{% endblocktrans %}{% endblock %}
{% block extra_js %}
    {{ block.super }}

    <script>
        $.fn.datetimepicker.defaults.i18n.wagtail_custom_locale = {
            months: wagtailConfig.STRINGS.MONTHS,
            dayOfWeek: wagtailConfig.STRINGS.WEEKDAYS,
            dayOfWeekShort: wagtailConfig.STRINGS.WEEKDAYS_SHORT,
        }
        $.datetimepicker.setLocale('wagtail_custom_locale');

        $(function() {
            $('#id_date_from').datetimepicker({
                timepicker: false,
                format: 'Y-m-d',
            });
            $('#id_date_to').datetimepicker({
                timepicker: false,
                format: 'Y-m-d',
            });

            var selectAllCheckbox = document.getElementById('select-all');
            var deleteButton = document.getElementById('delete-submissions');

            function updateActions() {
                var submissionCheckboxes = $('input[type=checkbox].select-submission');
                var someSubmissionsSelected = submissionCheckboxes.is(':checked');
                var everySubmissionSelected = !submissionCheckboxes.is(':not(:checked)');

                // Select all box state
                if (everySubmissionSelected) {
                    // Every submission has been selected
                    selectAllCheckbox.checked = true;
                    selectAllCheckbox.indeterminate = false;
                } else if (someSubmissionsSelected) {
                    // At least one, but not all submissions have been selected
                    selectAllCheckbox.checked = false;
                    selectAllCheckbox.indeterminate = true;
                } else {
                    // No submissions have been selected
                    selectAllCheckbox.checked = false;
                    selectAllCheckbox.indeterminate = false;
                }

                // Delete button state
                if (someSubmissionsSelected) {
                    deleteButton.classList.remove('disabled')
                    deleteButton.style.visibility = "visible";
                } else {
                    deleteButton.classList.add('disabled')
                    deleteButton.style.visibility = "hidden";
                }
            }


            // Event handlers

            $(selectAllCheckbox).on('change', function() {
                let checked = this.checked;

                // Update checkbox states
                $('input[type=checkbox].select-submission').each(function() {
                    this.checked = checked;
                });

                updateActions();
            });

            $('input[type=checkbox].select-submission').on('change', function() {
                updateActions();
            });

            // initial call to updateActions to bring delete button state in sync with checkboxes
            // in the case that some checkboxes are pre-checked (which will be the case in some
            // browsers when using the back button)
            updateActions();
        });
    </script>
{% endblock %}
{% block content %}
    {% fragment as form_actions %}
        <div class="dropdown dropdown-button">
            <a href="?export=xlsx" class="button bicolor button--icon">
                {% icon name="download" wrapped=1 %}{% trans 'Download XLSX' %}
            </a>
            <div class="dropdown-toggle">{% icon name="arrow-down" %}</div>
            <ul>
                <li>
                    <a class="button bicolor button--icon" href="?export=csv">
                        {% icon name="download" wrapped=1 %}{% trans 'Download CSV' %}
                    </a>
                </li>
            </ul>
        </div>
    {% endfragment %}

    {% include "wagtailadmin/shared/header.html" with classname="w-header--no-border" title=page_title subtitle=form_page.title|capfirst icon="form" merged=1 extra_actions=form_actions %}

    <div class="report filterable">
        <div class="report__results w-overflow-y-hidden w-overflow-x-scroll w-pb-6">
            {% if submissions %}
                <form action="{% url 'wagtailforms:delete_submissions' form_page.id %}" method="get">
                    {% include "wagtailforms/list_submissions.html" %}
                    {% include "wagtailadmin/shared/pagination_nav.html" with items=page_obj %}
                </form>
            {% else %}
                <p class="no-results-message">{% blocktrans trimmed with title=form_page.title %}There have been no submissions of the '{{ title }}' form.{% endblocktrans %}</p>
            {% endif %}
        </div>
        <div class="filterable__filters">
            <h2>{% trans 'Filter' %}</h2>
            <form action="" method="get" novalidate>
                <button class="button button-longrunning" type="submit">{% icon name="spinner" %}{% trans 'Apply filters' %}</button>
                {% for field in select_date_form %}
                    {% include "wagtailadmin/shared/field_as_li.html" with field=field %}
                {% endfor %}
            </form>
        </div>
    </div>
{% endblock %}
