1{{!
2    This file is part of Moodle - http://moodle.org/
3
4    Moodle is free software: you can redistribute it and/or modify
5    it under the terms of the GNU General Public License as published by
6    the Free Software Foundation, either version 3 of the License, or
7    (at your option) any later version.
8
9    Moodle is distributed in the hope that it will be useful,
10    but WITHOUT ANY WARRANTY; without even the implied warranty of
11    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12    GNU General Public License for more details.
13
14    You should have received a copy of the GNU General Public License
15    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16}}
17{{!
18    @template core/paged_content_paging_bar
19
20    This template renders the bootstrap style paging bar to control a paged
21    content section.
22
23    Example context (json):
24    {
25        "showitemsperpageselector": true,
26        "itemsperpage": [
27            { "value": 5, "active": false },
28            { "value": 10, "active": true },
29            { "value": 15, "active": false }
30        ],
31        "previous": true,
32        "next": true,
33        "first": true,
34        "last": true,
35        "activepagenumber": 1,
36        "pages": [
37            {
38                "url": "#",
39                "page": "1",
40                "active": true
41            },
42            {
43                "url": "#",
44                "page": "2"
45            }
46        ]
47    }
48}}
49<div
50    data-region="paging-control-container"
51    class="d-flex"
52>
53    {{#showitemsperpageselector}}
54        <div
55            id="paging-control-limit-container-{{uniqid}}"
56            data-region="paging-control-limit-container"
57            class="d-inline-flex align-items-center"
58        >
59            <span class="mr-1">{{#str}} show {{/str}}</span>
60            <div class="btn-group">
61                <button
62                    type="button"
63                    class="btn btn-outline-secondary dropdown-toggle"
64                    data-toggle="dropdown"
65                    aria-haspopup="true"
66                    aria-expanded="false"
67                    data-action="limit-toggle"
68                    {{#arialabels.itemsperpage}}
69                        aria-label="{{.}}"
70                    {{/arialabels.itemsperpage}}
71                    {{^arialabels.itemsperpage}}
72                        aria-label="{{#str}} pagedcontentpagingbaritemsperpage, core, {{#itemsperpage}}{{#active}}{{#value}}{{.}}{{/value}}{{^value}}{{#str}} all, core {{/str}}{{/value}}{{/active}}{{/itemsperpage}}{{/str}}"
73                    {{/arialabels.itemsperpage}}
74                >
75                    {{#itemsperpage}}
76                        {{#active}}
77                            {{#value}}{{.}}{{/value}}
78                            {{^value}}{{#str}} all, core {{/str}}{{/value}}
79                        {{/active}}
80                    {{/itemsperpage}}
81                </button>
82                <div
83                    role="menu"
84                    class="dropdown-menu"
85                    data-show-active-item
86                    data-skip-active-class="true"
87                    {{#arialabels.itemsperpagecomponents}}
88                        data-active-item-button-aria-label-components="{{.}}"
89                    {{/arialabels.itemsperpagecomponents}}
90                    {{^arialabels.itemsperpagecomponents}}
91                        data-active-item-button-aria-label-components="pagedcontentpagingbaritemsperpage, core"
92                    {{/arialabels.itemsperpagecomponents}}
93                >
94                    {{#itemsperpage}}
95                        <a
96                            class="dropdown-item {{#active}}active{{/active}}"
97                            href="#"
98                            data-limit="{{value}}"
99                            role="menuitem"
100                            {{#active}}aria-current="true"{{/active}}
101                        >
102                            {{#value}}{{.}}{{/value}}
103                            {{^value}}{{#str}} all, core {{/str}}{{/value}}
104                        </a>
105                    {{/itemsperpage}}
106                </div>
107            </div>
108        </div>
109    {{/showitemsperpageselector}}
110
111    <nav
112        id="{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}"
113        class="{{#showitemsperpageselector}}ml-auto{{/showitemsperpageselector}}"
114        data-region="paging-bar"
115        data-ignore-control-while-loading="{{ignorecontrolwhileloading}}"
116        data-hide-control-on-single-page="{{hidecontrolonsinglepage}}"
117        {{#activepagenumber}}
118            data-active-page-number="{{.}}"
119        {{/activepagenumber}}
120        {{^activepagenumber}}
121            data-active-page-number="1"
122        {{/activepagenumber}}
123        {{#itemsperpage}}
124            {{#active}}
125                data-items-per-page="{{value}}"
126            {{/active}}
127        {{/itemsperpage}}
128        {{#arialabels.paginationnav}}
129            aria-label="{{.}}"
130        {{/arialabels.paginationnav}}
131        {{^arialabels.paginationnav}}
132            aria-label="{{#str}} pagedcontentnavigation, core {{/str}}"
133        {{/arialabels.paginationnav}}
134        {{#arialabels.paginationnavitemcomponents}}
135            data-aria-label-components-pagination-item="{{.}}"
136        {{/arialabels.paginationnavitemcomponents}}
137        {{^arialabels.paginationnavitemcomponents}}
138            data-aria-label-components-pagination-item="pagedcontentnavigationitem, core"
139        {{/arialabels.paginationnavitemcomponents}}
140        {{#arialabels.paginationactivenavitemcomponents}}
141            data-aria-label-components-pagination-active-item="{{.}}"
142        {{/arialabels.paginationactivenavitemcomponents}}
143        {{^arialabels.paginationactivenavitemcomponents}}
144            data-aria-label-components-pagination-active-item="pagedcontentnavigationactiveitem, core"
145        {{/arialabels.paginationactivenavitemcomponents}}
146        {{#barsize}}
147            data-bar-size="{{.}}"
148        {{/barsize}}
149    >
150
151        <ul class="pagination mb-0">
152            {{#previous}}
153                {{< core/paged_content_paging_bar_item }}
154                    {{$linkattributes}}aria-label="{{#str}}previouspage{{/str}}"{{/linkattributes}}
155                    {{$item-content}}
156                        <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>
157                        <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
158                    {{/item-content}}
159                    {{$attributes}}data-control="previous"{{/attributes}}
160                {{/ core/paged_content_paging_bar_item }}
161            {{/previous}}
162            {{#first}}
163                {{< core/paged_content_paging_bar_item }}
164                    {{$linkattributes}}aria-label="{{#str}}firstpage{{/str}}"{{/linkattributes}}
165                    {{$item-content}}
166                        {{#str}}first{{/str}}
167                    {{/item-content}}
168                    {{$attributes}}data-control="first"{{/attributes}}
169                {{/ core/paged_content_paging_bar_item }}
170            {{/first}}
171            {{#barsize}}
172                {{< core/paged_content_paging_bar_item }}
173                    {{$linkattributes}}aria-hidden="true"{{/linkattributes}}
174                    {{$item-content}}
175                        &hellip;
176                    {{/item-content}}
177                    {{$attributes}}data-dots="beginning"{{/attributes}}
178                {{/ core/paged_content_paging_bar_item }}
179            {{/barsize}}
180            {{#pages}}
181                {{< core/paged_content_paging_bar_item }}
182                    {{$attributes}}data-page="true"{{/attributes}}
183                {{/ core/paged_content_paging_bar_item }}
184            {{/pages}}
185            {{#barsize}}
186                {{< core/paged_content_paging_bar_item }}
187                    {{$linkattributes}}aria-hidden="true"{{/linkattributes}}
188                    {{$item-content}}
189                        &hellip;
190                    {{/item-content}}
191                    {{$attributes}}data-dots="ending"{{/attributes}}
192                {{/ core/paged_content_paging_bar_item }}
193            {{/barsize}}
194            {{#last}}
195                {{< core/paged_content_paging_bar_item }}
196                    {{$linkattributes}}aria-label="{{#str}}lastpage{{/str}}"{{/linkattributes}}
197                    {{$item-content}}
198                        {{#str}}last{{/str}}
199                    {{/item-content}}
200                    {{$attributes}}data-control="last"{{/attributes}}
201                {{/ core/paged_content_paging_bar_item }}
202            {{/last}}
203            {{#next}}
204                {{< core/paged_content_paging_bar_item }}
205                    {{$linkattributes}}aria-label="{{#str}}nextpage{{/str}}"{{/linkattributes}}
206                    {{$item-content}}
207                        <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
208                        <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>
209                    {{/item-content}}
210                    {{$attributes}}data-control="next"{{/attributes}}
211                {{/ core/paged_content_paging_bar_item }}
212            {{/next}}
213        </ul>
214    </nav>
215</div>
216