{{!
    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 Licensebllsdsadfasfd
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template block_recentlyaccesseditems/view-cards

    This template renders the items cards of the Recently accessed items block.

    Example context (json):
    {
        "items": [
            {
                "cmid": 64,
                "courseid": 2,
                "coursename": "Course",
                "courseviewurl": "https://moodlesite/course/view.php?id=2",
                "icon": "<img class=\"icon\" alt=\"Forum\" title=\"Forum\" src=\"http://moodlesite/theme/image.php/boost/forum/1539858121/icon\" />",
                "name": "Assignment due 1",
                "id": 17,
                "modname": "Forum",
                "name": "Forum",
                "timeaccess": 1539848498,
                "userid": 2,
                "viewurl": "http://moodlesite/mod/forum?id=64"
            }
        ]
    }
}}

<div class="card-deck dashboard-card-deck one-row slick-slider" role="list">
    {{#items}}
        <a class="card dashboard-card mb-0 py-2 coursename m-0" href="{{{viewurl}}}">
            <div class="card-body course-info-container py-20 mx-10">
                <div class="d-flex text-truncate align-items-center">
                    <div class="d-flex align-self-center icon-size-5">
                        {{{icon}}}
                    </div>
                    <div class="w-p100 line-height-3 text-truncate ml-2">
                        <h6 class="mb-0 text-truncate h5">{{{name}}}</h6>
                        <small class="text-muted text-truncate m-b-0">{{{coursename}}}</small>
                    </div>
                </div>
            </div>
        </a>
    {{/items}}
</div>
{{#js}}
require(['jquery', 'theme_remui/slick'], function($) {
    $('div[data-region="recentlyaccesseditems-view-content"] .dashboard-card-deck').css("overflow", "unset");
    $('div[data-region="recentlyaccesseditems-view-content"] .dashboard-card-deck').not('.slick-initialized').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
            }
            }
        ]
    });
});
{{/js}}