{{!
    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_universe/columns2

    Admin time setting template.

    universe 2 column layout 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
    * 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/hasblocks-tmpl }}

    {{> theme_universe/navbar }}
    <div id="page" data-region="mainpage" data-usertour="scroller" class="drawers {{#topbarcustomhtml}}topbar--ext{{/topbarcustomhtml}} {{#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 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>
                                    </div>
                                {{/overflow}}    
                                
                                <div class="wrapper-fw">
                                {{{ output.main_content }}}
                                </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}}
    $(document).ready(function(){
        $("#page-admin-setting-themesettinguniverse .tab-pane .rui-setting-heading-wrapper").nextUntil("#page-admin-setting-themesettinguniverse .tab-pane .rui-setting-heading-wrapper").addClass("hidden");
    });
    $("#page-admin-setting-themesettinguniverse .tab-pane .rui-setting-heading-wrapper").click(function() {
        $(this).nextUntil("#page-admin-setting-themesettinguniverse .rui-setting-heading-wrapper").toggleClass("hidden");
        $(this).toggleClass("active");
    });
{{/js}}

<script>
        if (document.getElementsByTagName("body")[0].id.match(/page-admin-setting-themesettinguniverse/)) {
            for (let i = 1; i <= 22; i++) {
                var tempID = 'id_s_theme_universe_displayblock' + i; // Checkboxes.
                var tempItemID = '[data-settings-name="theme_universe_block' + i + '"]'; // Navigation items.
                var tempFCBID = 'admin-block' + i; // Content Builder Items.
                var checkBox = document.getElementById(tempID);
                var navItem = document.querySelector(tempItemID);
                var fcbItem = document.getElementById(tempFCBID);
                if (checkBox.checked == true) {
                    navItem.classList.add("rui--turnedon");
                    fcbItem.classList.add("rui--turnedon");
                } else {
                    navItem.style.opacity = "0.3";
                    fcbItem.style.opacity = "0.3";
                }
            }

            for (let i = 0; i <= 22; i++) {
                var selectID = 'id_s_theme_universe_block' + i; // Select value.
                var tempFCBID = 'admin-block' + i; // Content Builder Items.
                var fcbItem = document.getElementById(tempFCBID);
                var selectValue = document.getElementById(selectID).value;

                fcbItem.dataset.blockPosition = selectValue;
                fcbItem.dataset.blockIndex = i;
                document.getElementById(selectID).dataset.blockIndex = i;
            }

            const buttons = document.getElementsByTagName("select");
            const buttonPressed = e => {
                var selectID = e.target.id; // Get ID of clicked element -> select
                var selectByID = document.getElementById(selectID).value; // Get ID of clicked element -> select
                var blIndex = document.getElementById(selectID).dataset.blockIndex; // Block number
                var wrapperID = 'admin-block' + blIndex; // Wrapper ID
                var wrapperByID = document.getElementById(wrapperID);
                var selectValue = document.getElementById(selectID).value; // Get value - select
                wrapperByID.dataset.blockPosition = selectByID;
            }

            for (let button of buttons) {
                button.addEventListener("change", buttonPressed);
            }
        }
    </script>
{{#js}}
        var $wrapper = $('#theme_universe_scb');
        $wrapper.find('.rui-settings-item').sort(function (a, b) {
        return +a.dataset.blockPosition - +b.dataset.blockPosition;
        }).appendTo( $wrapper );


        $( '[id^="id_s_theme_universe_block"]' ).on( "change", function() {
        var $wrapper = $('#theme_universe_scb');
        $wrapper.find('.rui-settings-item').sort(function (a, b) {
        return +a.dataset.blockPosition - +b.dataset.blockPosition;
        }).appendTo( $wrapper );
        });
    {{/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}}
