{% extends "listing.html" %}

{% block datacontent %}
<div class="card mb-0">
    <div class="card-header">
        <div class="row">
            <div class="col-8">
                <h4 class=""> Passes Listing</h4>
            </div>
            <div class="col-1 ml-auto">

            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            {% if passes_list %}
                <table class="table tablesorter table-striped" data-sort="table" id="routine_table">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 10%">label</th>
                            <th class="header text-center" style="width: 7%">educative</th>
                            <th class="header text-center" style="width: 7%">repetition</th>
                            <th class="header text-center" style="width: 7%">regexp</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for passe in passes_list %}
                        <tr role="row" class="{% cycle 'odd' 'even' %}">
                            <td class="text-center">{{ passe.label }}</td>
                            <td class="text-center">{{ passe.educative }}</td>
                            <td class="text-center">{{ passe.repetition }}</td>
                            <td class="text-center">{{ passe.regexp }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p class="muted-text">There are no passe corresponding to your criterias.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    // $(document).ready(function () {
    //     $('routine_table').tablesorter({
    //         {% if request.user|has_group:"trainer" %}
    //             headers: {
    //                 0: { sorter: false },
    //             },
    //             sortList: [[1, 0]],
    //         {% else %}
    //             sortList: [[0, 0]],
    //         {% endif %}
    //     });

    //     $('#routine_table').DataTable({
    //         scrollY: '50vh',
    //         scrollCollapse: true,
    //         paging: false,
    //         searching: false,
    //         ordering: false,
    //         "bInfo": false,
    //     });
    // });
</script>
{% endblock %}