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

<section class="bg-white dark:bg-gray-900">
    <div id="bus-details">
        <ejs-appbar class="shadow-none px-0">
            <div class="px-6 xl:px-10">
                <ejs-breadcrumb [enableNavigation]="false">
                    <e-breadcrumb-items>
                        <e-breadcrumb-item iconCss="e-icons e-home" text="Home"></e-breadcrumb-item>
                        <e-breadcrumb-item text="Buses"></e-breadcrumb-item>
                    </e-breadcrumb-items>
                    <ng-template #separatorTemplate>
                        <span class="e-icons e-chevron-right"></span>
                    </ng-template>
                </ejs-breadcrumb>
                <div class="e-appbar-spacer"></div>
                <button ejs-button class="e-flat sf-icon-notification-bell-ring-03 text-base" type="button" aria-label="notification" role="button"></button>
                <span class="e-avatar e-avatar-circle e-avatar-small shrink-0 ml-6">
                    <img src="assets/images/common/avatar/avatar-1.jpg" alt="profile picture" />
                </span>
            </div>
        </ejs-appbar>
        <div class="shadow-md border-y border-gray-200 dark:border-gray-600">
            <div class="flex flex-col justify-between gap-4 p-4 sm:px-6 md:flex-row md:items-center xl:px-10">
                <p class="text-xl font-semibold dark:text-gray-50">NYC - Washington DC Buses</p>
                <div class="flex gap-3">
                    <div class="e-input-group w-full md:w-72">
                        <span class="e-input-group-icon e-icons e-search"></span>
                        <input class="e-input !pl-0" type="text" placeholder="Search Buses" aria-label="search buses" role="textbox" />
                    </div>
                    <button ejs-button class="hidden sm:inline-block" iconCss="e-icons e-filter" content="Filter" type="button" aria-label="filter" role="button"></button>
                    <button ejs-button class="sm:hidden e-icons e-filter" type="button" aria-label="filter" role="button"></button>
                </div>
            </div>
        </div>
        <div class="flex flex-col gap-4 py-6 px-4 sm:px-6 xl:px-10">
            <p class="text-xl font-semibold text-gray-900 dark:text-gray-50">{{busDetails.length}} Buses Found</p>
            <ejs-listview class="!border-0" cssClass="e-list-template" [dataSource]="busDetails" aria-label="list of bus with details" role="list">
                <ng-template #template let-data>
                    <div class="e-card flex-col gap-3 p-6 rounded-2xl sm:flex-row">
                        <span class="e-avatar e-avatar-xlarge e-avatar-circle shrink-0">
                            <img src="assets/images/tile-view/travels/{{data.logo}}" alt="company logo" />
                        </span>
                        <div class="e-card-stacked !justify-normal !flex-col gap-2 w-full">
                            <div class="e-card-header gap-1 !flex-col !p-0">
                                <div class="e-card-header-title">
                                    <p class="text-lg font-semibold text-wrap sm:w-11/12 text-gray-900 dark:text-gray-50">{{data.company}}</p>
                                </div>
                                <div class="e-card-sub-title text-nowrap">
                                    <p class="text-sm text-gray-500 dark:text-gray-400">{{data.type}}</p>
                                </div>
                            </div>
                            <div class="e-card-content !p-0 flex items-center flex-wrap gap-4 text-gray-500 dark:text-gray-400">
                                <div class="flex items-center gap-2">
                                    <input ejs-rating cssClass="e-small" value="{{data.rating}}" precision="Exact" readonly="true" aria-label="rate us out of 5" role="slider" />
                                    <span>{{data.reviews}} reviews</span>
                                </div>
                                <span class="e-bigger e-badge e-badge-pill e-badge-success">Free date change</span>
                            </div>
                        </div>
                        <div class="e-card-actions !p-0 !flex flex-col shrink-0 text-gray-500 mt-1 dark:text-gray-400 sm:text-end sm:basis-44 sm:mt-0">
                            <p class="text-xl font-medium mb-1.5"><span class="font-semibold text-gray-900 dark:text-gray-50">{{data.departureTime}}</span> - {{data.arrivalTime}}</p>
                            <div class="flex text-sm mb-2 gap-1.5 sm:justify-end">
                                <p>{{data.duration}} hrs</p>
                                <div class="border-s border-gray-500 dark:border-gray-400"></div>
                                <p>{{data.seats}} seats</p>
                            </div>
                            <p class="text-base mb-4 sm:mb-3">Starting at <span class="text-2xl font-semibold text-gray-900 dark:text-gray-50">{{data.price | currency}}</span></p>
                            <button ejs-button class="e-primary e-block" type="button" aria-label="show seats" role="button">Show seats</button>
                        </div>
                    </div>
                </ng-template>
            </ejs-listview>
        </div>
    </div>
</section>

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

<section class="bg-body-tertiary">
    <div id="bus-details">
        <ejs-appbar class="px-0">
            <div class="px-3 px-sm-4 px-xl-5">
                <ejs-breadcrumb [enableNavigation]="false">
                    <e-breadcrumb-items>
                        <e-breadcrumb-item iconCss="e-icons e-home" text="Home"></e-breadcrumb-item>
                        <e-breadcrumb-item text="Buses"></e-breadcrumb-item>
                    </e-breadcrumb-items>
                    <ng-template #separatorTemplate>
                        <span class="e-icons e-chevron-right"></span>
                    </ng-template>
                </ejs-breadcrumb>
                <div class="e-appbar-spacer"></div>
                <button ejs-button class="e-flat sf-icon-notification-bell-ring-03 fs-6" type="button" aria-label="notification" role="button"></button>
                <span class="e-avatar e-avatar-circle e-avatar-small flex-shrink-0 ms-4">
                    <img src="assets/images/common/avatar/avatar-1.jpg" alt="profile picture" />
                </span>
            </div>
        </ejs-appbar>
        <div class="shadow border-top border-bottom border-light-subtle bg-body">
            <div class="d-flex flex-column justify-content-between gap-3 flex-md-row p-3 px-sm-4 px-xl-5">
                <h5 class="fw-bold mb-0 lh-base text-body">NYC - Washington DC Buses</h5>
                <div class="d-flex gap-2">
                    <div class="e-input-group me-1 flex-grow-1 felx-sm-grow-0">
                        <span class="e-input-group-icon e-icons e-search border-0"></span>
                        <input class="e-input ps-0" type="text" placeholder="Search Buses" aria-label="search buses" role="textbox" />
                    </div>
                    <button ejs-button class="e-outline d-none d-sm-inline-block" iconCss="e-icons e-filter" content="Filter" type="button" aria-label="filter" role="button"></button>
                    <button ejs-button class="e-outline d-sm-none e-icons e-filter" type="button" aria-label="filter" role="button"></button>
                </div>
            </div>
        </div>
        <div class="d-flex flex-column gap-3 py-4 px-3 px-sm-4 px-xl-5">
            <h5 class="fw-bold mb-0 text-body">{{busDetails.length}} Buses Found</h5>
            <ejs-listview class="border-0" cssClass="e-list-template" [dataSource]="busDetails" aria-label="list of bus with details" role="list">
                <ng-template #template let-data>
                    <div class="e-card d-flex flex-column gap-3 p-4 rounded-4 flex-sm-row">
                        <span class="e-avatar e-avatar-xlarge e-avatar-circle flex-shrink-0">
                            <img src="assets/images/tile-view/travels/{{data.logo}}" alt="company logo" />
                        </span>
                        <div class="e-card-stacked flex-column flex-grow-1 justify-content-start">
                            <div class="e-card-header p-0 flex-column">
                                <div class="e-card-header-title">
                                    <h6 class="mb-1 fw-bold text-body">{{data.company}}</h6>
                                </div>
                                <div class="e-card-sub-title text-body-secondary">
                                    <p class="mb-2">{{data.type}}</p>
                                </div>
                            </div>
                            <div class="e-card-content p-0 d-flex align-items-center flex-wrap gap-3">
                                <div class="d-flex align-items-center gap-2">
                                    <input ejs-rating cssClass="e-small" value="{{data.rating}}" precision="Exact" readonly="true" aria-label="rate us out of 5" role="slider" />
                                    <span class="text-body-secondary">{{data.reviews}} reviews</span>
                                </div>
                                <span class="e-bigger e-badge e-badge-pill e-badge-success">Free date change</span>
                            </div>
                        </div>
                        <div class="e-card-actions p-0 d-flex flex-column lh-base text-sm-end flex-sm-shrink-0 col-md-3 col-lg-2">
                            <p class="mb-1 fs-5 fw-medium text-body-secondary"><span class="text-body">{{data.departureTime}}</span> - {{data.arrivalTime}}</p>
                            <div class="d-flex mb-2 gap-2 small text-body-secondary justify-content-sm-end">
                                <p class="mb-0">{{data.duration}} hrs</p>
                                <div class="border-start border-light-subtle"></div>
                                <p class="mb-0">{{data.seats}} seats</p>
                            </div>
                            <p class="mb-2 pb-1 fs-6 fw-medium text-body-secondary">Starting at <span class="fs-5 fw-bold lh-sm text-body">{{data.seats | currency}}</span></p>
                            <button ejs-button class="e-primary e-block" type="button" aria-label="show seats" role="button">Show seats</button>
                        </div>
                    </div>
                </ng-template>
            </ejs-listview>
        </div>
    </div>
</section>

}