{{!
    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
}}
{{!
    @template theme_remui/enrolpage

    remui 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_remui/common_start}}
<div id="page-content" class="pb-3 d-print-block">
    <div id="region-main-box">
        {{#hasregionmainsettingsmenu}}
        <div id="region-main-settings-menu" class="d-print-none">
            <div> {{{ regionmainsettingsmenu }}} </div>
        </div>
        {{/hasregionmainsettingsmenu}}
        <section id="region-main" aria-label="{{#str}}content{{/str}}">
            {{#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}}

            {{#enrolment}}
                {{#ismanager}}
                <a href="{{{courseurl}}}" class="btn btn-secondary btn-sm btn-backtocourse d-flex align-items-center p-mb-5">
                    <span class="edw-icon edw-icon-Left-Arrow"></span>
                    {{#str}}backtothecourse, theme_remui{{/str}}
                </a>
                {{/ismanager}}
            {{/enrolment}}
            
            {{#enrolment}}
                <div class="enrollment-sections">
                    {{#headersection}}
                    {{> theme_remui/enrol_headersection}}
                    {{/headersection}}

                    {{#pricingsection}}
                    {{> theme_remui/enrol_pricingsection}}
                    {{/pricingsection}}

                    {{#courseoverview}}
                    {{> theme_remui/enrol_courseoverview}}
                    {{/courseoverview}}

                </div>
            {{/enrolment}}
            {{#enrolment}}
                {{#editing}}
                    <div class="ml-auto d-flex justify-content-end flex-gap-2">
                        <a href="{{editenrolmethodspagelink}}" target="_blank" class="textlink-with-icon text-link-semibold d-flex flex-gap-0d5 align-items-center p-py-2 p-px-3">
                            <span>{{#str}}updateenrollmentmethods, theme_remui, {{#str}}enrolment, enrol{{/str}}{{/str}}</span>
                            <span class="edw-icon edw-icon-Shortcut"></span>
                        </a>
                        <a href="#" target="_blank" class="textlink-with-icon text-link-semibold  flex-gap-0d5 align-items-center p-py-2 p-px-3 hide-enrol-option-btn
                            {{#enrolloptionshidden}}d-none{{/enrolloptionshidden}}
                            {{^enrolloptionshidden}}d-flex{{/enrolloptionshidden}}
                        ">
                            <span class="edw-icon edw-icon-Hide"></span>
                            <span>{{#str}}hideenrollmentoptions, theme_remui, {{#str}}enrolment, enrol{{/str}}{{/str}}</span>
                        </a>
                        <a href="#" target="_blank" class="textlink-with-icon  text-link-semibold  flex-gap-0d5 align-items-center p-py-2 p-px-3 show-enrol-option-btn
                            {{#enrolloptionshidden}}d-flex{{/enrolloptionshidden}}
                            {{^enrolloptionshidden}}d-none{{/enrolloptionshidden}}
                        ">
                            <span class="edw-icon edw-icon-Show"></span>
                            <span>{{#str}}showenrollmentoptions, theme_remui,{{#str}}enrolment, enrol{{/str}}{{/str}}</span>
                        </a>
                    </div>
                {{/editing}}
            {{/enrolment}}

            <div class="doted-border enrol-main-area-wrapper {{#enrolment}}{{#enrolloptionshidden}}d-none{{/enrolloptionshidden}}{{/enrolment}}">
                {{{ output.main_content }}}
                {{#enrolment}}{{{csstohidemainarearemuifields}}}{{/enrolment}}
            </div>
            {{#enrolment}}
            {{#editing}}
            <div id="maincontent2" class ="doted-border h-100 p-p-5 enrol-mainarea-hidden-contentainer {{#enrolment}}{{^enrolloptionshidden}}d-none{{/enrolloptionshidden}}{{/enrolment}}">
                <div  class="empty-box p-p-6 d-flex justify-content-center align-items-center">
                    <p class="m-0 para-semibold-2">
                        {{#str}}sectionishiddenmessage, theme_remui{{/str}}
                    </p>
                </div>
            </div>
            {{/editing}}
            {{/enrolment}}
            {{{ output.activity_navigation }}}
            
            {{#enrolment}}
            <div class="doted-border p-mt-11 {{#editing}}p-py-5 p-px-4{{/editing}}">
                {{#editing}}
                    <a href="{{editreletedlatestsettinglink}}" target="_blank" class="textlink-with-icon text-link-semibold d-flex flex-gap-0d5 align-items-center p-py-2 p-mx-3 ml-auto p-mb-8">
                        <span>{{#str}}editcoursessectionsettings, theme_remui{{/str}}</span>
                        <span class="edw-icon edw-icon-Shortcut"></span>
                    </a>
                {{/editing}}
                {{#showrelatedcoursesblock}}
                    {{#hasrelatedcourses}}
                        <div class="enroll-page-relatedcourses d-flex flex-column flex-gap-8 ">
                            <div class="d-flex  justify-content-between align-items-center">
                                <h3 class="h-semibold-3 m-0">
                                    {{#str}}enrol_relatedcourses,theme_remui{{/str}}
                                </h3>
                                <div class="header-content-wrapper ">
                                    <a href='{{coursearcivecaturl}}' class="h-semibold-6 m-0 text-decoration-none ">{{#str}}enrol_viewall,theme_remui{{/str}}</a>
                                </div>
                            </div>
                            <div class="relatedcourses-wrapper edw-course-card-grid p-px-3">
                                {{#relatedcourses}}
                                    {{{relatedcourses}}}
                                {{/relatedcourses}}
                            </div>
                        </div>
                    {{/hasrelatedcourses}}
                    {{^hasrelatedcourses}}
                        {{#editing}}
                            <div class="doted-border bg-white p-p-5">
                                <div  class="empty-box p-p-6 d-flex justify-content-center align-items-center">
                                    <p class="m-0 para-semibold-2">
                                        {{#str}}norelatedcoursemessage, theme_remui{{/str}}
                                    </p>
                                </div>
                            </div>
                        {{/editing}}
                    {{/hasrelatedcourses}}
                {{/showrelatedcoursesblock}}

                {{#showlatestcoursesblock}}
                    {{#haslatestcourses}}
                        <div class="enroll-page-latestcourses p-mt-11 d-flex flex-column flex-gap-8">
                            <div class="d-flex flex-column flex-gap-1">
                                <h3 class="h-semibold-3 m-0">
                                    {{#str}}enrol_latestcourses,theme_remui{{/str}}
                                </h3>
                            </div>
                            <div class="latestcourses-wrapper latestcourses-slick-wrapper">
                                {{#latestcourses}}
                                    {{{latestcourses}}}
                                {{/latestcourses}}
                            </div>
                            <div class='latest-available-courses button-container w-100 text-center '>
                                <button type='button' class='btn btn-floating btn-primary btn-prev btn-sm'  title='Previous button'>
                                    <span class='edw-icon edw-icon-Left-Arrow' aria-hidden='true'></span>
                                </button>
                                <button type='button' class='btn btn-floating btn-primary btn-next btn-sm '  title='Next button'>
                                    <span class='edw-icon edw-icon-Right-Arrow' aria-hidden='true'></span>
                                </button>
                            </div>
                        </div>
                    {{/haslatestcourses}}
                    {{^haslatestcourses}}
                        {{#editing}}
                            <div class="doted-border bg-white p-p-5 p-mt-6">
                                <div  class="empty-box p-p-6 d-flex justify-content-center align-items-center">
                                    <p class="m-0 para-semibold-2">
                                        {{#str}}nolatestcoursemessage, theme_remui{{/str}}
                                    </p>
                                </div>
                            </div>
                        {{/editing}}
                    {{/haslatestcourses}}
                {{/showlatestcoursesblock}}
            </div>
            {{/enrolment}}
            {{{ output.course_content_footer }}}

        </section>
    </div>
</div>
{{> theme_remui/common_end}}

{{#focusdata.enabled}}
{{#js}}
require(['theme_remui/focusmode'], function(focusmode){
 focusmode.init({{focusdata.on}});
});
{{/js}}
{{/focusdata.enabled}}

{{#js}}
    require(['theme_remui/enrolpage'], function(Enrol){
        Enrol.init();
    });
{{/js}}


{{#js}}
require(['jquery', 'theme_remui/slick'], function ($) {
$(document).ready(function(){
    $('.latestcourses-slick-wrapper').slick({
        dots: false,
        arrows: true,
        infinite: false,
        speed: 500,
        prevArrow: $(".latest-available-courses.button-container .btn-prev"),
        nextArrow: $(".latest-available-courses.button-container .btn-next"),
        rtl: ($("html").attr("dir") == "rtl") ? true : false,
        {{#enrolment}}
            {{#hasnarrowidth}}
                slidesToShow: 3,
                slidesToScroll: 3,
                responsive: [{
                    breakpoint: 1200,
                    settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3
                    }
                }, {
                    breakpoint: 1024,
                    settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                    }
                }, {
                    breakpoint: 768,
                    settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                    }
                }
                ]
            {{/hasnarrowidth}}

            {{^hasnarrowidth}}
                slidesToShow: 4,
                slidesToScroll: 4,
                responsive: [{
                    breakpoint: 1200,
                    settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3
                    }
                }, {
                    breakpoint: 1024,
                    settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                    }
                }, {
                    breakpoint: 768,
                    settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                    }
                }
                ]
            {{/hasnarrowidth}}

        {{/enrolment}}

      })
      .on('setPosition', function (event, slick) {
        slick.$slides.css('height', slick.$slideTrack.height() + 'px');
        $('.slick-slide > div').css('height', '100%');
      });
      $('.slick-slide-container.slick-slider.d-none').removeClass('d-none');
});
});
{{/js}}
