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

<section class="bg-white dark:bg-gray-900">
    <div class="flex items-center justify-center min-h-screen">
        <div class="lg:max-w-md w-full m-auto p-4 lg:p-8 md:p-6">
            <div class="e-input-group">
                <span class="e-input-group-icon e-icons e-search !text-base"></span>
                <input class="e-input !pl-0 e-bigger" type="text" placeholder="Search country" aria-label="search country" role="textbox" />
            </div>
            <ejs-listview class="!border-0 mt-2" cssClass="e-list-template" [dataSource]="data" aria-label="choose the country code" role="list">
                <ng-template #template let-data>
                    <div class="e-list-wrapper flex items-center !px-1 sm:!px-3 border-b border-gray-200 dark:border-gray-600">
                        <img class="rounded-full" src="assets/images/listview/country-code/{{data.pic}}" width="36px" alt="flag image" />
                        <div class="pl-4 w-full">
                            <span class="flex items-center justify-between">
                                <span class="e-list-item-header text-sm font-medium text-gray-900 dark:text-white">{{data.country}}</span>
                                <span class="text-sm font-medium text-gray-900 dark:text-white flex-grow text-right">{{data.number}}</span>
                            </span>
                            <span class="e-badge e-badge-pill mt-0.5 inline-flex items-center border border-gray-200 dark:border-gray-600">{{data.badge}}</span>
                        </div>
                    </div>
                </ng-template>
            </ejs-listview>
        </div>
    </div>
</section>

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

<section class="bg-body">
    <div class="d-flex align-items-center justify-content-center min-vh-100">
        <div class="container-lg w-100 m-auto p-3 p-md-4" [style]="width">
            <div class="e-input-group">
                <span class="e-input-group-icon e-icons e-search border-0 fs-6"></span>
                <input class="e-input e-bigger" type="text" placeholder="Search country" aria-label="search country" role="textbox" />
            </div>
            <ejs-listview class="border-0 mt-2" cssClass="e-list-template" [dataSource]="data" aria-label="choose the country code" role="list">
                <ng-template #template let-data>
                    <div class="e-list-wrapper d-flex align-items-center px-1 px-sm-3">
                        <img class="rounded-circle" src="assets/images/listview/country-code/{{data.pic}}" width="36px" alt="flag image" />
                        <div class="ps-3 w-100">
                            <span class="d-flex align-items-center justify-content-between">
                                <span class="e-list-item-header fw-medium">{{data.country}}</span>
                                <span class="fw-medium text-end">{{data.number}}</span>
                            </span>
                            <span class="e-badge e-badge-pill mt-1 d-inline-flex align-items-center border border-light-subtle px-2">{{data.badge}}</span>
                        </div>
                    </div>
                </ng-template>
            </ejs-listview>
        </div>
    </div>
</section>

}