{{!
    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 }}}
        {{^hidecourseindexnav}}
        {{#courseindex}}
            {{< theme_universe/drawer }}
                {{$id}}universe-drawers-courseindex{{/id}}
                {{$drawerheadercontent}}
                    {{> theme_universe/courseindexdrawercontrols}}
                {{/drawerheadercontent}}
                {{$drawerclasses}}drawer drawer-left {{#courseindexopen}}show{{/courseindexopen}}{{/drawerclasses}}
                {{$drawercontent}}
                    {{{ output.display_course_progress }}}
                    {{{courseindex}}}
                {{/drawercontent}}
                {{$drawerpreferencename}}drawer-open-index{{/drawerpreferencename}}
                {{$drawerstate}}show-drawer-left{{/drawerstate}}
                {{$tooltipplacement}}right{{/tooltipplacement}}
                {{$drawercloseonresize}}1{{/drawercloseonresize}}
                {{$closebuttontext}}{{#str}}closecourseindex, core{{/str}}{{/closebuttontext}}
            {{/ theme_universe/drawer}}
        {{/courseindex}}
        {{/hidecourseindexnav}}

        {{> theme_universe/navbar }}
        <div id="page" data-region="mainpage" data-usertour="scroller" class="drawers {{#topbarcustomhtml}}topbar--ext{{/topbarcustomhtml}} {{#courseindexopen}}show-drawer-left{{/courseindexopen}} {{#blockdraweropen}}show-hidden-drawer show-drawer-right{{/blockdraweropen}} {{#blockdraweropen}}show-drawer-right{{/blockdraweropen}}  drag-container">

            <div id="topofscroll" class="main-inner">

                <div class="drawer-toggles d-flex">
                    {{#courseindex}}
                        <div class="drawer-toggler drawer-left-toggle open-nav d-print-none">
                            <button
                                class="btn-drawer btn-drawer--left drawertoggle"
                                data-toggler="drawers"
                                data-action="toggle"
                                data-target="universe-drawers-courseindex"
                                data-toggle="tooltip"
                                data-placement="right"
                                title="{{#str}}opendrawerindex, core{{/str}}"
                            >
                                <span class="sr-only">{{#str}}opendrawerindex, core{{/str}}</span>
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 5.99519C2 5.44556 2.44556 5 2.99519 5H11.0048C11.5544 5 12 5.44556 12 5.99519C12 6.54482 11.5544 6.99039 11.0048 6.99039H2.99519C2.44556 6.99039 2 6.54482 2 5.99519Z" fill="currentColor" /><path d="M2 11.9998C2 11.4501 2.44556 11.0046 2.99519 11.0046H21.0048C21.5544 11.0046 22 11.4501 22 11.9998C22 12.5494 21.5544 12.9949 21.0048 12.9949H2.99519C2.44556 12.9949 2 12.5494 2 11.9998Z" fill="currentColor" /><path d="M2.99519 17.0096C2.44556 17.0096 2 17.4552 2 18.0048C2 18.5544 2.44556 19 2.99519 19H15.0048C15.5544 19 16 18.5544 16 18.0048C16 17.4552 15.5544 17.0096 15.0048 17.0096H2.99519Z" fill="currentColor" /></svg>
                            </button>
                        </div>
                    {{/courseindex}}
                </div>

                <div id="page-content" class="page-content wrapper-fw">

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

                        <section id="region-main" aria-label="{{#str}}content{{/str}}">
                            <div class="rui-blocks-wrapper wrapper--with-margin wrapper-xl">

                                <div class="wrapper-course wrapper-page">
                                    {{{ output.breadcrumbs }}}
                                    {{{coursepageinformationbanners}}}

                                    {{#secondarymoremenu}}
                                    <div class="secondary-navigation d-print-none">
                                        {{> core/course-moremenu}}
                                    </div>
                                    {{/secondarymoremenu}}

                                    {{#courseimagecontent}}
                                        {{#output.course_hero}}
                                            <div class="rui-course-cover {{#courseimagefw}}rui-course-cover--fw{{/courseimagefw}} {{coursecoverstyle}} mb-3 d-print-none" style="background-image: url('{{{ output.course_hero }}}');" alt="{{#str}}courseoverviewfiles, moodle {{/str}}"></div>
                                        {{/output.course_hero}}
                                    {{/courseimagecontent}}

                                    {{#hasregionmainsettingsmenu}}
                                        <div class="region_main_settings_menu_proxy"></div>
                                    {{/hasregionmainsettingsmenu}}
                                    {{{ output.course_content_header }}}
                                    {{#headercontent}}
                                        {{> core/activity_header }}
                                    {{/headercontent}}
                                    {{#overflow}}
                                        <div class="container-fluid tertiary-navigation">
                                            <div class="navitem">
                                                {{> core/url_select}}
                                            </div>
                                        </div>
                                    {{/overflow}}
                                    
                                    {{#coursetablayout}}
                                        <div class="rui-course-nav-wrapper">
                                            <div class="moremenu navigation">
                                                <ul class="rui-course-nav nav nav-tabs" id="courseTab" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <a href="#courseTabContent"
                                                            class="nav-link {{^istab2active}}active active_tree_node{{/istab2active}}" id="course-tab1" data-toggle="tab" data-target="#tab1" type="button" role="tab" aria-controls="tab1" {{^istab2active}}aria-selected="true"{{/istab2active}} {{#istab2active}}aria-selected="false"{{/istab2active}}>
                                                            {{{titlecoursetab1}}}
                                                        </a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a href="#tab2" class="nav-link {{#istab2active}}active active_tree_node{{/istab2active}}" id="course-tab2" data-toggle="tab" data-target="#tab2" type="button" role="tab" aria-controls="tab2" {{#istab2active}}aria-selected="true"{{/istab2active}} {{^istab2active}}aria-selected="false"{{/istab2active}}>
                                                            {{{titlecoursetab2}}}
                                                        </a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a href="#tab3" class="nav-link" id="course-tab3" data-toggle="tab" data-target="#tab3" type="button" role="tab" aria-controls="tab3" aria-selected="false">
                                                            {{{titlecoursetab3}}}
                                                        </a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a href="#tab4" class="nav-link" id="course-tab4" data-toggle="tab" data-target="#tab4" type="button" role="tab" aria-controls="tab4" aria-selected="false">
                                                            {{{titlecoursetab4}}}
                                                        </a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a href="#tab5" class="nav-link" id="course-tab5" data-toggle="tab" data-target="#tab5" type="button" role="tab" aria-controls="tab5" aria-selected="false">
                                                            {{{titlecoursetab5}}}
                                                        </a>
                                                    </li>
                                                    <li role="none" class="dropdown dropdownmoremenu morebutton d-none" data-region="morebutton">
                                                        <a class="btn btn-icon btn--more nav-link p-0 {{#isactive}}active{{/isactive}}" href="#" id="moremenu-dropdown-topbar" role="{{#istablist}}tab{{/istablist}}{{^istablist}}menuitem{{/istablist}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="-1">
                                                            <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                                                                <path fill="currentColor" d="M13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z"></path>
                                                                <path fill="currentColor" d="M13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z"></path>
                                                                <path fill="currentColor" d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"></path>
                                                            </svg>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-left" data-region="moredropdown" aria-labelledby="moremenu-dropdown-topbar" role="menu">
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        {{#js}}
                                            require(['core/moremenu'], function(moremenu) {
                                            moremenu(document.querySelector('#courseTab'));
                                            });
                                        {{/js}}

                                        {{#hasctopbl}}
                                        <div class="wrapper-fw">
                                            <section id="ctopbl" data-region="tmpl-course-blocks" class="rui-blocks-area">
                                                {{{ ctopbl }}}
                                            </section>
                                        </div>
                                        {{/hasctopbl}}

                                        <div class="tab-content" id="courseTabContent">
                                            <div class="tab-pane fade {{^istab2active}}show active{{/istab2active}}" id="tab1" role="tabpanel" aria-labelledby="course-tab1">
                                                {{#ipcourseimage}}
                                                    {{#output.course_hero}}
                                                        <div class="rui-course-cover {{#courseimagefw}}rui-course-cover--fw{{/courseimagefw}} {{coursecoverstyle}} mb-3" style="background-image: url('{{{ output.course_hero }}}');"></div>
                                                    {{/output.course_hero}}
                                                {{/ipcourseimage}}
                                                {{{ output.full_header }}}
                                                {{{ coursetab-a }}}
                                                {{{ coursetab1content }}}

                                            </div>
                                            <div class="tab-pane fade {{#istab2active}}show active{{/istab2active}}"" id="tab2" role="tabpanel" aria-labelledby="course-tab2">
                                                <div class="wrapper-fw">

                                                    {{#hascstopbl}}
                                                        <section id="cstopbl" data-region="tmpl-course-blocks" class="rui-blocks-area wrapper-xl">
                                                            {{{ cstopbl }}}
                                                        </section>
                                                    {{/hascstopbl}}

                                                    {{{ coursetab2content }}}

                                                    {{{ output.main_content }}}
                                                    {{{ coursetab-b }}}

                                                    {{#hascsbottombl}}
                                                        <section id="csbottombl" data-region="tmpl-course-blocks" class="rui-blocks-area wrapper-xl">
                                                            {{{ csbottombl }}}
                                                        </section>
                                                    {{/hascsbottombl}}
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="course-tab3">
                                                <div class="wrapper-fw">
                                                    {{{ coursetab3content }}}
                                                    {{{ coursetab-c }}}
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab4" role="tabpanel" aria-labelledby="course-tab4">
                                                <div class="wrapper-fw">
                                                    {{{ coursetab4content }}}
                                                    {{{ coursetab-d }}}
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab5" role="tabpanel" aria-labelledby="course-tab5">
                                                <div class="wrapper-fw {{# output.course_contacts }}rui-list--gap {{/ output.course_contacts }}">
                                                    {{{ coursetab5content }}}
                                                    {{{ coursetab-e }}}

                                                    {{#cccteacherslist}}{{{ output.course_contacts }}}{{/cccteacherslist}}
                                                </div>
                                            </div>
                                        </div>

                                    {{/coursetablayout}}

                                    {{^coursetablayout}}

                                        {{{ output.full_header }}}

                                        {{#ipcourseimage}}
                                            {{#output.course_hero}}
                                                <div class="rui-course-cover my-3" style="background-image: url('{{{ output.course_hero }}}');"></div>
                                            {{/output.course_hero}}
                                        {{/ipcourseimage}}

                                        {{#hascstopbl}}
                                            <section id="cstopbl" data-region="tmpl-course-blocks" class="rui-blocks-area mt-4">
                                                {{{ cstopbl }}}
                                            </section>
                                        {{/hascstopbl}}

                                        {{{ output.main_content }}}

                                        {{#hascsbottombl}}
                                            <div>
                                                <section id="csbottombl" data-region="tmpl-course-blocks" class="rui-blocks-area">
                                                    {{{ csbottombl }}}
                                                </section>
                                            </div>
                                        {{/hascsbottombl}}

                                    {{/coursetablayout}}

                                    {{{ output.activity_navigation }}}
                                    {{{ output.course_content_footer }}}

                                </div>

                            </div>
                        </section>
                        {{#hasblocks}}
                            {{< theme_universe/drawer }}
                                {{$id}}universe-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_universe/drawer}}
                        {{/hasblocks}}

                    </div>

                    {{#hascbottombl}}
                        <div class="wrapper-fw">
                            <section id="cbottombl" data-region="tmpl-course-blocks" class="rui-blocks-area wrapper--with-margin wrapper-xl">
                                {{{ cbottombl }}}
                            </section>
                        </div>
                    {{/hascbottombl}}

                </div>

            </div>

            {{> theme_universe/footer }}

        </div>

        {{{ output.standard_after_main_region_html }}}

    </div>
    
    <script>
        // Get all elements with class "rui-modprogress"
        var progressDivs = document.querySelectorAll('.rui-modprogress');

        // Iterate over each div element
        progressDivs.forEach(function(div) {
            // Extract the text content from the div
            var textContent = div.textContent.trim();

            // Extract only numbers using regular expression
            var numbers = textContent.match(/\d+/g);

            // Check if numbers are extracted successfully
            if (numbers && numbers.length === 2) {
                // Split the value before and after the "/" character
                var beforeSlash = numbers[0];
                var afterSlash = numbers[1];

                // Update count-completed-value and count-total-value
                var parentDiv = div.closest('.section-summary-activities');
                var completedSpan = parentDiv.querySelector('.count-completed-value');
                var totalSpan = parentDiv.querySelector('.count-total-value');

                // Calculate the percentage of completion
                var percentage = (beforeSlash / afterSlash) * 100;

                // Update aria-valuenow attribute
                var progressBar = parentDiv.querySelector('.rui-progress-bar');
                if (progressBar) {
                    progressBar.setAttribute('aria-valuenow', percentage);
                    progressBar.style.width = percentage + "%";
                }

                if (completedSpan && totalSpan) {
                    completedSpan.textContent = beforeSlash;
                    totalSpan.textContent = afterSlash;
                }
                
            } else {
                console.error("Error: Failed to extract numbers from the div with ID:", div.id);
            }
        });
    </script>

</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}}