{% extends "layout.html" %}
{% block content %}
  <form id="checkbox-form" method="post">
    {{ form.csrf_token }}
    {{ form.checkbox_values }}
    <p>
      {{ root.name }} {{ form[root.id|string] }}
    </p>
    <div class="toolbar">
      {{ _('select all')|button(id_='select-all')|safe }}
      {{ _('deselect all')|button(id_='select-none')|safe }}
    </div>
    {{ table.display('move')|safe }}
    {{ form.save(class_=config.CSS.button.primary) }}
  </form>
{% endblock %}

{% block script %}
  <script>
    $(document).ready(function () {
      $('#select-all').click(function() {
        var checkboxes = $(this).closest('form').find(':checkbox');
        checkboxes.prop('checked', true);
      });
      $('#select-none').click(function() {
        var checkboxes = $(this).closest('form').find(':checkbox');
        checkboxes.prop('checked', false);
      });
    })
  </script>
{% endblock %}