{{!
    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_boost_magnific/drawers_scorm

    Boost drawer template.

    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
    * courseindexopen - 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,
        "courseindexopen": true,
        "navdraweropen": false,
        "blockdraweropen": true,
        "regionmainsettingsmenu": "",
        "hasregionmainsettingsmenu": false,
        "addblockbutton": ""
    }
}}
{{> theme_boost/head}}

<body data-templates="drawers" {{{bodyattributes}}}>
{{> core/local/toast/wrapper}}
<div id="page-wrapper" class="d-print-block position-relative">

{{{output.standard_top_of_body_html}}}

{{>theme_boost_magnific/includes/header}}
{{#courseindex}}
    {{< theme_boost/drawer}}
        {{$id}}theme_boost-drawers-courseindex{{/id}}
        {{$drawerclasses}}drawer drawer-left {{#courseindexopen}}show{{/courseindexopen}}{{/drawerclasses}}
        {{$drawerheading}}
            {{#str}}courseindex, core_courseformat{{/str}}
        {{/drawerheading}}
        {{$drawercontent}}
            {{{courseindex}}}
        {{/drawercontent}}
        {{$drawerpreferencename}}drawer-open-index{{/drawerpreferencename}}
        {{$drawerstate}}show-drawer-left{{/drawerstate}}
    {{/theme_boost/drawer}}
{{/courseindex}}

{{#hasblocks}}
    {{< theme_boost/drawer}}
        {{$id}}theme_boost-drawers-blocks{{/id}}
        {{$drawerclasses}}drawer drawer-right{{#blockdraweropen}} show{{/blockdraweropen}}{{/drawerclasses}}
        {{$drawercontent}}
            <section class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
                {{{addblockbutton}}}
                {{{sidepreblocks}}}
            </section>
        {{/drawercontent}}
        {{$drawerpreferencename}}drawer-open-block{{/drawerpreferencename}}
        {{$forceopen}}{{#forceblockdraweropen}}1{{/forceblockdraweropen}}{{/forceopen}}
        {{$drawerstate}}show-drawer-right{{/drawerstate}}
        {{$tooltipplacement}}left{{/tooltipplacement}}
        {{$drawercloseonresize}}1{{/drawercloseonresize}}
        {{$closebuttontext}}{{#str}}closeblockdrawer, core{{/str}}{{/closebuttontext}}
    {{/theme_boost/drawer}}
{{/hasblocks}}
    <div id="page" data-region="mainpage" data-usertour="scroller"
         class="drawers {{#courseindexopen}}show-drawer-left{{/courseindexopen}} {{#blockdraweropen}}show-drawer-right{{/blockdraweropen}} drag-container">
        <div id="topofscroll" class="main-inner">
            <div id="page-content" class="pb-3 d-print-block">
                <div id="region-main-box">
                    <section id="region-main" class="position-relative" aria-label="{{#str}}content{{/str}}">
                        {{{output.main_content}}}
                    </section>
                </div>
            </div>
        </div>
        {{> theme_boost_magnific/includes/footer}}
    </div>
    {{{output.standard_after_main_region_html}}}
</div>

<style>
    #scormviewform .btn-secondary,
    #scorm_toc,
    #scorm_toc_toggle,
    #scorm_navpanel,
    #page-footer {
        display: none !important;
    }
    #scorm_content,
    #scorm_layout {
        width: 100% !important;
        padding: 0 !important;
    }
    body {
        -overflow: hidden;
    }
    #region-main {
        position: fixed !important;
        top: 72px;
        bottom: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        z-index: 1000 !important;
    }
    #region-main .flex-row-reverse {
        position: fixed !important;
        right: 3px !important;
        top: 65px;
        z-index: 1001 !important;
    }
    #region-main .flex-row-reverse a {
        padding: 4px 7px;
    }
    #header:hover {
        z-index: 1009 !important;
    }
</style>
</body>
</html>
{{#js}}
    require(['theme_boost/loader', 'theme_boost/drawer'], function(Loader, Drawer) {
        Drawer.init();
        M.util.js_complete('theme_boost/loader');

        var header = $("#header");
        var body = $("body");

        header.mouseenter(function() {
            $(this).css({'z-index': 1002});
        });
        header.mouseleave(function() {
            $(this).css({'z-index': 1});
        });

        header.addClass("ever-fixed-top");
        body.addClass("ever-fixed-top");

        function window_resize() {
            var header_height = $("#header").height();

            var window_height = $(window).height();
            $("#scorm_object").css({
                width: '100%',
                height: window_height - header_height - 20,
            });
            $("#region-main").css({
                top: header_height + 10
            });
            $("#region-main .flex-row-reverse").css({
                top: header_height
            });
        }

        $(window).resize(window_resize);
        setTimeout(window_resize, 500);
    });
{{/js}}
