{{!
    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 core/paged_content_paging_bar

    This template renders the bootstrap style paging bar to control a paged
    content section.

    Example context (json):
    {
        "itemsperpage": 2,
        "previous": true,
        "next": true,
        "first": true,
        "last": true,
        "activepagenumber": 1,
        "pages": [
            {
                "url": "#",
                "page": "1",
                "active": true
            },
            {
                "url": "#",
                "page": "2"
            }
        ]
    }
}}
<div data-region="paging-control-container">
    {{#showitemsperpageselector}}
        <div
            id="paging-control-limit-container-{{uniqid}}"
            data-region="paging-control-limit-container"
            class="pull-left"
        >
            <span class="mr-1">{{#str}} show {{/str}}</span>
            <div class="btn-group">
                <button
                    type="button"
                    class="btn btn-outline-secondary dropdown-toggle"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                    data-action="limit-toggle"
                    {{#arialabels.itemsperpage}}
                        aria-label="{{.}}"
                    {{/arialabels.itemsperpage}}
                    {{^arialabels.itemsperpage}}
                        aria-label="{{#str}} pagedcontentpagingbaritemsperpage, core, {{#itemsperpage}}{{#active}}{{value}}{{/active}}{{/itemsperpage}}{{/str}}"
                    {{/arialabels.itemsperpage}}
                >
                    {{#itemsperpage}}
                        {{#active}}
                            <span data-active-item-text>{{value}}</span>
                        {{/active}}
                    {{/itemsperpage}}
                    <span data-region="caret" class="caret"></span>
                </button>
                <ul
                    role="menu"
                    class="dropdown-menu"
                    data-show-active-item
                    {{#arialabels.itemsperpagecomponents}}
                        data-active-item-button-aria-label-components="{{.}}"
                    {{/arialabels.itemsperpagecomponents}}
                    {{^arialabels.itemsperpagecomponents}}
                        data-active-item-button-aria-label-components="pagedcontentpagingbaritemsperpage, core"
                    {{/arialabels.itemsperpagecomponents}}
                >
                    {{#itemsperpage}}
                        <li class="dropdown-item {{#active}}active{{/active}}" data-limit={{value}}>
                            <a href="#">
                                {{#value}}{{.}}{{/value}}
                                {{^value}}{{#str}} all, core {{/str}}{{/value}}
                            </a>
                        </li>
                    {{/itemsperpage}}
                </ul>
            </div>
        </div>
    {{/showitemsperpageselector}}

    <div
        aria-label="{{label}}"
        id="{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}"
        class="m-0 pagination {{#showitemsperpageselector}}pagination-right{{/showitemsperpageselector}}"
        data-region="paging-bar"
        data-ignore-control-while-loading="{{ignorecontrolwhileloading}}"
        data-hide-control-on-single-page="{{hidecontrolonsinglepage}}"
        {{#activepagenumber}}
            data-active-page-number="{{.}}"
        {{/activepagenumber}}
        {{^activepagenumber}}
            data-active-page-number="1"
        {{/activepagenumber}}
        {{#showitemsperpageselector}}
            {{#itemsperpage}}
                {{#active}}
                    data-items-per-page="{{value}}"
                {{/active}}
            {{/itemsperpage}}
        {{/showitemsperpageselector}}
        {{^showitemsperpageselector}}
            data-items-per-page="{{itemsperpage}}"
        {{/showitemsperpageselector}}
        {{#arialabels.paginationnav}}
            aria-label="{{.}}"
        {{/arialabels.paginationnav}}
        {{^arialabels.paginationnav}}
            aria-label="{{#str}} pagedcontentnavigation, core {{/str}}"
        {{/arialabels.paginationnav}}
        {{#arialabels.paginationnavitemcomponents}}
            data-aria-label-components-pagination-item="{{.}}"
        {{/arialabels.paginationnavitemcomponents}}
        {{^arialabels.paginationnavitemcomponents}}
            data-aria-label-components-pagination-item="pagedcontentnavigationitem, core"
        {{/arialabels.paginationnavitemcomponents}}
        {{#arialabels.paginationactivenavitemcomponents}}
            data-aria-label-components-pagination-active-item="{{.}}"
        {{/arialabels.paginationactivenavitemcomponents}}
        {{^arialabels.paginationactivenavitemcomponents}}
            data-aria-label-components-pagination-active-item="pagedcontentnavigationactiveitem, core"
        {{/arialabels.paginationactivenavitemcomponents}}
    >

        <div class="d-inline-block">
            <ul class="mb-0 d-flex">
                {{#previous}}
                    {{< core/paged_content_paging_bar_item }}
                        {{$item-content}}
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">{{#str}}previous{{/str}}</span>
                        {{/item-content}}
                        {{$attributes}}data-control="previous"{{/attributes}}
                    {{/ core/paged_content_paging_bar_item }}
                {{/previous}}
                {{#first}}
                    {{< core/paged_content_paging_bar_item }}
                        {{$item-content}}
                            <span aria-hidden="true">{{#str}}first{{/str}}</span>
                            <span class="sr-only">{{#str}}first{{/str}}</span>
                        {{/item-content}}
                        {{$attributes}}data-control="first"{{/attributes}}
                    {{/ core/paged_content_paging_bar_item }}
                {{/first}}
                {{#pages}}
                    {{< core/paged_content_paging_bar_item }}
                        {{$attributes}}data-page="true"{{/attributes}}
                    {{/ core/paged_content_paging_bar_item }}
                {{/pages}}
                {{#last}}
                    {{< core/paged_content_paging_bar_item }}
                        {{$item-content}}
                            <span aria-hidden="true">{{#str}}last{{/str}}</span>
                            <span class="sr-only">{{#str}}last{{/str}}</span>
                        {{/item-content}}
                        {{$attributes}}data-control="last"{{/attributes}}
                    {{/ core/paged_content_paging_bar_item }}
                {{/last}}
                {{#next}}
                    {{< core/paged_content_paging_bar_item }}
                        {{$item-content}}
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">{{#str}}next{{/str}}</span>
                        {{/item-content}}
                        {{$attributes}}data-control="next"{{/attributes}}
                    {{/ core/paged_content_paging_bar_item }}
                {{/next}}
            </ul>
        </div>
    </div>
</div>