{{!
    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 theme_snap/sidebar_menu

    Offcanvas-like sidebar menu for Moodle Snap theme.

    Example context (json):
    {
        "menuitems": [
            {
                "url": "https://example.com",
                "title": "Menu Item 1",
                "icon": "fa-home",
                "classes": "menu-home primary-item"
            },
            {
                "title": "Toggle Drawer 1",
                "icon": "fa-cog",
                "isbutton": true,
                "classes": "drawer-toggle-button",
                "dataattributes": [
                    {"name": "toggler", "value": "drawers"},
                    {"name": "action", "value": "toggle"},
                    {"name": "target", "value": "drawer-id-1"},
                    {"name": "activeselector", "value": "#drawer-id-1.show"}
                ]
            },
            {
                "title": "Toggle Drawer 2",
                "icon": "fa-bell",
                "isbutton": true,
                "classes": "drawer-toggle-button",
                "dataattributes": [
                    {"name": "toggler", "value": "drawers"},
                    {"name": "action", "value": "toggle"},
                    {"name": "target", "value": "drawer-id-2"},
                    {"name": "activeselector", "value": "#drawer-id-2.show"}
                ]
            },
            {
                "customcontent": "<div>Custom content</div>",
                "dataattributes": [
                    {"name": "activeselector", "value": "#some-element.active"}
                ]
            }
        ]
    }
}}

<div id="snap-sidebar-menu" class="snap-sidebar-menu {{#opensidebar}}show{{/opensidebar}} positioning-offscreen">
    <div class="snap-sidebar-menu-content">
        {{#menuitems}}
            {{#customcontent}}
                <div class="snap-sidebar-menu-item custom-menu-item {{#classes}}{{classes}}{{/classes}}" {{#dataattributes}}data-{{name}}="{{value}}" {{/dataattributes}}>
                    {{{customcontent}}}
                </div>
            {{/customcontent}}
            {{^customcontent}}
                {{#isbutton}}
                    <button type="button" class="snap-sidebar-menu-item {{#classes}}{{classes}}{{/classes}}" {{#title}}title="{{title}}"{{/title}} 
                        {{#dataattributes}}data-{{name}}="{{value}}" {{/dataattributes}}>
                        {{#icon}}<i class="fa {{icon}}" aria-hidden="true"></i>{{/icon}}
                        {{^icon}}{{#iconimg}}<img src="{{iconimg}}" alt="{{#title}}{{title}}{{/title}}{{^title}}Icon{{/title}}" />{{/iconimg}}{{/icon}}
                    </button>
                {{/isbutton}}
                {{^isbutton}}
                    {{#url}}
                        <a href="{{{url}}}" class="snap-sidebar-menu-item {{#classes}}{{classes}}{{/classes}}" {{#title}}title="{{title}}"{{/title}}
                           {{#dataattributes}}data-{{name}}="{{value}}" {{/dataattributes}}>
                            {{#icon}}<i class="fa {{icon}}" aria-hidden="true"></i>{{/icon}}
                            {{^icon}}{{#iconimg}}<img src="{{iconimg}}" alt="{{#title}}{{title}}{{/title}}{{^title}}Icon{{/title}}" />{{/iconimg}}{{/icon}}
                        </a>
                    {{/url}}
                    {{^url}}
                        <div class="snap-sidebar-menu-item {{#classes}}{{classes}}{{/classes}}" {{#title}}title="{{title}}"{{/title}}
                             {{#dataattributes}}data-{{name}}="{{value}}" {{/dataattributes}}>
                            {{#icon}}<i class="fa {{icon}}" aria-hidden="true"></i>{{/icon}}
                            {{^icon}}{{#iconimg}}<img src="{{iconimg}}" alt="{{#title}}{{title}}{{/title}}{{^title}}Icon{{/title}}" />{{/iconimg}}{{/icon}}
                        </div>
                    {{/url}}
                {{/isbutton}}
            {{/customcontent}}
        {{/menuitems}}
        
        <!-- TOC Mobile Menu Toggle - Only visible on mobile -->
        {{#iscoursepage}}
            <a id="toc-mobile-menu-toggle" href="#course-toc" class="snap-sidebar-menu-item mobile-only-toc-toggle">
                <i class="fa fa-list" aria-hidden="true"></i>
                <small class="sr-only">{{#str}}contents, theme_snap{{/str}}</small>
            </a>
        {{/iscoursepage}}
    </div>
    <div id="goto-top-link">
        <a class="btn" role="button" href="javascript:void(0)" aria-label="Go to top">
            <i class="icon fa fa-arrow-up" title="{{#str}}totop, theme_snap{{/str}}" aria-label="{{#str}}totop, theme_snap{{/str}}"></i>
        </a>
    </div>
    
    <!-- Sidebar Menu Trigger Button (part of the sidebar) -->
    <button type="button" class="snap-sidebar-menu-trigger" aria-label="{{#str}}menu{{/str}}">
        <i class="fa {{#opensidebar}}fa-angle-left rotate-180{{/opensidebar}}{{^opensidebar}}fa-angle-left{{/opensidebar}}" aria-hidden="true"></i>
    </button>
</div>
<div id="goto-left-link">
    <a class="btn" role="button" aria-label="{{#str}}toleft, theme_snap{{/str}}">
        <i class="icon fa fa-arrow-left" title="{{#str}}toleft, theme_snap{{/str}}"></i>
    </a>
</div>

{{#js}}
require(['theme_snap/sidebar_menu'], function(sidebarMenu) {
    sidebarMenu.init();
});
{{/js}}
