{{!
    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 local_wunderbyte_table/twtable_list_container
    Template which defines a mooduell view page.
    Classes required for JS:
    * none
    Data attributes required for JS:
    * none
    Context variables required for this template:
    * statistics - array: An array with values.
    * opengames - array: empty array, will be filled with JS.
    * finishedgames - array: empty array, will be filled with JS.
    * highscores - array: empty array, will be filled with JS.

    Example context (json):
    {
       "uniqueid": "uniqueid",
       "showcomponentstoggle": true,
       "showfilterbutton": true,
       "nofilteratall": false,
       "filterdeactivated": true,
       "idstring": "idstring",
       "listheaderclass" : "listheaderclass",
       "cardheaderclass" : "cardheaderclass",
       "cardfooterclass" : "cardfooterclass",
       "cardimageclass" : "cardimageclass",
       "rowid" : "rowid",
       "rowclasses" : "rowclasses",
       "encodedtable": "fdaskjfdjalsdjfkldsjflsajflksdjfklasdjflkdasjljkdfsalkjfoweijfoeisjgdklyjglky",
       "datafields": [
          {
            "key" : "daya-key",
            "value" : "data-value"
          }
       ],
       "cardheader": [
          {
            "columnclass" : "columnclass",
            "columnkeyclass" : "columnkeyclass",
            "key" : "columnname",
            "keystring" : "localized column name",
            "columnvalueclass" : "columnvalueclass",
            "value" : "value"
          }
       ],
       "cardbody": [
          {
            "columnclass" : "columnclass",
            "columnkeyclass" : "columnkeyclass",
            "key" : "columnname",
            "keystring" : "localized column name",
            "columnvalueclass" : "columnvalueclass",
            "value" : "value"
          }
       ],
       "cardfooter": [
          {
            "columnclass" : "columnclass",
            "columnkeyclass" : "columnkeyclass",
            "key" : "columnname",
            "keystring" : "localized column name",
            "columnvalueclass" : "columnvalueclass",
            "value" : "value"
          }
       ],
       "cardimage": [
          {
            "value" : "value"
          }
       ]
    }
}}
{{#norecords}}
    <div class="norecordsfound">
        <div class="alert alert-warning" role="alert">{{#str}} norecords, local_wunderbyte_table {{/str}}</div>
    </div>
{{/norecords}}
{{^norecords}}
     <div class="wunderbyte_table_container_{{idstring}} {{uniqueid}}{{!
          }}{{#showfilterbutton}} wunderbyte_table_filter_on{{/showfilterbutton}}{{!
          }}{{#filterdeactivated}} inactivefilter{{/filterdeactivated}}{{!
          }}{{#nofilteratall}} nofilter{{/nofilteratall}} {{#scrolltocontainer}} wunderbyte_table_scroll_on{{/scrolltocontainer}} mt-2 px-2">
          <div class="container-fluid mw-100">
               <div class="row mb-2">
                    <div class="col-md-4">
                         <div class="d-flex">
                              {{> local_wunderbyte_table/component_toggle }}
                              {{> local_wunderbyte_table/component_reload }}
                              {{> local_wunderbyte_table/component_edit }}
                         </div>
                    </div>
                    <div class="col-md-8 text-end align-self-end">
                         {{> local_wunderbyte_table/component_spinner }}
                         {{> local_wunderbyte_table/component_switchtemplates }}
                         {{> local_wunderbyte_table/component_sort }}
                         {{> local_wunderbyte_table/component_search }}
                    </div>
               </div>
               <div>
                    {{^showdownloadbuttonatbottom}}
                    {{> local_wunderbyte_table/component_print }}
                    {{/showdownloadbuttonatbottom}}
               </div>
          </div>
          <div class="wunderbyte_table_container {{#showfilterontop}}showontop{{/showfilterontop}} {{uniqueid}}">
               {{#showfilterontop}}
               <div class="filterheader">
                <aside id="filteroptions_{{idstring}}" class="wunderbyte_table_components{{^showcomponentstoggle}} inactive{{/showcomponentstoggle}}">
                    {{> local_wunderbyte_table/component_filter }}
                    {{> local_wunderbyte_table/component_infinitescroll }}
               </aside>
               </div>
               {{/showfilterontop}}
               {{^showfilterontop}}
               <aside id="filteroptions_{{idstring}}" class="wunderbyte_table_components{{^showcomponentstoggle}} inactive{{/showcomponentstoggle}}">
                    {{> local_wunderbyte_table/component_filter }}
                    {{> local_wunderbyte_table/component_infinitescroll }}
               </aside>
               {{/showfilterontop}}
               <div class= "wunderbyteTableClass {{uniqueid}}" id="a{{idstring}}">
                    {{> local_wunderbyte_table/twtable_cards }}
               </div>
          </div>
          {{#showdownloadbuttonatbottom}}
          <div class="ms-2">
               {{> local_wunderbyte_table/component_print }}
          </div>
          {{/showdownloadbuttonatbottom}}
    </div>
    {{#js}}
        require(['local_wunderbyte_table/init'], function(init) {
            init.init('{{idstring}}', '{{encodedtable}}');
        });
    {{/js}}
{{/norecords}}
