{{!
    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 bbbext_bnx/recordings_table

    Enhanced recordings table layout for BNX.

    Example context (json):
    {
    }
}}
{{#recordings.session.has_recordings}}
<div id="bigbluebuttonbn_recordings_table" class="mod_bigbluebuttonbn_recordings_table table border-top-0" data-bbbid="{{recordings.session.bbbid}}" data-refresh-url="{{refreshurl}}">
    <div>
        <h4>{{$title}}{{/title}}</h4>
    </div>
    <div class="mt-3">
        {{#recordingwarnings}}
            {{>core/notification}}
        {{/recordingwarnings}}
    </div>
    <div>
        {{#search}}
            {{>bbbext_bnx/search_input_recordings}}
        {{/search}}
        <div {{!
            }} id="bigbluebuttonbn-recording-table-{{uniqid}}"{{!
            }} data-bbbid="{{$bbbid}}{{bbbid}}-test{{/bbbid}}"{{!
            }} data-tools="{{$tools}}protect,unprotect,publish,unpublish,delete{{/tools}}"{{!
            }} data-group-id="{{groupid}}"{{!
            }} {{$otherattributes}}{{/otherattributes}}{{!
        }}></div>
    </div>
    {{#recordings.output.0}}
    <table class="table table-hover table-striped bnx-recordings-table">
    <thead>
    <tr>
        <th class="bnx-col-playback">{{#str}}view_recording_playback, mod_bigbluebuttonbn{{/str}}</th>
        <th class="bnx-col-name sortable-header" data-sort="name">{{#str}}view_recording_name, mod_bigbluebuttonbn{{/str}} <span class="sort-icon">▲</span></th>
        <th class="bnx-col-description sortable-header" data-sort="description">{{#str}}view_recording_description, mod_bigbluebuttonbn{{/str}} <span class="sort-icon">▲</span></th>
        <th class="bnx-col-preview">{{#str}}view_recording_preview, mod_bigbluebuttonbn{{/str}}</th>
        <th class="bnx-col-date sortable-header" data-sort="date">{{#str}}view_recording_date, mod_bigbluebuttonbn{{/str}} <span class="sort-icon">▲</span></th>
        <th class="bnx-col-duration">{{#str}}view_recording_duration, mod_bigbluebuttonbn{{/str}}</th>
        {{#showactionbar}}
        <th class="bnx-col-actionbar">{{#str}}view_recording_actionbar, mod_bigbluebuttonbn{{/str}}</th>
        {{/showactionbar}}
    </tr>
    </thead>
    <tbody>
    {{/recordings.output.0}}
    {{#recordings.output}}
        <tr class="bnx-recording-row" data-filtered="true">
            <td class="bnx-col-playback">
                {{{playback}}}
            </td>
            <td class="bnx-col-name" data-sort="name">
                {{{recording}}}
            </td>
            <td class="bnx-col-description" data-sort="description">
                {{{description}}}
            </td>
            <td class="bnx-col-preview">
                <div class="bnx-recording-preview" data-bnx-preview="1">
                    {{{preview}}}
                </div>
            </td>
            <td class="bnx-col-date" data-sort="date">
                {{{date}}}
            </td>
            <td class="bnx-col-duration">
                {{{duration}}}
            </td>
            {{#showactionbar}}
            <td class="bnx-col-actionbar">
                {{{actionbar}}}
            </td>
            {{/showactionbar}}
        </tr>
    {{/recordings.output}}
    {{#recordings.output.0}}
    </tbody>
    </table>
    {{/recordings.output.0}}
    {{^recordings.output}}
        <div>{{#str}}view_message_norecordings, mod_bigbluebuttonbn{{/str}}</div>
    {{/recordings.output}}
</div>

<div id="paginationControls" class="mt-3">
    <button id="firstPage" class="btn btn-sm btn-secondary">{{#str}}view_recording_yui_first, mod_bigbluebuttonbn{{/str}}</button>
    <button id="prevPage" class="btn btn-sm btn-secondary">{{#str}}view_recording_yui_prev, mod_bigbluebuttonbn{{/str}}</button>
    <select id="pageSelect" class="form-control d-inline-block w-auto"></select>
    <button id="nextPage" class="btn btn-sm btn-secondary">{{#str}}view_recording_yui_next, mod_bigbluebuttonbn{{/str}}</button>
    <button id="lastPage" class="btn btn-sm btn-secondary">{{#str}}view_recording_yui_last, mod_bigbluebuttonbn{{/str}}</button>
</div>

{{#js}}
    require([
        'bbbext_bnx/recordings',
        'bbbext_bnx/recordings_pagination',
        'bbbext_bnx/recordings_search'
    ], function(recordings, recordingsPagination, recordingsSearch) {
        recordingsPagination.setupPagination();
        recordingsSearch.setupSearch();
    });
    require(['core/inplace_editable']);
{{/js}}
{{/recordings.session.has_recordings}}
