@if (currentTheme === 'tailwind') {

<section class="bg-white dark:bg-gray-900">
    <div class="px-6">
        <ejs-pager class="border-t-0 border-x-0 px-0 py-2 bg-transparent" [template]="pagerTemplate"></ejs-pager>
        <ng-template #pagerTemplate>
            <div class="!flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                <button ejs-button cssClass="e-flat" iconCss="e-icons e-chevron-left" type="button" aria-label="go to previous page" role="button"></button>
                <span class="px-4">Page</span>
                <ejs-textbox class="e-outline" value="2" width="68" aria-label="enter the page number" role="textbox"></ejs-textbox>
                <span class="px-2">of 218</span>
                <button ejs-button cssClass="e-flat" iconCss="e-icons e-chevron-right" type="button" aria-label="go to next page" role="button"></button>
                <div class="sm:!flex !hidden items-center ml-auto space-x-4">
                    <span>Items per page</span>
                    <button ejs-dropdownbutton class="e-outline leading-6" [content]="2" type="button" (beforeOpen)="$event.cancel = true;" aria-label="choose the page number" role="dropdown button"></button>
                </div>
            </div>
        </ng-template>
    </div>
</section>

} @else if (currentTheme === 'bootstrap5.3') {

<section class="bg-body">
    <div class="px-4">
        <ejs-pager class="border-top-0 border-start-0 border-end-0 py-2 px-0" [template]="pagerTemplate"></ejs-pager>
        <ng-template #pagerTemplate>
            <div class="d-flex align-items-center gap-2 fs-6 text-body">
                <button ejs-button cssClass="e-flat" iconCss="e-icons e-chevron-left" type="button" aria-label="go to previous page" role="button"></button>
                <span class="ms-1">Page</span>
                <ejs-textbox value="2" width="68" aria-label="enter the page number" role="textbox"></ejs-textbox>
                <span class="me-1">of 218</span>
                <button ejs-button cssClass="e-flat" iconCss="e-icons e-chevron-right" type="button" aria-label="go to next page" role="button"></button>
                <div class="d-none d-sm-flex align-items-center ms-auto gap-2">
                    <span>Items per page</span>
                    <button ejs-dropdownbutton class="e-outline" content="2" type="button" (beforeOpen)="$event.cancel = true;" aria-label="choose the page number" role="dropdown button"></button>
                </div>
            </div>
        </ng-template>
    </div>
</section>

}