{{!
    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 block_myoverview/main

    This template renders the main content area for the myoverview block.

    Example context (json):
    {
      "config": {
        "wwwroot": "https://www.exemplo.com"
      },
      "logourl_header": "<img src='https://www.exemplo.com/logo.png' alt='Logo'>",
      "primarymoremenu": true,
      "output": {
        "custom_menu": "<li class='nav-item'><a class='nav-link' href='/page1'>Página 1</a></li>",
        "page_heading_menu": "<li class='nav-item'><a class='nav-link' href='/home'>Início</a></li>",
        "search_box": "<form class='form-inline'><input class='form-control' type='search' placeholder='Pesquisar' aria-label='Pesquisar'></form>",
        "navbar_plugin_output": "<li class='nav-item'><a class='nav-link' href='/plugin'>Plugin</a></li>",
        "edit_switch": "<a href='/edit' class='btn btn-warning'>Editar</a>"
      },
      "langmenu": true,
      "usermenu": true,
      "top_scroll": 1
    }

}}

<nav id="header" class="navbar navbar-light navbar-expand"
     aria-label="{{#str}}sitemenubar, admin{{/str}}">

    <div class="container-fluid">
        <div class="header-menubar header-menubar-inner">

            <div class="header-logo">
                <a class="navbar-brand" href="{{{config.wwwroot}}}/?redirect=0">
                    {{{logourl_header}}}
                </a>
            </div>

            <button class="navbar-toggler aabtn d-block d-md-none px-1 my-1 border-0" data-toggler="drawers"
                    data-action="toggle" data-target="theme_boost-drawers-primary">
                <span class="navbar-toggler-icon"></span>
                <span class="sr-only">{{#str}}sidepanel, core{{/str}}</span>
            </button>

            {{#primarymoremenu}}
                <div class="primary-navigation">
                    {{> core/moremenu}}
                </div>
            {{/primarymoremenu}}
            <div class="primary-navigation">
                <div class="custom-menu navigation">
                    <ul class="navbar-nav dropdown mr-auto">
                        {{{output.custom_menu}}}
                    </ul>
                </div>
            </div>

            <ul class="navbar-nav d-none d-md-flex my-1 px-1">
                <!-- page_heading_menu -->
                {{{output.page_heading_menu}}}
            </ul>

            <div id="usernavigation" class="navbar-nav ml-auto">
                <div class="kraus-layout-dark">
                    <div class="dark-mode" data-toggle="tooltip" title="Dark Mode">
                        <svg enable-background="new -52 -52 128 128" height="128" viewBox="-52 -52 128 128" width="128" xmlns="http://www.w3.org/2000/svg">
                            <path d="m12.823 76c-17.085 0-33.789-6.941-45.826-19.045-12.248-12.246-18.997-28.562-18.997-45.935s6.749-33.687 19.003-45.935c8.074-8.042 18.161-13.842 29.174-16.776.758-.205 1.55-.309 2.344-.309.786 0 1.571.103 2.332.305 4.835 1.287 7.724 6.266 6.442 11.1-4.285 16.086.346 33.406 12.086 45.203 8.813 8.81 20.549 13.664 33.039 13.664 4.094 0 8.188-.534 12.17-1.59.755-.202 1.54-.305 2.326-.305.787 0 1.573.103 2.333.306 4.834 1.282 7.729 6.264 6.447 11.106-2.937 11.02-8.742 21.106-16.788 29.174-12.208 12.275-28.472 19.037-45.79 19.037-.002 0-.295 0-.295 0zm.28-18.151c12.285 0 24.302-4.997 32.967-13.71 2.341-2.352 4.418-4.93 6.205-7.7-17.03-.031-33.693-6.948-45.733-18.99-12.165-12.22-18.927-28.651-18.98-45.734-2.785 1.787-5.368 3.866-7.717 6.212-8.827 8.824-13.688 20.58-13.688 33.101 0 12.522 4.861 24.276 13.688 33.1 8.675 8.723 20.704 13.722 33.009 13.722h.105.144z" fill="#fff"/>
                        </svg>
                    </div>
                    <div class="light-mode" data-toggle="tooltip" title="Light Mode">
                        <svg enable-background="new -52 -52 128 128" height="128" viewBox="-52 -52 128 128" width="128" xmlns="http://www.w3.org/2000/svg">
                            <path d="m3.021 76v-24.072h17.958v24.072zm-42.631-25.097 17.012-17.028 12.705 12.696-17.013 17.029zm73.492-4.324 12.697-12.697 17.02 17.025-12.692 12.692zm-21.87-1.104c-18.458 0-33.475-15.017-33.475-33.475s15.017-33.475 33.475-33.475 33.475 15.017 33.475 33.475-15.017 33.475-33.475 33.475zm0-48.991c-8.556 0-15.517 6.96-15.517 15.516s6.961 15.517 15.517 15.517c8.555 0 15.516-6.961 15.516-15.517s-6.961-15.516-15.516-15.516zm39.916 24.495v-17.958h24.072v17.958zm-103.928 0v-17.958h24.072v17.958zm12.394-47.881 12.706-12.694 17.011 17.022-12.69 12.699zm73.488 4.322 17.026-17.022 12.69 12.694-17.019 17.027zm-30.861-5.348v-24.072h17.958v24.072z" fill="#fff"/>
                        </svg>
                    </div>
                </div>
                {{#output.search_box}}
                    {{{output.search_box}}}
                    <div class="divider border-left h-75 align-self-center mx-1"></div>
                {{/output.search_box}}
                {{#langmenu}}
                    {{> theme_boost/language_menu}}
                    <div class="divider border-left h-75 align-self-center mx-1"></div>
                {{/langmenu}}
                {{{output.navbar_plugin_output}}}
                <div class="d-flex align-items-center usermenu-container" data-region="usermenu">
                    {{#usermenu}}
                        {{> core/user_menu}}
                    {{/usermenu}}
                </div>
                {{{output.edit_switch}}}
            </div>
        </div>
    </div>
</nav>

{{> theme_boost/primary-drawer-mobile}}

{{#js}}
    require(["jquery", "core/ajax"], function($, ajax) {

        var top_scroll = Math.floor("{{top_scroll}}");
        if (!top_scroll) {
            var header = $("#header");
            var page = $("#page");
            $(window).on("scroll", window_scroll);
            window_scroll();

            function window_scroll() {

                if ($(window).width() < 800) {
                    header.removeClass("fixed-top");
                    return;
                }

                var top = $(window).scrollTop();
                if (top > 90 && !header.hasClass("fixed-top")) {
                    header.addClass("fixed-top");

                    page.css({ "margin-top" : header.height() });
                }
                if (top < 15 && header.hasClass("fixed-top")) {
                    header.removeClass("fixed-top");

                    page.css({ "margin-top" : 0 });
                }
            }
        }

        // kraus-layout-dark
        var $layoutMode = $(".kraus-layout-dark div");
        $layoutMode.click(function() {
            $("body").addClass("dark-animation");
            setTimeout(function() {
                $("body").removeClass("dark-animation");
            }, 500);

            var thememode = "dark";
            if ($("html").attr("data-bs-theme") == "dark") {
                thememode = "light";
            }
            $("html").attr("data-bs-theme", thememode);

            ajax.call([{
                methodname : "theme_boost_magnific_userprerence_layout",
                args       : {thememode : thememode}
            }]);
        });
    });
{{/js}}