{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see
<http : //www.gnu.org/licenses />.
}}
{{!
@template mod_interactivevideo/reporttable
Report table.
Example context (json):
{
}
}}
<div id="wrapper" class="position-relative"></div>
<div id="toolbar" class="bg-transparent pt-5 position-fixed"></div>
<div id="reporttable"
     class="p-3 position-relative"
     style="margin-top: 70px">
    {{{groupselector}}}
    <div class="position-absolute w-100 h-100 no-pointer bg-white"
         id="background-loading">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <div class="spinner-border text-danger"
                 style="width: 3rem;
                        height: 3rem"
                 role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
    <table id="completiontable"
           class="table table-sm table-bordered border table-striped w-100 m-0">
        <thead class="sticky-top bg-white">
            <tr>
                <th id="id" class="exportable inv">{{#str}}id,mod_interactivevideo{{/str}}</th>
                <th id="participant" class="bg-white sticky-left-0">{{#str}}participant,mod_interactivevideo{{/str}}</th>
                <th id="firstname" class="exportable colvis inv profilefield">{{#str}}firstname{{/str}}</th>
                <th id="lastname" class="exportable colvis inv profilefield">{{#str}}lastname{{/str}}</th>
                {{#identity}}
                <th id="{{name}}" class="exportable colvis inv profilefield">{{label}}</th>
            {{/identity}}
            <th id="timecreated" class="text-truncate">
                {{#str}}timestarted,mod_interactivevideo{{/str}}
                <div class="position-absolute iv-font-weight-normal controls d-none"
                     style="bottom: 0">
                    <div class="d-flex align-items-center">
                        <input type="checkbox" checked data-start="true">
                        <small class="mx-2">{{#str}}started,mod_interactivevideo{{/str}}</small>
                    </div>
                    <div class="d-flex align-items-center">
                        <input type="checkbox" checked data-start="false">
                        <small class="iv-ml-2">{{#str}}notstarted,mod_interactivevideo{{/str}}</small>
                    </div>
                </div>
            </th>
            <th id="timecompleted" class="text-truncate">
                {{#str}}timecompleted,mod_interactivevideo{{/str}}
                <div class="position-absolute iv-font-weight-normal controls d-none"
                     style="bottom: 0">
                    <div class="d-flex align-items-center">
                        <input type="checkbox" checked data-completed="true">
                        <small class="mx-2">{{#str}}completed,mod_interactivevideo{{/str}}</small>
                    </div>
                    <div class="d-flex align-items-center">
                        <input type="checkbox" checked data-completed="false">
                        <small class="iv-ml-2">{{#str}}incomplete,mod_interactivevideo{{/str}}</small>
                    </div>
                </div>
            </th>
            <th id="completionpercentage">
                {{#str}}completionpercentage,mod_interactivevideo{{/str}}
                {{#completionfilter}}
                <div class="position-absolute iv-font-weight-normal controls d-none"
                     style="bottom: 0">
                    <div class="d-flex align-items-center">
                        <input type="checkbox"
                               checked
                               class="less"
                               data-percentage="{{completionpercentage}}">
                        <small class="iv-ml-2">< {{
                        completionpercentage}}%</small>
                    </div>
                    <div class="d-flex align-items-center">
                        <input type="checkbox"
                               checked
                               class="more"
                               data-percentage="{{completionpercentage}}">
                        <small class="iv-ml-2">>= {{completionpercentage}}%</small>
                    </div>
                </div>
            {{/completionfilter}}
        </th>
        <th id="xp">{{#str}}xp,mod_interactivevideo{{/str}}/{{totalxp}}</th>
        {{#items}}
        <th class="rotate"
            id="item-{{id}}"
            data-item="{{id}}"
            data-type="{{type}}"
            data{{bs}}-toggle="tooltip"
            data{{bs}}-trigger="hover"
            data{{bs}}-placement="top"
            title="{{title}}">
            <div>
                <input type="checkbox"
                       class="form-check-input rotate-0 controls d-none"
                       id="item-{{id}}"
                       data-item="{{id}}"
                       data-type="{{type}}">
                <i title="{{typetitle}}" class="fa-fw fa mx-1 {{icon}}"></i>
                <a class="text-link cursor-pointer">{{title}}</a>
            </div>
        </th>
    {{/items}}
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
