{{!
    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_magnific/frontpage-coursecat_coursebox

    This template renders the main content area for the myoverview block.

    Example context (json):
    {
      "viewurl": "/course/view.php?id=10",
      "courseimage": "https://example.com/images/course-image.jpg",
      "fullname": "Advanced Python Programming",
      "is_enrolled": false,
      "countlessons": 25,
      "instructor": {
        "instructorname": "Jane Doe",
        "instructortitle": "Lead Python Developer",
        "instructorurl": "https://example.com/images/instructor-avatar.jpg"
      }
    }

}}

<div class="course-box col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="frontpage-coursecat_coursebox d-flex">
        <div class="course-item">
            <div class="course-item-img">
                <a href="{{viewurl}}" style="background-image: url('{{courseimage}}')">&nbsp;</a>
            </div>
            <div class="course-content">
                <div class="course-title-group">
                    <h3>
                        <a href="{{viewurl}}">{{fullname}}</a>
                    </h3>
                    {{^is_enrolled}}
                        <!--a href="{{viewurl}}" class="btn btn-primary">BUY NOW</a-->
                    {{/is_enrolled}}
                </div>
                <div class="course-info border-bottom-0 pb-0 d-flex align-items-center">
                    <div class="lesson-group d-flex align-items-center">
                        {{#pix}}lessons, theme_boost_magnific{{/pix}}
                        <p>{{countlessons}}</p>
                    </div>

                </div>

                <div class="instructor-group d-flex">
                    {{#instructor}}
                        <div class="instructor-group-img d-flex">
                            <a href="#">
                                <img alt="{{instructorname}}" src="{{instructorurl}}"
                                     class="avatar avatar-50 photo" height="50" width="50">
                            </a>
                            <div class="instructor-name">
                                <h4><a href="#">{{instructorname}}</a></h4>
                                <p>{{instructortitle}}</p>
                            </div>
                        </div>
                    {{/instructor}}
                </div>
            </div>
        </div>
    </div>
</div>
