Sindbad~EG File Manager

{{!
    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 format_grid/grid

    Displays the grid.

    Context variables required for this template:
    * gridjustify - The justification for the grid.
    * gridsections - The array of sections.
    * showcompletion - If completion is on and shown.
    * sectionbreak - There is a section break for this section.
    * sectionbreakheading - Section break heading.
    * number - Section number.
    * imageresizemethodcrop - Image resize method is crop.
    * sectiontitleingridbox - Show the section title?
    * sectionbadgeingridbox - Show the section bagde if any?
    * iscurrent - Current section?
    * sectionurl - Section URL.
    * sectionname - Section name.
    * imageuri - Image URI.
    * alttext - Image alternative text.
    * generatedimageuri - Generated image URI.
    * sectioncompletionmarkup - Section completion markup if any.

    Example context (json):
    {
        "gridjustification" : "space-between",
        "gridsections": [
            {
                "sectionbreak": false,
                "sectionbreakheading": "",
                "number": 41,
                "sectionurl": "https://mymoodle/course/view.php?id=4&section=1",
                "sectionname": "The first section",
                "imageuri": false,
                "generatedimageuri": "Base64 encoded svg",
                "sectioncompletionmarkup": ""
            },
            {
                "sectionbreak": true,
                "sectionbreakheading": "This is the section heading",
                "number": 42,
                "iscurrent": true,
                "sectionurl": "https://mymoodle/course/view.php?id=4&section=2",
                "sectionname": "The second section",
                "imageuri": "https://mymoodle/pluginfile.php/358/format_grid/displayedsectionimage/42/1/ducking.jpg.webp",
                "imagealttext": "Duckling",
                "generatedimageuri": false,
                "sectioncompletionmarkup": ""
            }
        ],
        "imageresizemethodcrop": true,
        "sectiontitleingridbox": true,
        "sectionbadgeingridbox": true,
        "showcompletion": true
    }
}}
<div class="thegrid d-flex flex-wrap grid-justify-{{gridjustification}} mt-2">
    {{#gridsections}}
    {{#sectionbreak}}
    </div>
    {{#sectionbreakheading}}
    <div id="gridsectionbreak-{{number}}" class="gridsectionbreakheading mb-1 mt-1">{{{sectionbreakheading}}}</div>
    {{/sectionbreakheading}}
    <div class="thegrid d-flex flex-wrap grid-justify-{{gridjustification}}">
    {{/sectionbreak}}
    <div id="section-{{number}}" class="grid-section card{{#iscurrent}} currentgridsection{{/iscurrent}}" title="{{sectionname}}">
        {{^popup}}
        {{#notavailable}}<div class="grid-section-inner d-flex flex-column h-100">{{/notavailable}}
        {{^notavailable}}<a class="grid-section-inner d-flex flex-column h-100" href="{{sectionurl}}">{{/notavailable}}
        {{/popup}}
        {{#popup}}
        <div class="grid-modal grid-section-inner d-flex flex-column h-100" data-toggle="modal" data-target="#gridPopup" data-section="{{number}}" tabindex="0">
        {{/popup}}
            <div class="card-body p-0">
                {{#sectiontitleingridbox}}
                <div class="card-header h-100">
                    <h3 class="h4 text-truncate">{{{sectionname}}}</h3>
                    {{#sectionbadgeingridbox}}{{#hasbadge}}
                    <div data-region="sectionbadges" class="sectionbadges d-flex">
                        {{$ core_courseformat/local/content/section/badges }}
                            {{> core_courseformat/local/content/section/badges }}
                        {{/ core_courseformat/local/content/section/badges }}
                    </div>
                    {{/hasbadge}}{{/sectionbadgeingridbox}}
                </div>
                {{/sectiontitleingridbox}}
            </div>
            <div class="grid-image-container">
                {{#imageuri}}
                <div class="grid-image{{^imageresizemethodcrop}} grid-scaled{{/imageresizemethodcrop}} text-center">
                    <img{{#imageresizemethodcrop}} class="card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}}"{{/imageresizemethodcrop}} src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy">
                    {{^sectiontitleingridbox}}{{#sectionbadgeingridbox}}{{#hasbadge}}
                    <div data-region="sectionbadges" class="sectionbadges d-flex {{^sectioncompletionmarkup}}justify-content-center align-items-center grid-badge-middle{{/sectioncompletionmarkup}}{{#sectioncompletionmarkup}}ml-2 align-items-end grid-badge-bottom{{/sectioncompletionmarkup}}">
                        {{$ core_courseformat/local/content/section/badges }}
                            {{> core_courseformat/local/content/section/badges }}
                        {{/ core_courseformat/local/content/section/badges }}
                    </div>
                    {{/hasbadge}}{{/sectionbadgeingridbox}}{{/sectiontitleingridbox}}
                    {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
                </div>
                {{/imageuri}}
                {{#generatedimageuri}}
                <div class="grid-generatedimage card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}} text-center" style="background-image: url('{{generatedimageuri}}');">
                    {{^sectiontitleingridbox}}{{#sectionbadgeingridbox}}{{#hasbadge}}
                    <div data-region="sectionbadges" class="sectionbadges d-flex justify-content-center align-items-center h-100">
                        {{$ core_courseformat/local/content/section/badges }}
                            {{> core_courseformat/local/content/section/badges }}
                        {{/ core_courseformat/local/content/section/badges }}
                    </div>
                    {{/hasbadge}}{{/sectionbadgeingridbox}}{{/sectiontitleingridbox}}
                    {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
                </div>
                {{/generatedimageuri}}
                {{#imageerror}}
                <div class="grid-image-error text-center">
                    <p><small>{{imageerror}}</small></p>
                    {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
                </div>
                {{/imageerror}}
            </div>
        {{^popup}}
        {{#notavailable}}</div>{{/notavailable}}
        {{^notavailable}}</a>{{/notavailable}}
        {{/popup}}
        {{#popup}}
        </div>
        {{/popup}}
    </div>
    {{/gridsections}}
</div>

{{#popup}}
<div class="modal fade" id="gridPopup" tabindex="-1" aria-labelledby="gridPopupLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title h4" id="gridPopupLabel">Section X</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="{{#str}}close, form{{/str}}">
                    <span class="fa fa-times" aria-hidden="true"></span>
                </button>
            </div>
            <div class="modal-body">
                <div id="gridPopupCarousel" class="carousel slide" data-interval="false">
                    <div class="carousel-inner">
                        {{#popupsections}}
                        <div id="gridpopupsection-{{num}}" data-section="{{num}}" data-sectiontitle="{{#header}}{{{name}}}{{/header}}" class="carousel-item gridcarousel-item">
                            {{#restrictionlock}}
                            <div class="align-self-center ml-2">
                                {{#pix}}t/unlock, core{{/pix}}
                            </div>
                            {{/restrictionlock}}
                            <div data-region="sectionbadges" class="sectionbadges d-flex align-items-center">
                                {{$ core_courseformat/local/content/section/badges }}
                                    {{> core_courseformat/local/content/section/badges }}
                                {{/ core_courseformat/local/content/section/badges }}
                            </div>
                            <div class="{{#hasavailability}}description{{/hasavailability}} my-3" data-for="sectioninfo">
                            {{#summary}}
                                {{$ core_courseformat/local/content/section/summary }}
                                {{> core_courseformat/local/content/section/summary }}
                                {{/ core_courseformat/local/content/section/summary }}
                            {{/summary}}
                            {{#availability}}
                                {{$ core_courseformat/local/content/section/availability }}
                                    {{> core_courseformat/local/content/section/availability }}
                                {{/ core_courseformat/local/content/section/availability }}
                            {{/availability}}
                            </div>
                            {{#cmsummary}}
                                {{$ core_courseformat/local/content/section/cmsummary }}
                                    {{> core_courseformat/local/content/section/cmsummary }}
                                {{/ core_courseformat/local/content/section/cmsummary }}
                            {{/cmsummary}}
                            {{#cmlist}}
                                {{$ core_courseformat/local/content/section/cmlist }}
                                    {{> core_courseformat/local/content/section/cmlist }}
                                {{/ core_courseformat/local/content/section/cmlist }}
                            {{/cmlist}}
                        </div>
                        {{/popupsections}}
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="gridPopupCarouselLeft" class="btn btn-light" type="button" data-target="#gridPopupCarousel" data-slide="prev">
                    <span class="fa fa-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">{{#str}}previoussection{{/str}}</span>
                </button>
                <button class="btn btn-secondary" type="button" data-dismiss="modal">{{#str}}close, form{{/str}}</button>
                <button id="gridPopupCarouselRight" class="btn btn-light" type="button" data-target="#gridPopupCarousel" data-slide="next">
                    <span class="fa fa-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">{{#str}}nextsection{{/str}}</span>
                </button>
            </div>
        </div>
    </div>
</div>
{{/popup}}
{{#js}}
require(['format_grid/thegrid'], function(gridhandler) {
    var sectionnumbers = [{{gridsectionnumbers}}];
    gridhandler.init(sectionnumbers, {{#popup}}true, {{#showcompletion}}true{{/showcompletion}}{{^showcompletion}}false{{/showcompletion}}{{/popup}}{{^popup}}false, false{{/popup}});
});
{{/js}}