{{!
    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-course

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

    Example context (json):
    {
      "viewurl": "/course/view.php?id=15",
      "courseimage": "https://example.com/images/course-image.jpg",
      "fullname": "Data Science Essentials",
      "is_enrolled": false,
      "freename": "Free",
      "priceval": "$199.99",
      "has_course_create": true,
      "countlessons": 30,
      "showinstructor": true,
      "instructor": {
        "instructorname": "John Smith",
        "instructortitle": "Senior Data Scientist",
        "instructorurl": "https://example.com/images/instructor-avatar.jpg"
      },
      "access_course": "Access Course",
      "matricular": "Enroll Now"
    }

}}

<div class="course-box col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="frontpage-course-box">
        <div class="course-item">
            <div class="course-item-img">
                <a href="{{viewurl}}" style="background-image: url('{{courseimage}}')">&nbsp;</a>
                {{^is_enrolled}}
                    {{#freename}}
                        <div class="price">
                            <h3 class="free-color">{{{freename}}}</h3>
                        </div>
                    {{/freename}}
                    {{#priceval}}
                        <div class="price">
                            <h3 class="price-color">{{{priceval}}}</h3>
                        </div>
                    {{/priceval}}
                {{/is_enrolled}}
                {{#has_course_create}}
                    <a class="edit-icon" href="{{viewurl}}" target="_blank"
                       title="Edit Course">
                        {{#pix}}edit, theme_boost_magnific{{/pix}}
                    </a>
                {{/has_course_create}}
            </div>
            <div class="course-content">

                <h3 class="title instructor-text">
                    <a href="{{viewurl}}">{{{fullname}}}</a>
                </h3>
                <div class="course-info d-flex align-items-center">
                    <div class="lesson-group d-flex align-items-center" style="width: 100%;">
                        {{#pix}}lessons, theme_boost_magnific{{/pix}}
                        <p>{{{countlessons}}}</p>
                    </div>
                </div>
                {{#showinstructor}}
                    <div class="instructor-group d-flex">
                        {{#instructor}}
                            <div class="instructor-group-img d-flex">
                                <a href="#">
                                    <img alt="{{{instructorname}}}" src="{{{instructorurl}}}" height="50" width="50">
                                </a>
                                <div class="instructor-name">
                                    <h4><a href="#">{{{instructorname}}}</a></h4>
                                    <p>{{{instructortitle}}}</p>
                                </div>
                            </div>
                        {{/instructor}}
                    </div>
                {{/showinstructor}}

                {{#is_enrolled}}
                    {{#access_course}}
                        <div class="course-info d-flex align-items-center">
                            <div class="all-btn all-category d-flex align-items-center">
                                <a href="{{viewurl}}" style="white-space: nowrap;"
                                   class="btn btn-primary matricula-se">{{{access_course}}}</a>
                            </div>
                        </div>
                    {{/access_course}}
                {{/is_enrolled}}
                {{^is_enrolled}}
                    {{#matricular}}
                        <div class="course-info d-flex align-items-center">
                            <div class="all-btn all-category d-flex align-items-center">
                                <a href="{{viewurl}}" style="white-space: nowrap;"
                                   class="btn btn-primary matricula-se">{{{matricular}}}</a>
                            </div>
                        </div>
                    {{/matricular}}
                {{/is_enrolled}}

            </div>
        </div>
    </div>
</div>
