{% extends "_table.html" %}
{% block filters %}
<div class="row checkboxes">
    {% for column in columns %}
    <div class="col s6 m1 {% if loop.first %}offset-m2{% endif %}">
        <input type="checkbox" id="ch-{{ column }}" {% if loop.first or loop.last %}checked="true"{% endif %} />
        <label for="ch-{{ column }}">{{ column | capitalize}}</label>
    </div>
    {% endfor %}
</div>
{% endblock %}
{% block scripts %}
<script>
{% for column in columns %}
    $('#ch-{{ column }}').on("click", function() {
        if ($(this).prop("checked")) {
            $('th:nth-child({{ loop.index0 + 2 }})').show();
            $('td:nth-child({{ loop.index0 + 2 }})').show();
            $('tr.zone{{ loop.index0 }}').show();
        } else {
            $('th:nth-child({{ loop.index0 + 2 }})').hide();
            $('td:nth-child({{ loop.index0 + 2 }})').hide();
            $('tr.zone{{ loop.index0 }}').hide();
        }
    });
{% endfor %}
    $(document).ready(function(){
        {% for column in columns %}
            {% if not (loop.first or loop.last) %}
                $('th:nth-child({{ loop.index0 + 2 }})').hide();
                $('td:nth-child({{ loop.index0 + 2 }})').hide();
                $('tr.zone{{ loop.index0 }}').hide();
            {% endif %}
        {% endfor %}
    });
</script>
{% endblock %}