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

    This template renders a card for the course listing.
    This is a modified version of core_course/coursecard and is used to show the course cards on site home and the category.
    In addition to that it contains the partials from block_myoverview/view-cards.

    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,
                "visible": true
            }
        ]
    }
}}
<div class="card course-card mx-1 mb-2" role="listitem"
    data-region="course-content"
    data-course-id="{{{id}}}">
    {{#showcourseimage}}
    <a href="{{viewurl}}" tabindex="-1">
        <div class="card-img-top" 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}}
    {{/showcourseimage}}
    <div class="card-body course-info-container px-3" id="course-info-container-{{id}}">
        <div class="d-flex align-items-start">
            <div class="w-100">
                {{#showshortname}}
                    <div class="text-muted muted d-flex mb-1 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 me-2 mb-1">
                    <span class="visually-hidden">
                        {{#str}}aria:coursename, core_course{{/str}}
                    </span>
                    {{{fullname}}}
                </a>
                <div class="text-muted muted d-flex flex-wrap">
                    {{#showcoursecategory}}
                        <span class="visually-hidden">
                            {{#str}}aria:coursecategory, core_course{{/str}}
                        </span>
                        <span class="categoryname text-truncate">
                            {{{coursecategory}}}
                        </span>
                    {{/showcoursecategory}}
                </div>
                {{^visible}}
                    <div class="d-flex flex-wrap">
                        <span class="badge bg-info text-white">{{#str}} hiddenfromstudents {{/str}}</span>
                    </div>
                {{/visible}}
            </div>
        </div>
    </div>

    {{#showdetailsbar}}
        <div class="d-flex align-items-start mt-0 mb-2">
            {{#showcourseprogress}}
                {{#hasprogress}}
                    <div class="border-0 px-3 border-radius w-100">
                        {{#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 pe-3 ms-auto">
                        <div class="enrolmenticons d-flex">
                            {{#enrolmenticons}}
                                <div class="enrolmenticon">
                                    {{{.}}}
                                </div>
                            {{/enrolmenticons}}
                        </div>
                    </div>
                {{/hasenrolicons}}
            {{/showcourseenrolicons}}
        </div>
    {{/showdetailsbar}}

    {{#showcoursefields}}
        {{#hascustomfields}}
            <div class="d-flex align-items-start mt-0 px-3 py-2 border-top">
                <div class="customfields">
                    {{{customfields}}}
                </div>
            </div>
        {{/hascustomfields}}
    {{/showcoursefields}}

    {{#showbuttons}}
        <div class="d-flex card-footer align-items-start mt-0 px-3 py-2 border-top">
            {{#showcoursegoto}}
                <a href="{{viewurl}}" tabindex="-1" class="gotobutton btn btn-primary me-2">
                    {{#str}}courselistinggoto, theme_boost_union{{/str}}
                </a>
            {{/showcoursegoto}}
            {{#showcoursepopup}}
                <button class="popupbutton btn btn-secondary"
                        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>
    {{/showbuttons}}
</div>
