{{!
    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/paging-bar

    This template renders the bootstrap style paging bar.

    Example context (json):
    {
        "pagingbar": {
            "pagecount": 2,
            "previous": {},
            "next": {},
            "first": {
                "url": "#",
                "page": "first"
            },
            "last": {
                "url": "#",
                "page": "last"
            },
            "pages": [
                {
                    "url": "#",
                    "number": 1,
                    "page": "1",
                    "active": true
                },
                {
                    "url": "#",
                    "number": 2,
                    "page": "2"
                }
            ]
        }
    }
}}
{{#pagingbar}}
<div aria-label="{{label}}"
     id="{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}"
     class="pagination"
     data-region="paging-bar"
     data-page-count="{{pagecount}}">

    <ul>
        {{#previous}}
            {{< block_myoverview/paging-bar-item }}
                {{$item-content}}
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">{{#str}}previous{{/str}}</span>
                {{/item-content}}
            {{/ block_myoverview/paging-bar-item }}
        {{/previous}}
        {{#first}}
            {{< block_myoverview/paging-bar-item }}
                {{$pagenumber}}first{{/pagenumber}}
            {{/ block_myoverview/paging-bar-item }}
        {{/first}}
        {{#pages}}
            {{> block_myoverview/paging-bar-item }}
        {{/pages}}
        {{#last}}
            {{< block_myoverview/paging-bar-item }}
                {{$pagenumber}}last{{/pagenumber}}
            {{/ block_myoverview/paging-bar-item }}
        {{/last}}
        {{#next}}
            {{< block_myoverview/paging-bar-item }}
                {{$item-content}}
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">{{#str}}next{{/str}}</span>
                {{/item-content}}
            {{/ block_myoverview/paging-bar-item }}
        {{/next}}
    </ul>
</div>
{{#js}}
require(['jquery', 'block_myoverview/paging_bar'], function($, PagingBar) {
    var root = $('#{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}');
    PagingBar.registerEventListeners(root);
});
{{/js}}
{{/pagingbar}}