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

<section class="bg-white dark:bg-gray-900">
    <div id="ticket-details">
        <ejs-appbar class="shadow-none px-0">
            <div class="w-full px-4 md:px-6 xl:px-10">
                <span class="text-xl font-semibold text-gray-900 dark:text-gray-50">All Tickets</span>
                <div class="e-appbar-spacer"></div>
                <button ejs-button class="e-primary !hidden md:!block" iconCss="e-icons e-plus e-medium" type="button" content="Create Ticket" aria-label="create ticket" role="button"></button>
                <button ejs-button class="e-primary e-icons e-plus e-medium !block md:!hidden" type="button" aria-label="create ticket" role="button"></button>
            </div>
        </ejs-appbar>
        <div class="border-t border-gray-200 dark:border-gray-600">
            <div class="xl:px-10 md:px-6 px-4 py-6 w-full">
                <div class="md:flex justify-between space-y-6 md:space-y-0">
                    <div class="e-input-group md:w-72 w-full">
                        <span class="e-input-group-icon e-icons e-search border-0"></span>
                        <input class="e-input !pl-0" type="text" placeholder="Search Ticket ID" aria-label="search ticket id" role="textbox" />
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="flex items-center">
                            <ejs-switch [checked]="true" cssClass="w-9" aria-label="show closed tickets" role="switch"></ejs-switch>
                            <span class="text-base md:text-sm text-gray-900 dark:text-gray-50 ml-2 md:mr-4">Show Closed Tickets</span>
                        </span>
                        <button ejs-button class="!hidden md:!block" iconCss="e-icons e-filter e-medium" type="button" content="Filter" aria-label="filter options" role="button"></button>
                        <button ejs-button class="e-icons e-filter e-medium !block md:!hidden" type="button" aria-label="filter options" role="button"></button>
                    </div>
                </div>
                <hr class="my-4 border-gray-200 dark:border-gray-600" />
                <ejs-listview class="!border-0" cssClass="e-list-template" [dataSource]="ticketDetails" aria-label="list of ticket details" role="list">
                    <ng-template #template let-data>
                        <div class="e-card">
                            <div class="e-card-stacked">
                                <div class="e-card-header items-start md:items-center">
                                    <div class="flex e-card-header-title mr-1">
                                        <span class="pt-0.5"><ejs-checkbox aria-label="select ticket" role="checkbox"></ejs-checkbox></span>
                                        <span class="text-base font-medium text-gray-900 dark:text-gray-50 ml-3">{{data.title}}</span>
                                    </div>
                                    <div class="e-card-sub-title flex items-center space-x-3 ml-auto">
                                        <span class="e-small flex items-center">
                                            <button ejs-button class="e-flat" iconCss="sf-icon-message-text-01 !text-base" type="button" content="{{data.commentCount}}" aria-label="notification count" role="button"></button>
                                        </span>
                                        <span class="e-small">
                                            <button ejs-button class="e-flat e-icons e-more-vertical-1 !text-base" type="button" aria-label="more options" role="button"></button>
                                        </span>
                                    </div>
                                </div>
                                <div class="e-card-content md:flex items-center flex-col md:flex-row ml-7">
                                    <span class="text-sm text-gray-700 dark:text-gray-200">&num;{{data.ticketId}}</span>
                                    <span class="text-sm hidden md:block ml-6 text-gray-700 dark:text-gray-200">{{data.category}}</span>
                                    <div class="md:flex hidden md:block ml-6 text-gray-700 dark:text-gray-200">
                                        <span class="sf-icon-user-circle text-sm"></span>
                                        <span class="ml-2 text-sm">Requester: {{data.requester}}</span>
                                    </div>
                                    <div class="flex mt-4 md:mt-0 ml-0 md:ml-6 text-gray-700 dark:text-gray-200">
                                        <span class="sf-icon-clock-02 text-sm"></span>
                                        <span class="pl-2 text-sm">{{data.createdTime}}</span>
                                    </div>
                                </div>
                                <div class="e-card-separator"></div>
                                <div class="e-card-actions !py-3 !flex">
                                    <span class="e-small block md:hidden ml-3">
                                        <button ejs-button class="e-flat e-icons e-grid-view !text-base" type="button" aria-label="choose the category" role="button"></button>
                                        <button ejs-button class="ml-9 e-flat sf-icon-calendar-check-01 !text-base" type="button" aria-label="choose the date" role="button"></button>
                                    </span>
                                    <span class="hidden md:block flex items-center">
                                        <button ejs-dropdownbutton class="e-flat mr-6" iconCss="e-icons e-grid-view !text-base" type="button" content="{{data.category}}" (beforeOpen)="$event.cancel = true;" aria-label="choose the category" role="button"></button>
                                        <button ejs-dropdownbutton class="e-flat mr-6" type="button" content="{{data.assignee}}" (beforeOpen)="$event.cancel = true;" aria-label="choose the agent" role="button"></button>
                                        <button ejs-dropdownbutton class="e-flat mr-6 !hidden lg:!inline-block" [ngClass]="{'e-success': data.priorityLevel === 'Medium', 'e-danger': data.priorityLevel === 'High', 'e-info': data.priorityLevel === 'Low'}" iconCss="sf-icon-{{data.priorityLevel === 'Medium' ? 'normal' : data.priorityLevel.toLowerCase()}} !text-base" type="button" content="{{data.priorityLevel}}" (beforeOpen)="$event.cancel = true;" aria-label="choose the priority" role="button"></button>
                                        <button ejs-dropdownbutton class="e-flat" iconCss="sf-icon-calendar-check-01 !text-base" type="button" content="{{data.dueDate | date: 'MM/dd/yyyy'}}" (beforeOpen)="$event.cancel = true;" aria-label="choose the date" role="button"></button>
                                    </span>
                                    <button ejs-dropdownbutton class="e-outline w-32 ml-auto" [ngClass]="{'e-info': data.status === 'In-progress', 'e-primary': data.status === 'Open', 'e-success': data.status === 'Closed'}" type="button" content="{{data.status}}" (beforeOpen)="$event.cancel = true;" aria-label="choose the status" role="button"></button>
                                </div>
                            </div>
                        </div>
                    </ng-template>
                </ejs-listview>
            </div>
        </div>
    </div>
</section>

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

<section class="bg-body-tertiary">
    <div id="ticket-details">
        <ejs-appbar class="shadow-none px-0">
            <div class="px-3 px-md-4 px-xl-5">
                <span class="h5 mb-0 fw-bold text-body">All Tickets</span>
                <div class="e-appbar-spacer"></div>
                <button ejs-button class="e-primary d-none d-md-block" iconCss="e-icons e-plus e-medium" type="button" content="Create Ticket" aria-label="create ticket" role="button"></button>
                <button ejs-button class="e-primary e-icons e-plus e-medium d-block d-md-none" type="button" aria-label="create ticket" role="button"></button>
            </div>
        </ejs-appbar>
        <div class="border-top border-light-subtle">
            <div class="p-3 px-md-4 px-xl-5">
                <div class="d-md-flex justify-content-between">
                    <div class="col-12 col-md-4">
                        <div class="e-input-group">
                            <span class="e-input-group-icon e-icons e-search border-0"></span>
                            <input class="e-input" type="text" placeholder="Search Ticket ID" aria-label="search ticket id" role="textbox" />
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mt-3 mt-md-0">
                        <span class="d-flex align-items-center">
                            <ejs-switch [checked]="true" aria-label="show closed tickets" role="switch" style="width: 36px;"></ejs-switch>
                            <span class="text-body ms-2 me-3 small">Show Closed Tickets</span>
                        </span>
                        <button ejs-button class="d-none d-md-block e-outline" iconCss="e-icons e-filter e-medium" type="button" content="Filter" aria-label="filter options" role="button"></button>
                        <button ejs-button class="e-outline e-icons e-filter e-medium d-block d-md-none" type="button" aria-label="filter options" role="button"></button>
                    </div>
                </div>
                <hr class="border-light-subtle opacity-100 my-4" />
                <ejs-listview class="border-0" cssClass="e-list-template" [dataSource]="ticketDetails" aria-label="list of ticket details" role="list">
                    <ng-template #template let-data>
                        <div class="e-card rounded-3">
                            <div class="e-card-stacked">
                                <div class="e-card-header d-flex flex-row pt-3 px-3 align-items-start align-items-sm-center">
                                    <div class="d-flex e-card-header-title me-1">
                                        <span><ejs-checkbox aria-label="select ticket" role="checkbox"></ejs-checkbox></span>
                                        <span class="fs-6 fw-medium text-body ms-2 ps-1 e-card-header-title">{{data.title}}</span>
                                    </div>
                                    <div class="e-card-sub-title d-flex align-items-center gap-3 ms-auto justify-content-end">
                                        <span class="e-small d-flex align-items-center">
                                            <button ejs-button class="e-flat" iconCss="sf-icon-message-text-01 fs-6" type="button" content="{{data.commentCount}}" aria-label="notification count" role="button"></button>
                                        </span>
                                        <span class="e-small">
                                            <button ejs-button class="e-flat e-icons e-more-vertical-1 fs-6 py-1" type="button" aria-label="more options" role="button"></button>
                                        </span>
                                    </div>
                                </div>
                                <div class="e-card-content d-md-flex ms-4 gap-sm-5 py-2 mb-1 px-3">
                                    <span class="text-body-secondary">&num;{{data.ticketId}}</span>
                                    <span class="d-none d-md-block text-body-secondary">{{data.category}}</span>
                                    <div class="d-md-flex d-none d-md-block align-items-center">
                                        <span class="sf-icon-user-circle fs-6"></span>
                                        <span class="ms-2 text-body-secondary">Requester: {{data.requester}}</span>
                                    </div>
                                    <div class="d-flex mt-3 mt-md-0 align-items-center">
                                        <span class="sf-icon-clock-02 fs-6"></span>
                                        <span class="ms-2 text-body-secondary">{{data.createdTime}}</span>
                                    </div>
                                </div>
                                <div class="e-card-separator"></div>
                                <div class="e-card-actions px-3 py-2 d-flex">
                                    <span class="e-small d-block d-md-none ms-3">
                                        <button ejs-button class="e-flat e-icons e-grid-view fs-6" type="button" aria-label="choose the category" role="button"></button>
                                        <button ejs-button class="ms-5 e-flat sf-icon-calendar-check-01 fs-6" type="button" aria-label="choose the date" role="button"></button>
                                    </span>
                                    <span class="d-none d-md-flex align-items-center gap-4">
                                        <button ejs-dropdownbutton class="e-flat" iconCss="e-icons e-grid-view fs-6" type="button" content="{{data.category}}" (beforeOpen)="$event.cancel = true;" aria-label="choose the category" role="button"></button>
                                        <button ejs-dropdownbutton class="e-flat" type="button" content="{{data.assignee}}" (beforeOpen)="$event.cancel = true;" aria-label="choose the agent" role="button"></button>
                                        <button ejs-dropdownbutton class="e-flat d-none d-lg-inline-block" [ngClass]="{'e-success': data.priorityLevel === 'Medium', 'e-danger': data.priorityLevel === 'High', 'e-info': data.priorityLevel === 'Low'}" iconCss="sf-icon-{{data.priorityLevel === 'Medium' ? 'normal' : data.priorityLevel.toLowerCase()}} fs-6" type="button" content="{{data.priorityLevel}}" (beforeOpen)="$event.cancel = true;" aria-label="choose the priority" role="button"></button>
                                        <button ejs-dropdownbutton class="e-flat" iconCss="sf-icon-calendar-check-01 fs-6" type="button" content="{{data.dueDate | date: 'MM/dd/yyyy'}}" (beforeOpen)="$event.cancel = true;" aria-label="choose the date" role="button"></button>
                                    </span>
                                    <button ejs-dropdownbutton class="e-outline ms-auto" [ngClass]="{'e-info': data.status === 'In-progress', 'e-primary': data.status === 'Open', 'e-success': data.status === 'Closed'}" type="button" content="{{data.status}}" (beforeOpen)="$event.cancel = true;" aria-label="choose the status" role="button" style="width: 114px;"></button>
                                </div>
                            </div>
                        </div>
                    </ng-template>
                </ejs-listview>
            </div>
        </div>
    </div>
</section>

}