{{!
    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):
    {
        "showitemsperpageselector": true,
        "itemsperpage": [
            { "value": 5, "active": false },
            { "value": 10, "active": true },
            { "value": 15, "active": false }
        ],
        "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"
    class="d-flex"
>
    {{#showitemsperpageselector}}
        <div
            id="paging-control-limit-container-{{uniqid}}"
            data-region="paging-control-limit-container"
            class="d-inline-flex align-items-center"
            title="{{#str}} show {{/str}}"
        >
           
                <button
                    type="button"
                    class="btn btn-sm 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}}{{.}}{{/value}}{{^value}}{{#str}} all, core {{/str}}{{/value}}{{/active}}{{/itemsperpage}}{{/str}}"
                    {{/arialabels.itemsperpage}}
                >
                    <svg class="mr-2" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 12C19.25 13 17.5 18.25 12 18.25C6.5 18.25 4.75 13 4.75 12C4.75 11 6.5 5.75 12 5.75C17.5 5.75 19.25 11 19.25 12Z"></path>
                        <circle cx="12" cy="12" r="2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
                    </svg>
                    {{#itemsperpage}}
                        {{#active}}
                            {{#value}}{{.}}{{/value}}
                            {{^value}}{{#str}} all, core {{/str}}{{/value}}
                        {{/active}}
                    {{/itemsperpage}}
                </button>
                <div
                    role="menu"
                    class="dropdown-menu"
                    data-show-active-item
                    data-skip-active-class="true"
                    {{#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}}
                        <a
                            class="dropdown-item {{#active}}active{{/active}}"
                            href="#"
                            data-limit="{{value}}"
                            role="menuitem"
                            {{#active}}aria-current="true"{{/active}}
                        >
                            {{#value}}{{.}}{{/value}}
                            {{^value}}{{#str}} all, core {{/str}}{{/value}}
                        </a>
                    {{/itemsperpage}}
                </div>
     
        </div>
    {{/showitemsperpageselector}}

    <nav
        id="{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}"
        class="{{#showitemsperpageselector}}ml-auto{{/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}}
        {{#itemsperpage}}
            {{#active}}
                data-items-per-page="{{value}}"
            {{/active}}
        {{/itemsperpage}}
        {{#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}}
        {{#barsize}}
            data-bar-size="{{.}}"
        {{/barsize}}
    >

        <ul class="pagination">
            {{#previous}}
                {{< core/paged_content_paging_bar_item }}
                    {{$linkattributes}}aria-label="{{#str}}previouspage{{/str}}"{{/linkattributes}}
                    {{$item-content}}
                        <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>
                        <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
                    {{/item-content}}
                    {{$attributes}}data-control="previous"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/previous}}
            {{#first}}
                {{< core/paged_content_paging_bar_item }}
                    {{$linkattributes}}aria-label="{{#str}}firstpage{{/str}}"{{/linkattributes}}
                    {{$item-content}}
                        {{#str}}first{{/str}}
                    {{/item-content}}
                    {{$attributes}}data-control="first"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/first}}
            {{#barsize}}
                {{< core/paged_content_paging_bar_item }}
                    {{$linkattributes}}aria-hidden="true"{{/linkattributes}}
                    {{$item-content}}
                        &hellip;
                    {{/item-content}}
                    {{$attributes}}data-dots="beginning"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/barsize}}
            {{#pages}}
                {{< core/paged_content_paging_bar_item }}
                    {{$attributes}}data-page="true"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/pages}}
            {{#barsize}}
                {{< core/paged_content_paging_bar_item }}
                    {{$linkattributes}}aria-hidden="true"{{/linkattributes}}
                    {{$item-content}}
                        &hellip;
                    {{/item-content}}
                    {{$attributes}}data-dots="ending"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/barsize}}
            {{#last}}
                {{< core/paged_content_paging_bar_item }}
                    {{$linkattributes}}aria-label="{{#str}}lastpage{{/str}}"{{/linkattributes}}
                    {{$item-content}}
                        {{#str}}last{{/str}}
                    {{/item-content}}
                    {{$attributes}}data-control="last"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/last}}
            {{#next}}
                {{< core/paged_content_paging_bar_item }}
                    {{$linkattributes}}aria-label="{{#str}}nextpage{{/str}}"{{/linkattributes}}
                    {{$item-content}}
                        <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
                        <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>
                    {{/item-content}}
                    {{$attributes}}data-control="next"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/next}}
        </ul>
    </nav>
</div>
