{% extends "wagtailadmin/base.html" %}
{% load i18n %}
{% block titletag %}
{% blocktrans with form_title=object.title|capfirst%}
Submissions of {{ form_title }}
{% endblocktrans %}
{% endblock %}
{% block extra_js %}
{{ block.super }}
{% include "streamforms/wagtailadmin/shared/datetimepicker_translations.html"%}

<script>
  $(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');
    var selectedSubmissions = {};
    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)
    $(document).ready(function () { updateActions() });
  });
</script>
{% endblock %}
{% block content %}
<header class="nice-padding hasform">
  <form action="" method="get" novalidate>
    <div class="row">
      <div class="left">
        <div class="col">
          <h1 class="icon icon-form">
            {% blocktrans with form_title=object.title|capfirst %}Form data
            <span>{{ form_title }}</span>{% endblocktrans %}
          </h1>
        </div>
        <div class="col search-bar">
          <ul class="fields row rowflush">
            {% for field in filter_form %}
            {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small" li_classes="col4" %}
            {% endfor %}
            <li class="submit col2">
              <button name="action" value="filter"
                class="button button-filter">{% trans 'Filter' %}</button>
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <button name="action" value="CSV"
          class="button bicolor icon icon-download">{% trans 'Download CSV' %}</button>
      </div>
    </div>
  </form>
</header>
<div>
  {% if object_list %}
  <form
    action="{% url 'wagtail_translatableforms:streamforms_delete_submissions' object.id %}"
    method="get">
    {% include "streamforms/list_submissions.html" %}
    {% include "streamforms/partials/pagination_nav.html" with items=page_obj%}
  </form>
  {% else %}
  <p class="no-results-message nice-padding">
    {% blocktrans with title=object.title %}
    There have been no submissions of the '{{ title }}'form.
    {% endblocktrans %}</p>
  {% endif %}
</div>
{% endblock %}