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

<section class="bg-white dark:bg-gray-900">
    <div class="px-6">
        <ejs-pager class="border-0 bg-transparent" [template]="pagerTemplate"></ejs-pager>
        <ng-template #pagerTemplate>
            <div class="!flex gap-5 xl:gap-3">
                <button ejs-button class="sm:hidden" iconCss="e-icons e-chevron-left" type="button" aria-label="go to previous page" role="button"></button>
                <button ejs-button class="hidden sm:inline-block" iconCss="e-icons e-chevron-left" content="PREVIOUS" type="button" aria-label="go to previous page" role="button"></button>
                <span class="e-btn-group">
                    <button ejs-button type="button" aria-label="go to page 1" role="button">1</button>
                    <button ejs-button class="e-secondary e-active" type="button" aria-label="go to page 2" role="button">2</button>
                    <button ejs-button class="hidden sm:inline-block" type="button" aria-label="go to page 3" role="button">3</button>
                    <button ejs-button type="button" aria-label="more pages" role="button">...</button>
                    <button ejs-button class="hidden sm:inline-block" type="button" aria-label="go to page 79" role="button">79</button>
                    <button ejs-button type="button" aria-label="go to page 80" role="button">80</button>
                </span>
                <button ejs-button class="hidden sm:inline-block" iconCss="e-icons e-chevron-right" iconPosition="Right" content="NEXT" type="button" aria-label="go to next page" role="button"></button>
                <button ejs-button class="sm:hidden" iconCss="e-icons e-chevron-right" iconPosition="Right" type="button" aria-label="go to next page" role="button"></button>
            </div>
        </ng-template>
    </div>
</section>

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

<section class="bg-body">
    <div class="px-4">
        <ejs-pager class="border-0 px-0" [template]="pagerTemplate"></ejs-pager>
        <ng-template #pagerTemplate>
            <div class="d-flex gap-2">
                <button ejs-button class="e-outline d-sm-none" iconCss="e-icons e-chevron-left" type="button" aria-label="go to previous page" role="button"></button>
                <button ejs-button class="e-outline d-none d-sm-inline-block" iconCss="e-icons e-chevron-left" content="PREVIOUS" type="button" aria-label="go to previous page" role="button"></button>
                <span class="e-btn-group shadow-none mx-1">
                    <button ejs-button class="e-flat" type="button" aria-label="go to page 1" role="button">1</button>
                    <button ejs-button class="e-secondary" type="button" aria-label="go to page 2" role="button">2</button>
                    <button ejs-button class="e-flat d-none d-sm-inline-block" type="button" aria-label="go to page 3" role="button">3</button>
                    <button ejs-button class="e-flat" type="button" aria-label="more pages" role="button">...</button>
                    <button ejs-button class="e-flat d-none d-sm-inline-block" type="button" aria-label="go to page 79" role="button">79</button>
                    <button ejs-button class="e-flat" type="button" aria-label="go to page 80" role="button">80</button>
                </span>
                <button ejs-button class="e-outline d-none d-sm-inline-block" iconCss="e-icons e-chevron-right" iconPosition="Right" content="NEXT" type="button" aria-label="go to next page" role="button"></button>
                <button ejs-button class="e-outline d-sm-none" iconCss="e-icons e-chevron-right" iconPosition="Right" type="button" aria-label="go to next page" role="button"></button>
            </div>
        </ng-template>
    </div>
</section>

}