{{!
    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.

    Edwiser Reports Pro
    @package   local_edwiserreports
    @copyright (c) 2022 WisdmLabs (https://wisdmlabs.com/)
    @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

}}
{{!
    @template local_edwiserreports/modal_table

    Show the table on modal

    Context variables required for this template:

    Example context (json):
    {
        content: 'This is sample content',
        header: ['Header 1', 'Header 2', 'Header ...', 'Header N']
        rows: [
            ['Value 1', 'Value 2', 'Value ...', 'Value N'],
            ['Value 1', 'Value 2', 'Value ...', 'Value N'],
            ['Value 1', 'Value 2', 'Value ...', 'Value N'],
            ['.......', '.......', '.........', '.......'],
            ['.......', '.......', '.........', '.......'],
            ['Value 1', 'Value 2', 'Value ...', 'Value N']
        ]
    }
}}
<div class="modal-table" id="{{uniqid}}">
{{#content}}<label>{{{content}}}</label>{{/content}}
<div>
    <div class="row">
        <div class="filter-selector col-12 col-md-6 mb-1">
            <label>{{#str}} search, local_edwiserreports {{/str}}</label>
            {{> local_edwiserreports/datatable/search }}
        </div>
    </div>
    <table class="table">
        <thead>
            <tr>
                {{#header}}<th>{{.}}</th>{{/header}}
            </tr>
        </thead>
        <tbody>
            {{#rows}}
                <tr>
                    {{#.}}
                        <td>{{.}}</td>
                    {{/.}}
                </tr>
            {{/rows}}
        </tbody>
    </table>
</div>
<script>
{{#js}}
require([
    'jquery',
    'local_edwiserreports/common',
    'local_edwiserreports/select2'
], function(
    $,
    common
) {
    // Initialize data table on modal table.
    $('#{{uniqid}} table').dataTable({
        dom: '<"edwiserreports-table"<i><t><"table-pagination"p>>',
        language: {
            info: M.util.get_string('tableinfo', 'local_edwiserreports'),
            infoEmpty: M.util.get_string('infoempty', 'local_edwiserreports'),
            emptyTable: M.util.get_string('nousers', 'local_edwiserreports'),
            zeroRecords: M.util.get_string('zerorecords', 'local_edwiserreports'),
            paginate: {
                previous: ' ',
                next: ' '
            }
        },
        initComplete: function() {
            // Apply the search
            let _this = this;
            $('#{{uniqid}} .table-search-input input').on('input', function() {
                _this.api().columns(0).search($(this).val()).draw();
            });
        },
        drawCallback: function() {
            common.stylePaginationButton(this);
        }
    });
});
{{/js}}
</script>