{{!
    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/main

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

    Example context (json):
    {}
}}

<div id="block-myoverview-{{uniqid}}" class="block-myoverview block-cards" data-region="myoverview" role="navigation">
    <hr class="mt-0"/>

    <div role="search" data-region="filter" class="d-flex align-items-center my-2"
         aria-label="{{#str}} aria:controls, block_myoverview {{/str}}">
        <div class="row no-gutters">
            {{> block_myoverview/nav-grouping-selector}}

            {{> block_myoverview/nav-search-widget}}

            {{> block_myoverview/nav-sort-selector}}

            {{#displaydropdown}}
                {{> block_myoverview/nav-display-selector}}
            {{/displaydropdown}}
        </div>
    </div>

    <div class="container-fluid p-0">
        {{> block_myoverview/courses-view}}
    </div>
</div>
{{#js}}
    require(['jquery', 'block_myoverview/main', 'core/ajax', 'core/notification'], function($, Main, ajax, notification) {
        var $root = $('#block-myoverview-{{uniqid}}');
        Main.init($root);

        ajax.call([{
            methodname : 'theme_boost_magnific_mycourses_html',
            args       : {}
        }])[0].then(function(data) {

            $root.before(data.html);

            $("#block-region-content").before("<div id='block-my-links-destination'></div>");
            $(".page-mycourses #block-my-links")
                    .show()
                    .appendTo("#block-my-links-destination");

        }).then(function(msg) {
            console.error(msg);
        }).catch(notification.exception);

    });

{{/js}}
