<div class="table-responsive">
    <table id="table-overview" class="table table-bordered">
        <colgroup>
            <col style="width: 30px">
            <col style="width: 30px">
            <col style="width: 330px">
            <col style="width: 55px">
            <col style="width: 55px">
            <col style="width: 55px">
            <col style="width: 55px">
            <col style="width: 55px">
            <col style="width: 55px">
            <col style="width: 55px">
            <col style="width: 55px">
            <col style="width: 55px">
            <col style="width: 55px">
            <col style="width: 55px">
            <col style="width: 55px">
            <col style="width: 100px">
            <col style="width: 55px">
        </colgroup>
        <thead>
        <tr>
            <th colspan="2" class="transparent"></th>
            <th colspan="7">{{ Lang_translate('_INFO','coursereport') }}</th>
            <th colspan="7">{{ Lang_translate('_DETAILS','standard') }}</th>
            <th class="transparent"></th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>{{ Lang_translate('_TYPE','standard') }}</td>
            <td>{{ Lang_translate('_TEST_QUEST_MAXTESTSCORE','test') }}</td>
            <td>{{ Lang_translate('_REQUIRED_SCORE','standard') }}</td>
            <td>{{ Lang_translate('_WEIGHT','coursereport') }}</td>
            <td>{{ Lang_translate('_SHOW_TO_USER','coursereport') }}</td>
            <td>{{ Lang_translate('_USE_FOR_FINAL','coursereport') }}</td>
            <td>{{ Lang_translate('_PASSED','coursereport') }}</td>
            <td>{{ Lang_translate('_NOT_PASSED','coursereport') }}</td>
            <td>{{ Lang_translate('_NOT_CHECKED','coursereport') }}</td>
            <td>{{ Lang_translate('_AVERANGE','standard') }}</td>
            <td>{{ Lang_translate('_MAX_SCORE','standard') }}</td>
            <td>{{ Lang_translate('_MIN_SCORE','standard') }}</td>
            <td>{{ Lang_translate('_SHOW_IN_DETAIL','test') }}</td>
            <td></td>
        </tr>
        </thead>
        <tbody class="course-sortable">
        {% for test in overview['tests'] %}
            <tr>
                <td class="handle"><i class="fa fa-sort"></i></td>
                <td></td>
                <td class="name">{{ test.name }}</td>
                <td class="table-cell">{{ test.typeString }}</td>
                <td class="table-cell">{{ test.max }}</td>
                <td class="table-cell">{{ test.required }}</td>
                <td class="table-cell">{{ test.weight }}</td>
                {% if test.show %}
                    <td class="text-center table-cell"><i class="fa fa-check"></i></td>
                {% else %}
                    <td class="text-center table-cell"><i class="fa fa-close"></i></td>
                {% endif %}
                {% if test.final %}
                    <td class="text-center table-cell"><i class="fa fa-check"></i></td>
                {% else %}
                    <td class="text-center table-cell"><i class="fa fa-close"></i></td>
                {% endif %}
                <td class="table-cell">
                    {% if test.passed.active %}
                        <a href="{{ test.passed.link }}">{{ test.passed.value }}</a>
                    {% else %}
                        {{ test.passed.value }}
                    {% endif %}
                </td>
                <td class="table-cell">
                    {% if test.not_passed.active %}
                        <a href="{{ test.not_passed.link }}">{{ test.not_passed.value }}</a>
                    {% else %}
                        {{ test.not_passed.value }}
                    {% endif %}
                </td>
                <td class="table-cell">
                    {% if test.not_checked.active %}
                        <a href="{{ test.not_checked.link }}">{{ test.not_checked.value }}</a>
                    {% else %}
                        {{ test.not_checked.value }}
                    {% endif %}
                </td>
                <td class="table-cell">{{ test.average }}</td>
                <td class="table-cell">{{ test.max_score }}</td>
                <td class="table-cell">{{ test.min_score }}</td>
                <td class="table-cell">
                    <input class="js-set-detail-visibility" type="checkbox" data-value="{{ test.idReport }}" {% if test.showInDetail %}checked{% endif %}>
                </td>
                <td class="actions">
                    {% for action in test.actions %}
                        {% if action.visible %}
                            <a href="{{ action.link }}"><i class="fa fa-{{ action.icon }}"></i></a>
                        {% endif %}
                    {% endfor %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
        <tfoot class="empty">
        <th colspan="17"></th>
        </tfoot>
    </table>

</div>

<div class="button--add">
    <span>{{ Lang_translate('_ADD_ACTIVITY','coursereport') }}</span>
    <ul class="dropdown">
        <li><a href="index.php?r=lms/coursereport/addactivity">{{ Lang_translate('_ADD_ACTIVITY_TITLE','coursereport') }}</a>
        </li>
        <li><a href="index.php?r=lms/coursereport/addscorm">{{ Lang_translate('_ADD_SCORM_RESULTS','coursereport') }}</a>
        </li>
    </ul>
</div>


<div class="activities-container">
    {% for activity in details['activities'] %}
        <div data-activityId="{{ activity.id }}" data-activityName="{{ activity.name }}"></div>
    {% endfor %}
</div>


<script type="text/javascript">

    activities = {{ details|json_encode(constant('JSON_HEX_APOS')) | raw }};

    $(document).ready(function() {
        var table = $('#table-overview').DataTable({
            paging: true,
            pagingType: 'numbers',
            "columns": [
                { "orderable": false, "searchable": false },
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                null,
                null,
                null,
                null,
                null,
                { "orderable": false, "searchable": false },
                { "orderable": false, "searchable": false },
                null,
                null,
                null,
                null,
                null,
                null,
                { "orderable": false, "searchable": false },
                { "orderable": false, "searchable": false }
            ],
            "columnDefs": [
                {
                    "targets": [ 4 ],
                    "visible": false,
                },
                {
                    "targets": [ 5 ],
                    "visible": false
                },
                {
                    "targets": [ 6 ],
                    "visible": false
                }
            ],
            "language": {
                "info": "",
            }
        });

        function format ( d ) {
            const label4 = '{{ Lang_translate('_TEST_QUEST_MAXTESTSCORE','test') }}';
            const label5 = '{{ Lang_translate('_REQUIRED_SCORE','standard') }}';
            const label6 = '{{ Lang_translate('_WEIGHT','coursereport') }}';

            // `d` is the original data object for the row
            return '<table cellpadding="5" cellspacing="0" border="0" class="extra-info">'+
                    '<tr>'+
                        '<td style="text-align: left; width: 200px">'+label4+'</td>'+
                        '<td style="text-align: center; width: 30px">'+d[4]+'</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td style="text-align: left; width: 200px">'+label5+'</td>'+
                        '<td style="text-align: center; width: 30px">'+d[5]+'</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td style="text-align: left; width: 200px">'+label6+'</td>'+
                        '<td style="text-align: center; width: 30px">'+d[6]+'</td>'+
                    '</tr>'+
                '</table>';
        }

        // Add event listener for opening and closing details
        $('#table-overview tbody').on('click', 'td.details-control', function () {
            const tr = $(this).closest('tr');
            const row = table.row( tr );

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        } );
    });

</script>
