{{!
    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/>.
}}
{{!
    Context variables required for this template:
    * sitename - The name of the site
    * output - The core renderer for the page
    * bodyattributes - attributes for the body tag as a string of html attributes
    * sidepreblocks - HTML for the blocks
    * hasblocks - true if there are blocks on this page
    * navdraweropen - true if the nav drawer should be open on page load
    * regionmainsettingsmenu - HTML for the region main settings menu
    * hasregionmainsettingsmenu - There is a region main settings menu on this page.

    Example context (json):
    {
        "sitename": "Moodle",
        "output": {
            "doctype": "<!DOCTYPE html>",
            "page_title": "Test page",
            "favicon": "favicon.ico",
            "main_content": "<h1>Headings make html validators happier</h1>"
         },
        "bodyattributes":"",
        "sidepreblocks": "<h2>Blocks html goes here</h2>",
        "hasblocks":true,
        "navdraweropen":true,
        "regionmainsettingsmenu": "",
        "hasregionmainsettingsmenu": false
    }
}}
{{> theme_universe/head }}

<body {{{ bodyattributes }}}>
{{> core/local/toast/wrapper}}

<div id="page-wrapper" class="d-print-block {{#output.courseheadermenu}}rui--course-with-nav{{/output.courseheadermenu}} {{^output.courseheadermenu}}rui--course-witout-nav{{/output.courseheadermenu}}">

    {{{ output.standard_top_of_body_html }}}


    
    {{> theme_universe/navbar }}
    <div id="page" data-region="mainpage" data-usertour="scroller" class="drawers {{#topbarcustomhtml}}topbar--ext{{/topbarcustomhtml}} {{#output.show_course_filter}}{{#blockfilteropen}}show-drawer-left{{/blockfilteropen}}{{/output.show_course_filter}} {{#blockdraweropen}}show-hidden-drawer show-drawer-right{{/blockdraweropen}} drag-container">
        
        <div id="topofscroll" class="main-inner">
            <div id="page-content" class="page-content wrapper-fw">

                <div class="drawer-toggles d-flex">
                    {{#hasblocks}}
                        <div id="sidepreopen-control" class="drawer-toggler drawer-right-toggle ml-auto d-print-none">
                            <button
                                class="btn border-0 icon-no-margin drawertoggle btn-close-drawer--right"
                                data-toggler="drawers"
                                data-action="toggle"
                                data-target="universe-drawers-blocks"
                                data-toggle="tooltip"
                                data-placement="right"
                                title="{{#str}}opendrawerblocks, core{{/str}}"
                            >
                                <span class="sr-only">{{#str}}opendrawerblocks, core{{/str}}</span>
                                <span class="dir-rtl-hide">
                                    <svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
                                        <g transform="matrix(1,0,0,1,-2,0)">
                                            <path d="M18.333,15L18.333,5C18.333,3.629 17.205,2.5 15.833,2.5L14.167,2.5C12.795,2.5 11.667,3.629 11.667,5L11.667,15C11.667,16.371 12.795,17.5 14.167,17.5L15.833,17.5C17.205,17.5 18.333,16.371 18.333,15Z" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:1.67px;" />
                                        </g>
                                        <g transform="matrix(1,0,0,1,-2,0)">
                                            <path d="M11.667,10L5,10M5,10L7.5,7.5M5,10L7.5,12.5" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:1.25px;stroke-linecap:round;stroke-linejoin:round;" />
                                        </g>
                                    </svg>
                                </span>
                                <span class="dir-ltr-hide">
                                    <svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
                                        <g transform="matrix(1,0,0,1,-2,0)">
                                            <path d="M18.333,15L18.333,5C18.333,3.629 17.205,2.5 15.833,2.5L14.167,2.5C12.795,2.5 11.667,3.629 11.667,5L11.667,15C11.667,16.371 12.795,17.5 14.167,17.5L15.833,17.5C17.205,17.5 18.333,16.371 18.333,15Z" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:1.67px;" />
                                        </g>
                                        <g transform="matrix(1,0,0,1,-2,0)">
                                            <path d="M11.667,10L5,10M5,10L7.5,7.5M5,10L7.5,12.5" style="fill:none;fill-rule:nonzero;stroke:currentColor;stroke-width:1.25px;stroke-linecap:round;stroke-linejoin:round;" />
                                        </g>
                                    </svg>                            
                                </span>
                            </button>
                        </div>
                    {{/hasblocks}}
                    {{#output.show_course_filter}}
                    {{#showcoursefilter}}
                    <div class="drawer-toggler drawer-left-toggle ml-auto d-print-none">
                        <button
                            class="btn btn-dark drawertoggle btn-close-drawer--left"
                            data-toggler="drawers"
                            data-action="toggle"
                            data-target="theme-drawers-filter"
                            data-toggle="tooltip"
                            data-placement="left"
                            title="{{#str}}opendrawerblocks, core{{/str}}"
                        >
                            <span class="sr-only">{{#str}}opendrawerblocks, core{{/str}}</span>
                            <svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M3 6H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12L17 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11 18L13 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                        </button>
                    </div>
                    {{/showcoursefilter}}
                    {{/output.show_course_filter}}
                </div> 

                <div id="region-main-box" class="region-main-course-wrapper">

                <section id="region-main" aria-label="{{#str}}content{{/str}}">

                    <div class="rui-blocks-wrapper wrapper--with-margin wrapper-xl">
                            
                            <div class="wrapper-page-withblocks">
                                {{{ output.breadcrumbs }}}
                                
                                {{{coursepageinformationbanners}}}
  
                                <div class="wrapper-header">    
                                {{#secondarymoremenu}}
                                    <div class="secondary-navigation d-print-none">
                                        {{> core/moremenu}}
                                    </div>
                                {{/secondarymoremenu}}                                
                                {{{ output.simple_header }}}
                                </div>
                                                            
                                {{#hasregionmainsettingsmenu}}
                                    <div class="region_main_settings_menu_proxy"></div>
                                {{/hasregionmainsettingsmenu}}
                                {{{ output.course_content_header }}}
                                {{#headercontent}}
                                    {{> core/activity_header }}
                                {{/headercontent}}
                                {{#overflow}}
                                    <div class="tertiary-navigation d-inline-flex flex-wrap w-100">
                                        <div class="navitem">
                                            {{> core/url_select}}
                                        </div>
                                    </div>
                                {{/overflow}}    
                                
                                 <div id="root" class="d-flex w-100">
                                        {{#output.show_course_filter}}
                                        {{< theme_universe/drawer }}
                                            {{$id}}theme-drawers-filter{{/id}}
                                            {{$drawerclasses}}drawer drawer-left{{#blockfilteropen}} show{{/blockfilteropen}}{{/drawerclasses}}
                                            {{$drawercontent}}
                                                <div id="courseFilter" class="rui-course-filter-wrapper p-2">

                                                    <div class="search-input-group d-inline-flex justify-content-between w-100" role="search">
                                                        <span class="search-input-icon">
                                                            <svg width="22" height="22" fill="none" viewBox="0 0 24 24">
                                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z"></path>
                                                            </svg>
                                                        </span>
                                                        <input
                                                        type="text"
                                                        data-region="input"
                                                        data-action="search"
                                                        id="filter-search-input"
                                                        class="search-input w-100 withclear"
                                                        placeholder="{{$placeholder}}{{#str}} search, core {{/str}}{{/placeholder}}"
                                                        name="search"
                                                        >
                                                    </div>
                                                    
                                                    <div class="rui-course-filter-content">
                                                        {{#showlangfilter}}
                                                        <div class="filtering-group mt-2 rounded border" data-group-name="lang">
                                                            <h4 class="filtering-title">{{#str}} language, moodle {{/str}}</h4>
                                                            {{{ output.course_lang_list }}}
                                                        </div>
                                                        {{/showlangfilter}}

                                                        {{#showteachersfilter}}
                                                        <div class="filtering-group mt-2 rounded border" data-group-name="teachers">
                                                            <h4 class="filtering-title">{{#str}} teachers, moodle {{/str}}</h4>
                                                            {{{ output.course_teachers_list }}}
                                                        </div>
                                                        {{/showteachersfilter}}

                                                        {{{ output.course_customfilter1_list }}}
                                                        {{{ output.course_customfilter2_list }}} 
                                                        {{{ output.course_customfilter3_list }}}
                                                        {{{ output.course_customfilter4_list }}} 
                                                        {{{ output.course_customfilter5_list }}}
                                                        {{{ output.course_customfilter6_list }}}

                                                    </div>

                                                </div>
                                            {{/drawercontent}}
                                            {{$drawerpreferencename}}coursefilter-on{{/drawerpreferencename}}
                                            {{$forceopen}}{{#forceblockdraweropen}}1{{/forceblockdraweropen}}{{/forceopen}}
                                            {{$drawerstate}}show-drawer-left{{/drawerstate}}
                                            {{$tooltipplacement}}left{{/tooltipplacement}}
                                            {{$drawercloseonresize}}1{{/drawercloseonresize}}
                                            {{$closebuttontext}}{{#str}}closeblockdrawer, core{{/str}}{{/closebuttontext}}
                                        {{/ theme_universe/drawer}}
                                        {{/output.show_course_filter}}
                                        <div class="col px-0">                                       
                                        {{{ output.main_content }}}
                                        </div>
                                        
                                    </div>

                        </div>
                        
                        {{{ output.activity_navigation }}}
                        {{{ output.course_content_footer }}}
                    </section>
                </div>
            </div>
            {{> theme_universe/footer }}
        </div>
    </div>
            
    {{{ output.standard_after_main_region_html }}}
    
</div>

{{#js}}
{{#output.show_course_filter}}
const {FilteringFlow} = filteringjs;

const searchElement = document.querySelector('#filter-search-input');
searchElement.addEventListener('input', (event) => {
    flow.filter();
});

class MyFlow extends FilteringFlow {

    handleFilterResult(result) {
        super.handleFilterResult(result);
        for (const group of result.groups) {
            for (const filter of group.filters) {
                const filterElement = filter.schemaFilter.data.element;
                // Update the number next to the filter to indicate how many items are or would be filtered
                filterElement.querySelector('.total').innerText = `${filter.possibleItems.length}`;
            }
        }
    }

    getAllFilterNames(item) {
        // Since we want to filter the entered search text by filftered name,
        // this is the helper method used for the example only.
        const result = [];
        for (const groupName of item.getGroupNames()) {
            for (const filterName of item.getFilterNames(groupName)) {
                result.push(filterName);
            }
        }
        return result;
    }

    get filteringOptions() {
        return {
            // The callback to prefilter items before actually filtering
            filterItem: (item, schema, filterData) => {
                for (const filterName of this.getAllFilterNames(item)) {
                    if (filterName.toLowerCase().includes(searchElement.value.toLowerCase())) {
                        // Return true if the item should be currently considered for filtering
                        return true;
                    }
                }
                return false;
            }
        };
    }
}

const flow = new MyFlow(document.querySelector('#root'));
{{/output.show_course_filter}}
{{/js}}

</body>
</html>
{{#js}}
M.util.js_pending('theme_universe/loader');
require(['theme_universe/loader', 'theme_universe/drawer'], function(Loader, Drawer) {
    Drawer.init();
    M.util.js_complete('theme_universe/loader');
});
{{/js}}
