{{!
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 local_edwiserpagebuilder/manage-entries-display-selector

This template renders display dropdown.

Example context (json):
{
"cards": true,
"list": false,
"summary": false
}
}}
<form class="form-inline pagination-wrapper justify-content-between">
    <div class=" d-flex flex-gap-1 show-data-count-filter">
        <label class="m-0 d-flex align-self-center">{{#str}} showing, local_edwiserpagebuilder {{/str}}</label>
        <div class="dropup per-page-filter mb-1 d-inline-block" data-region="per-page-filter">
            <button id="perpage" type="button" class="btn  dropdown-toggle" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                <span class="d-sm-inline-block" data-active-item-text>
                    {{perpage}}
                </span>
            </button>
            <ul class="dropdown-menu" data-show-active-item aria-labelledby="manageentriesperpage">
                <li>
                    <a class="dropdown-item {{#entries5}} active {{/entries5}}" href="javascript:void(0)"
                        data-display-option="entries" data-value="5" data-pref="entries" aria-label="5"
                        aria-controls="entries-view-{{uniqid}}">
                        5
                    </a>
                    <a class="dropdown-item {{#entries10}} active {{/entries10}}" href="javascript:void(0)"
                        data-display-option="entries" data-value="10" data-pref="entries" aria-label="10"
                        aria-controls="entries-view-{{uniqid}}">
                        10
                    </a>
                    <a class="dropdown-item {{#entries20}} active {{/entries20}}" href="javascript:void(0)"
                        data-display-option="entries" data-value="20" data-pref="entries" aria-label="20"
                        aria-controls="entries-view-{{uniqid}}">
                        20
                    </a>
                    <a class="dropdown-item {{#entries25}} active {{/entries25}}" href="javascript:void(0)"
                        data-display-option="entries" data-value="25" data-pref="entries" aria-label="25"
                        aria-controls="entries-view-{{uniqid}}">
                        25
                    </a>
                    <a class="dropdown-item {{#entries50}} active {{/entries50}}" href="javascript:void(0)"
                        data-display-option="entries" data-value="50" data-pref="entries" aria-label="50"
                        aria-controls="entries-view-{{uniqid}}">
                        50
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="d-flex flex-gap-1">
        <label class="m-0 d-flex align-self-center" data-region-pages></label>
        <div class="d-flex flex-row flex-gap-2">
            <button type="button" class="btn p-0" data-action-paginate data-previous>
                <span > <img class="epb-img-icon" src="{{leftarrow}}"  width="24" height="24"> </span>
            </button>
            <button type="button" class="btn p-0" data-action-paginate data-next>
                <span><img  class="epb-img-icon" src="{{rightarrow}}"  width="24" height="24"></span>
            </button>
        </div>
    </div>
</form>