{% extends 'generic/object_list.html' %}
{% load helpers %}

{% block buttons %}
<button type="button" class="btn btn-default" id="accordion-toggle-all">Collapse All</button>
{% endblock %}

{% block javascript %}
    {{ block.super }}
    <script>
        $("button.button-toggle").click(function() {
            $(this).children("i").toggleClass("mdi-chevron-right mdi-chevron-down");
        });
        // Toggle v -. >
        $("#accordion .accordion-toggle").click(function() {
            $(this).toggleClass("mdi-chevron-down mdi-chevron-right");
        });
        // Dynamically collapse/expand all when clicking the "Collapse All" button, and then update the button text.
        $('#accordion-toggle-all').on('click', function () {

           if ($(this).data("lastState") === null || $(this).data("lastState") === 1) {
                $('.collapse').collapse('show');
                $(this).data("lastState", 0);

                $("#accordion .accordion-toggle").addClass("mdi-chevron-down").removeClass("mdi-chevron-right");

                $(this).text("Collapse All");
           }
           else {
                $('[class^=collapseme]').removeData('bs.collapse').collapse({parent: false, toggle: false})
                .collapse('hide')
                .removeData('bs.collapse')
                .collapse({parent: '#accordion', toggle: false});

                $(this).data("lastState", 1);
                $("#accordion .accordion-toggle").addClass("mdi-chevron-right").removeClass("mdi-chevron-down");

                $(this).text("Expand All");
            }
        });
     </script>
{% endblock %}
