<div class="table-responsive">
    <table class="table table-hover table-striped table-bordered">
        <thead>
        <tr>
            <th>{{ 'FirstName'|trans }}</th>
            <th>{{ 'LastName'|trans }}</th>
            {% if show_email %}
                <th>{{ 'Email'|trans }}</th>
            {% endif %}
            <th class="text-center">{{ 'ScormTime'|trans }}</th>
            <th class="text-right">{{ 'Progress'|trans }}</th>
            <th class="text-right">{{ 'ScormScore'|trans }}</th>
            <th class="text-center">{{ 'LastConnection'|trans }}</th>
            {% if not export %}
                <th>{{ 'Actions'|trans }}</th>
            {% endif %}
        </tr>
        </thead>
        <tbody>
        {% for user in user_list %}
            <tr id="row-{{ user.id }}">
                <td>{{ user.first_name }}</td>
                <td>{{ user.last_name }}</td>
                {% if show_email %}
                    <td>{{ user.email }}</td>
                {% endif %}
                <td class="text-center">{{ user.lp_time }}</td>
                <td class="text-right">{{ user.lp_progress }}</td>
                <td class="text-right">{{ user.lp_score }}</td>
                <td class="text-center">{{ user.lp_last_connection }}</td>
                {% if not export %}
                    <td>
                        <button class="btn btn-primary btn-sm" data-id="{{ user.id }}">{{ 'Details'|trans }}</button>
                    </td>
                {% endif %}
            </tr>
            <tr class="hide"></tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<script>
    $(function () {
        $('tr td button').on('click', function (e) {
            e.preventDefault();
            var self = $(this);
            var userId = self.data('id') || 0;
            var trHead = self.parents('tr');
            var trDetail = trHead.next();
            if (self.is('.active')) {
                self.removeClass('active');
                trDetail.html('').addClass('hide');
            } else {
                self.addClass('active');
                var newTD = $('<td>', {
                    colspan: 7
                });
                newTD.load('{{ _p.web_main ~ 'mySpace/lp_tracking.php?action=stats&extend_all=0&id_session=' ~ session_id ~ '&course=' ~ course_code ~ '&lp_id=' ~ lp_id ~ '&student_id=\' + userId + \'&origin=tracking_course&allow_extend=0' }} .table-responsive', function () {
                    newTD.appendTo(trDetail);
                });
                trDetail.removeClass('hide');
            }
        });
    });
</script>
