{{!
    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/>.

    Edwiser RemUI
    @package theme_remui
    @copyright (c) 2023 WisdmLabs (https://wisdmlabs.com/)
    @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
}}
{{!
    Page navbar.
}}
{{#focusdata}}
<nav class="fm-navbar fixed-top navbar navbar-light navbar-expand moodle-has-zindex greedy justify-content-between" aria-label="{{#str}}sitemenubar, admin{{/str}}">
    <a href="{{{ config.homeurl }}}" class="navbar-brand d-none d-md-flex align-items-center m-0  aabtn" aria-label="{{ sitename }} - {{#str}}brandname, theme_remui{{/str}}">
        {{#output.get_branding_context}}
            {{#logourl}}
                <img src="{{ logourl }}" class="navbar-brand-logo logo light-logo">
            {{/logourl}}

            {{#darklogourl}}
                <img src="{{ darklogourl }}" class="navbar-brand-logo logo dark-logo">
            {{/darklogourl}}

            {{#logominiurl}}
                <img src="{{ logominiurl }}" class="navbar-brand-logo logomini light-logomini">
            {{/logominiurl}}

            {{#darklogominiurl}}
                <img src="{{ darklogominiurl }}" class="navbar-brand-logo logomini dark-logomini">
            {{/darklogominiurl}}

            {{#icononly}}
                <span class="navbar-brand-logo icononly" style="color: {{color}};">
                    <i class="fa fa-{{siteicon}}"></i>
                </span>
            {{/icononly}}

            {{#iconwithsitename}}
                <span class="navbar-brand-logo iconsitename" style="color: {{color}};">
                    <i class="fa fa-{{siteicon}}"></i>&nbsp;
                    {{{ sitename }}}
                </span>
            {{/iconwithsitename}}
        {{/output.get_branding_context}}
    </a>
    <div class="sub-nav courseheaderbar bg-white">
    <ul class="navbar-nav h-100 m-0" id="wdm-courseheader">
        <li class="nav-item w-100">
            <div class="nav-link d-block m-0 p-0">
                <h5 class="title m-0" aria-label="Course - {{coursename}}"><a href="{{#courseurl}}{{courseurl}}{{/courseurl}} {{^courseurl}}javascript:void(0){{/courseurl}}">{{{coursename}}}</a></h5>
                {{#progress}}
                <div class="d-flex align-items-center">
                    <div class="progress mr-1" style="height: 10px;width: 200px;" >
                        <div class="progress-bar" role="progressbar" style="width: {{progress}}%;" aria-valuenow="{{progress}}" tabindex="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div><span class="progress-text">{{progress}}%</span>
                </div>
                {{/progress}}

                {{^progress}}
                <div class="d-flex align-items-center">
                    <div class="progress mr-1" style="height: 10px;width: 200px;">
                        <div class="progress-bar" tabindex="0" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div><span class="progress-text">0%</span>
                </div>
                {{/progress}}
            </div>
        </li>
    </ul>
    <div class="focus-mode-active-info"><p class="small-info-semibold m-0 ellipsis ellipsis-2 fm-info-text">{{#str}}focusmodeactivenavinfo, theme_remui{{/str}}</p></div>
    <ul class="nav navbar-nav h-100 activity-navigation align-items-center justify-content-between m-0 p-0" aria-label="Activity Navigation">
        <li class="nav-item m-0 p-0" id="coursePrevious">
            <a class="nav-link px-2 w-100 h-100 d-flex align-items-center justify-content-center {{^previous}}disabled{{/previous}}" href="{{#previous}}{{previous}}{{/previous}}{{^previous}}javascript:void(0){{/previous}}" {{^previous}}aria-disabled='true'{{/previous}}>
            <i class="edw-icon edw-icon-Left-Arrow "></i><span class="navigation-text d-sm-none d-lg-block" aria-label="Previous Activity" >{{#str}}prev, theme_remui {{/str}}</span></a>
        </li>
        <li class="nav-item m-0 p-0 focus-dropdown position-relative" id="courseActivities">
            <a class="nav-link justify-content-between dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up" aria-expanded="false" aria-haspopup="listbox" role="button" aria-labelledby="accordionEx1" aria-label="Activity List">
            <span class="text-link-regular">{{#active}}{{{active}}}{{/active}}{{^active}}{{#str}}coursedata, theme_remui{{/str}}{{/active}}</span>
            </a>
            <div class="focus-dropdown-menu dropdown-menu-right" role="menu">
                <div class="accordion md-accordion" id="accordionEx1" role="tablist" aria-label="Activity List" aria-multiselectable="true">
                    {{#sections}}
                    <!-- Accordion card -->
                      <div class="card">
                        <!-- Card header -->
                        <div class="card-header border-0" role="tab" id="heading{{sectionid}}">
                          <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx1" href="#collapse{{sectionid}}"
                            aria-expanded="false" aria-controls="collapse{{sectionid}}">
                            <h5 class="mb-0 d-flex justify-content-between text-link-semibold">
                              {{{name}}} {{#hasactivites}}<i class="edw-icon edw-icon-UpArrow"></i>{{/hasactivites}}
                            </h5>
                          </a>
                        </div>
                        {{#hasactivites}}
                        <!-- Card body -->
                        <div id="collapse{{sectionid}}" class="collapse {{active}}" role="tabpanel" aria-labelledby="heading{{sectionid}}"
                          data-parent="#accordionEx1">
                          <div class="card-body m-0 p-0">
                                {{#activities}}
                                {{^isdelegatedsection}}
                                    <div class="card  {{active}}">
                                        <!-- Card header -->
                                        <div class="card-header d-flex activity-item" role="tab">
                                        <a href="{{url}}" class="w-100 d-inline-flex justify-content-left align-items-center">
                                            {{#completionstate}}
                                                <span class="activity-completion-indicator complete_icon icon fa fa-check"></span>
                                            {{/completionstate}}
                                            {{^completionstate}}
                                                <img src="{{icon}}" class="iconlarge activityicon mr-2" alt="" role="presentation" aria-hidden="true">
                                            {{/completionstate}}
                                            <h5 class="mb-0 text-link-regular">
                                            {{name}}
                                            </h5>
                                        </a>
                                        </div>

                                    </div>
                                {{/isdelegatedsection}}
                                {{#isdelegatedsection}}
                                    <div class="fm-dropdown-subsections">
                                        <div class="accordion md-accordion" id="accordionEx1_{{sectionid}}" role="tablist" aria-label="Activity List" aria-multiselectable="true">
                                            <div className="card">
                                                <div class="subsection-header border-0" role="tab" id="heading_subsection{{sectionid}}">
                                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx1_{{sectionid}}" href="#collapse_subsection{{sectionid}}"
                                                        aria-expanded="false" aria-controls="collapse_subsection{{sectionid}}">
                                                        <h5 class="mb-0 d-flex justify-content-between text-link-semibold">
                                                        {{{name}}} {{#hasactivites}}<i class="edw-icon edw-icon-UpArrow"></i>{{/hasactivites}}
                                                        </h5>
                                                    </a>
                                                </div>

                                                <div id="collapse_subsection{{sectionid}}" class="collapse {{active}}" role="tabpanel" aria-labelledby="heading_subsection{{sectionid}}"
                                                    data-parent="#accordionEx1_{{sectionid}}">
                                                    <div class="card-body m-0 p-0">
                                                        {{#activities}}
                                                        <div class="card  {{active}}">
                                                            <!-- Card header -->
                                                            <div class="card-header d-flex activity-item" role="tab">
                                                            <a href="{{url}}" class="w-100 d-inline-flex justify-content-left align-items-center">
                                                                {{#completionstate}}
                                                                    <span class="activity-completion-indicator complete_icon icon fa fa-check"></span>
                                                                {{/completionstate}}
                                                                {{^completionstate}}
                                                                    <img src="{{icon}}" class="iconlarge activityicon mr-2" alt="" role="presentation" aria-hidden="true">
                                                                {{/completionstate}}
                                                                <h5 class="mb-0 text-link-regular">
                                                                {{name}}
                                                                </h5>
                                                            </a>
                                                            </div>
                                                        </div>
                                                        {{/activities}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {{/isdelegatedsection}}
                            {{/activities}}

                          </div>
                        </div>
                        {{/hasactivites}}
                      </div>
                      <!-- Accordion card -->
                    {{/sections}}
                </div>
            </div>
        </li>
        <li class="nav-item m-0 p-0" id="courseNext" {{^next}}aria-disabled="true"{{/next}}>
            <a class="nav-link px-2 w-100 h-100 d-flex align-items-center justify-content-center {{^next}}disabled{{/next}}"
            href="{{#next}}{{next}}{{/next}}{{^next}}javascript:void(0){{/next}}"
            aria-label="Next Activity" role="button"
            ><span class="navigation-text d-sm-none d-lg-block" >{{#str}}next, theme_remui {{/str}}</span><i class="edw-icon edw-icon-Right-Arrow "></i></a>
        </li>
        {{#canenabledm}}
            <div class="nav-darkmode nav-item d-flex align-items-center" data-dm="disabled">
                <a class="dm-toggle text-decoration-none">
                    {{^dmanimate}}
                    <span class="edw-icon edw-icon-Dark-mode darkmodeicon"  title="Dark mode"></span>
                    <span class="edw-icon edw-icon-Light-mode lightmodeicon"  title="Light mode"></span>
                    {{/dmanimate}}

                    {{#dmanimate}}
                    <img src="{{config.wwwroot}}/theme/remui/pix/darkmode.gif" style="width:50px;height:50px;"/>
                    <span class="edw-icon edw-icon-Light-mode lightmodeicon"  title="Light mode"></span>
                    {{/dmanimate}}
                </a>
            </div>
        {{/canenabledm}}
    </ul>
    </div>
</nav>
{{/focusdata}}

{{#js}}
require(['jquery', 'core/toast'], function($, Toast) {
    var scrolled = false;
    $('#courseActivities .dropdown-toggle').click(function() {
        var menu = $(this).parent().find('.focus-dropdown-menu');
        menu.slideToggle(200, 'linear', function() {
            if (!$(this).is(':hidden') && !scrolled) {
                scrolled = true;
                if (menu.find('.collapse.show').length != 0) {
                    menu.scrollTop(menu.scrollTop() + menu.find('.collapse.show').parent().position().top);
                }
            }
        });
    });
    {{#focusdata}}
    {{#enableadmininfo}}
        var notificationMessage = '{{#str}}focusmodeactiveadminmsg, theme_remui{{/str}}';
        Toast.add(notificationMessage, {
            delay: 5000,
            closeButton: true,
            type: 'warning'
        });
    {{/enableadmininfo}}
    {{/focusdata}}
});
{{/js}}