<div class="card dashboard-card" role="listitem" data-region="course-content" data-course-id="{{{id}}}">
    <a href="{{config.wwwroot}}/course/view.php?id={{{id}}}" tabindex="-1">
        <div class="card-img dashboard-card-img" style="background-image: url({{{image}}});">
            <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}} {{{fullname}}}</span>
            <div class="course-category">
                {{{category}}}
            </div>
            {{#hasenrolmenticons}}
                <div class="enrolmenticons d-flex">
                    {{#enrolmenticons}}
                        <div class="enrolmenticon">
                            {{{.}}}
                        </div>
                    {{/enrolmenticons}}
                </div>
            {{/hasenrolmenticons}}
        </div>
    </a>
    <div class="card-body course-info-container">
        <div class="d-flex align-items-start">
            <div class="w-100">
                <a href="{{config.wwwroot}}/course/view.php?id={{{id}}}" class="aalink coursename mr-2 mb-1">
                    {{{fullname}}}
                </a>
            </div>
        </div>

        <div class="customfields">
            {{{customfields}}}
        </div>

        <div class="course-summary">
            {{{summary}}}
        </div>
    </div>
    {{#hasprogress}}
        <div class="d-flex align-items-start">
            <div class="card-footer dashboard-card-footer border-0 bg-white w-100">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{{progress}}}" style="width: {{{progress}}}%" aria-valuemin="0" aria-valuemax="{{{progress}}}"></div>
                </div>
                <p class="mb-0">{{#str}}completepercent, block_myoverview, {{progress}}{{/str}}</p>
            </div>
        </div>
    {{/hasprogress}}

    {{#hascontacts}}
        <div class="course-contacts">
            {{#contacts}}
                <a href="{{config.wwwroot}}/user/profile.php?id={{{id}}}" class="contact" data-toggle="tooltip" title="{{{fullname}}}">
                    <img src="{{{userpicture}}}" class="rounded-circle" alt="{{{fullname}}}">
                    <div class="info">
                        <p class="name">{{{fullname}}}</p>
                        <p class="role">{{{role}}}</p>
                    </div>
                </a>
            {{/contacts}}
        </div>
    {{/hascontacts}}
</div>