@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 sm:gap-4 text-lg font-medium text-gray-700 dark:text-gray-300">
                <button ejs-button class="e-flat lg:hidden" iconCss="e-icons e-chevron-left" type="button" aria-label="go to previous page" role="button" disabled></button>
                <button ejs-button class="e-flat hidden lg:inline-block" iconCss="e-icons e-chevron-left" content="Previous" type="button" aria-label="go to previous page" role="button" disabled></button>
                <span>
                    <button ejs-button class="e-primary" type="button" aria-label="go to page 1" role="button">1</button>
                    <button ejs-button class="e-flat" type="button" aria-label="go to page 2" role="button">2</button>
                    <button ejs-button class="e-flat" type="button" aria-label="go to page 3" role="button">3</button>
                    <button ejs-button class="e-flat hidden xl:inline-block" type="button" aria-label="go to page 4" role="button">4</button>
                    <button ejs-button class="e-flat hidden xl:inline-block" type="button" aria-label="go to page 5" role="button">5</button>
                    <button ejs-button class="e-flat hidden xl:inline-block" type="button" aria-label="go to page 6" role="button">6</button>
                    <button ejs-button class="e-flat hidden xl:inline-block" type="button" aria-label="go to page 7" role="button">7</button>
                    <button ejs-button class="e-flat hidden xl:inline-block" type="button" aria-label="go to page 8" role="button">8</button>
                    <button ejs-button class="e-flat" type="button" aria-label="more pages" role="button">...</button>
                </span>
                <button ejs-button class="e-flat hidden lg: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-flat lg:hidden" iconCss="e-icons e-chevron-right" iconPosition="Right" type="button" aria-label="go to next page" role="button"></button>
                <button ejs-dropdownbutton class="e-outline" content="20" type="button" (beforeOpen)="$event.cancel = true;" aria-label="choose the page number" role="dropdown button"></button>
                <span class="md:flex justify-content grow hidden px-2 text-sm">
                    <p class="grow">Items per page</p>
                    <p>1 of 70 pages <span class="hidden lg:inline">(830 items)</span></p>
                </span>
            </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 px-0 py-2" [template]="pagerTemplate"></ejs-pager>
        <ng-template #pagerTemplate>
            <div class="d-flex align-items-center gap-2 fs-6 text-body">
                <button ejs-button class="e-flat d-lg-none" iconCss="e-icons e-chevron-left" type="button" aria-label="go to previous page" role="button" disabled></button>
                <button ejs-button class="e-flat d-none d-lg-inline-block" iconCss="e-icons e-chevron-left" content="Previous" type="button" aria-label="go to previous page" role="button" disabled></button>
                <span class="mx-1">
                    <button ejs-button class="rounded e-primary" type="button" aria-label="go to page 1" role="button">1</button>
                    <button ejs-button class="e-flat rounded" type="button" aria-label="go to page 2" role="button">2</button>
                    <button ejs-button class="e-flat rounded" type="button" aria-label="go to page 3" role="button">3</button>
                    <button ejs-button class="e-flat rounded d-none d-xl-inline-block" type="button" aria-label="go to page 4" role="button">4</button>
                    <button ejs-button class="e-flat rounded d-none d-xl-inline-block" type="button" aria-label="go to page 5" role="button">5</button>
                    <button ejs-button class="e-flat rounded d-none d-xl-inline-block" type="button" aria-label="go to page 6" role="button">6</button>
                    <button ejs-button class="e-flat rounded d-none d-xl-inline-block" type="button" aria-label="go to page 7" role="button">7</button>
                    <button ejs-button class="e-flat rounded d-none d-xl-inline-block" type="button" aria-label="go to page 8" role="button">8</button>
                    <button ejs-button class="e-flat rounded" type="button" aria-label="more pages" role="button">...</button>
                </span>
                <button ejs-button class="e-flat d-none d-lg-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-flat d-lg-none" iconCss="e-icons e-chevron-right" iconPosition="Right" type="button" aria-label="go to next page" role="button"></button>
                <button ejs-dropdownbutton class="e-outline ms-2" content="20" type="button" (beforeOpen)="$event.cancel = true;" aria-label="choose the page number" role="dropdown button"></button>
                <span class="d-none d-md-flex justify-content-between flex-grow-1 ms-1">
                    <p class="mb-0">Items per page</p>
                    <p class="mb-0">1 of 70 pages <span class="d-none d-lg-inline">(830 items)</span></p>
                </span>
            </div>
        </ng-template>
    </div>
</section>

}