{{!
    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 block_myoverview/view-cards

    This template renders the cards view for the myoverview block.

    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,
                "coursecategory": "Miscellaneous"
            }
        ]
    }
}}

<div id="course-cards-{{uniqid}}" class="card-deck dashboard-card-deck {{$classes}}{{/classes}} slick-slider" data-region="card-deck" role="list">
{{#courses}}
    {{> core_course/coursecard }}
{{/courses}}
</div>
{{#js}}
require(['jquery', 'theme_remui/slick'], function($) {
    var colors = ['#f2a654', '#fe6768', '#57c7d4', '#56c19a', '#526069', '#46657d'];
    $('.wdm-course-card-body').each(function(index, element) {
        index >= colors.length ? index = index % colors.length : index = index;
        $(element).css('background-color', colors[index]);
    });
    $('.dashboard-card-deck').css("overflow", "unset");
    $("#course-cards-{{uniqid}}").slick({
        dots: false,
        arrows: true,
        infinite: false,
        rtl: ($("html").attr("dir") == "rtl") ? true : false,
        opacity: 0,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 4,
        responsive: [{
            breakpoint: 1024,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3
            }
            }, {
            breakpoint: 800,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
            }, {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
            }
        ]
    });
    $(window).trigger('resize');
});
{{/js}}
