{{!
    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_boost_union/courselistinglist

    This template renders a row for the course listing.
    This is a modified version of block_myoverview/view-list and is used to show the course list on site home and the category.

    Example context (json):
    {
        "courses": [
            {
                "name": "Assignment due 1",
                "viewurl": "https://moodlesite/course/view.php?id=2",
                "courseimage": "https://moodlesite/pluginfile/123/course/overviewfiles/123.jpg",
                "fullname": "course 3",
                "hasprogress": true,
                "progress": 10,
                "progressstyleasbar": false,
                "coursecategory": "Category 1",
                "visible": true
            }
        ]
    }
}}

<div class="course-listitem border rounded p-3 mb-3" role="listitem"
    data-region="course-content"
    data-course-id="{{{id}}}">
    <div class="row">
        {{#showcourseimage}}
            <div class="col-md-3 col-sm-4 mb-md-0">
                <a href="{{viewurl}}" tabindex="-1" class="mw-100 w-100">
                    <div class="rounded list-image mw-100" style='background-image: url("{{{courseimage}}}");'>
                        <span class="visually-hidden">{{fullname}}</span>
                    </div>
                </a>
                {{#showcoursecontacts}}
                    {{#hascontacts}}
                        <div class="coursecontacts mx-3 d-flex flex-wrap">
                            {{#contacts}}
                                {{#canviewuserdetails}}<a href="{{config.wwwroot}}/user/profile.php?id={{{id}}}" tabindex="-1">{{/canviewuserdetails}}
                                    <div class="contact me-2 mb-2">
                                        {{! The Bootstrap tooltip which we set with the data-bs-toggle attribute might not be shown on pages where this template is lazy-loaded (e.g. the combo list on site home). But we accept this. }}
                                        <img src="{{{userpicture}}}" class="rounded-circle shadow-sm" alt="{{{contactname}}}" data-bs-toggle="tooltip" title="{{{contactname}}}" />
                                    </div>
                                {{#canviewuserdetails}}</a>{{/canviewuserdetails}}
                            {{/contacts}}
                        </div>
                    {{/hascontacts}}
                {{/showcoursecontacts}}
            </div>
        {{/showcourseimage}}
        <div class="{{#showsidebar}}{{#showcourseimage}}col-md-6 col-sm-4{{/showcourseimage}}{{^showcourseimage}}col-md-9 col-sm-8{{/showcourseimage}}{{/showsidebar}}{{^showsidebar}}{{#showcourseimage}}col-md-9 col-sm-8{{/showcourseimage}}{{^showcourseimage}}col-md-12 col-sm-12{{/showcourseimage}}{{/showsidebar}} d-flex flex-column">
            {{#showshortname}}
                <div class="text-muted muted d-flex flex-wrap">
                    <span class="visually-hidden">
                        {{#str}}aria:courseshortname, core_course{{/str}}
                    </span>
                    <div class="text-truncate small">
                        <span class="shortname">
                            {{{shortname}}}
                        </span>
                    </div>
                </div>
            {{/showshortname}}
            <a href="{{viewurl}}" class="aalink coursename">
                <span class="visually-hidden">
                    {{#str}}aria:coursename, core_course{{/str}}
                </span>
                {{{fullname}}}
            </a>
            {{#showcoursecategory}}
                <div class="text-muted muted d-flex flex-wrap">
                    <span class="visually-hidden">
                        {{#str}}aria:coursecategory, core_course{{/str}}
                    </span>
                    <span class="categoryname text-truncate">
                        {{{coursecategory}}}
                    </span>
                </div>
            {{/showcoursecategory}}
            {{^visible}}
                <div class="d-flex flex-wrap">
                    <span class="badge bg-info text-white">{{#str}} hiddenfromstudents {{/str}}</span>
                </div>
            {{/visible}}

            {{#showdetailsbar}}
                <div class="d-flex flex-wrap mt-auto pt-3 mb-0">
                    {{#showcourseprogress}}
                        {{#hasprogress}}
                            <div class="text-muted muted d-flex flex-wrap mt-auto flex-fill">
                                {{#progressstyleasbar}}
                                    {{> theme_boost_union/course-progress-with-bar}}
                                {{/progressstyleasbar}}
                                {{^progressstyleasbar}}
                                    {{> theme_boost_union/course-progress-without-bar}}
                                {{/progressstyleasbar}}
                            </div>
                        {{/hasprogress}}
                    {{/showcourseprogress}}
                    {{#showcourseenrolicons}}
                        {{#hasenrolicons}}
                            <div class="menu border-0 ms-auto">
                                <div class="enrolmenticons d-flex">
                                    {{#enrolmenticons}}
                                        <div class="enrolmenticon">
                                            {{{.}}}
                                        </div>
                                    {{/enrolmenticons}}
                                </div>
                            </div>
                        {{/hasenrolicons}}
                    {{/showcourseenrolicons}}
                </div>
            {{/showdetailsbar}}
        </div>
        {{#showsidebar}}
            <div class="col-md-3 col-sm-4 mt-3 mt-sm-0 d-flex flex-column">
                {{#showbuttons}}
                    <div class="row">
                        <div class="col-sm-12 col-6 mb-2">
                            {{#showcoursegoto}}
                                <a href="{{viewurl}}" tabindex="-1" class="gotobutton btn btn-primary w-100">
                                    {{#str}}courselistinggoto, theme_boost_union{{/str}}
                                </a>
                            {{/showcoursegoto}}
                        </div>
                        <div class="col-sm-12 col-6 mb-2">
                            {{#showcoursepopup}}
                                <button class="popupbutton btn btn-secondary w-100"
                                        data-action="course-details"
                                        data-title="{{fullname}}"
                                        {{#hassummary}}data-summary="{{summary}}"{{/hassummary}}
                                        {{#hascontacts}}data-coursecontacts="{{#contacts}}{{> theme_boost_union/coursedetailsmodal-contact-dataattrib}}{{/contacts}}"{{/hascontacts}}
                                        {{#hascustomfields}}data-customfields="{{customfields}}"{{/hascustomfields}}>
                                    {{#str}}courselistingpopup, theme_boost_union{{/str}}
                                </button>
                            {{/showcoursepopup}}
                        </div>
                    </div>
                {{/showbuttons}}

                {{#showcoursefields}}
                    {{#hascustomfields}}
                        <div class="d-flex flex-wrap mt-1 border rounded bg-light p-2">
                            <div class="customfields">
                                {{{customfields}}}
                            </div>
                        </div>
                    {{/hascustomfields}}
                {{/showcoursefields}}
            </div>
        {{/showsidebar}}
    </div>
</div>
