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

<section class="bg-gray-50 dark:bg-gray-950">
    <div>
        <div class="border border-gray-200 dark:border-gray-600 bg-gray-100 dark:bg-gray-700">
            <div class="flex items-center justify-between py-2 ms-6 me-1 sm:me-2.5 lg:me-6">
                <div class="flex items-center">
                    <img class="mr-3 h-7" src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                    <span class="text-lg font-semibold text-gray-900 dark:text-white">Company Name</span>
                </div>
                <div class="flex items-center">
                    <div class="hidden lg:block mr-4">
                        <div class="e-input-group flex">
                            <input class="e-input" type="text" placeholder="Search" aria-label="search" role="textbox" />
                            <span class="e-input-group-icon e-icons e-search"></span>
                        </div>
                    </div>
                    <button ejs-button class="sf-icon-notification-bell-02 text-base leading-3 e-flat mr-1 sm:mr-2" type="button" aria-label="notification" role="button"></button>
                    <div class="border border-r border-gray-200 dark:border-gray-600 hidden sm:block mr-2 h-7"></div>
                    <button ejs-button class="e-icons e-grid-view e-flat hidden sm:block mr-2" type="button" aria-label="grid view" role="button"></button>
                    <div class="border border-r border-gray-200 dark:border-gray-600 hidden sm:block mr-1 h-7"></div>
                    <span class="e-avatar e-avatar-small e-avatar-circle hidden sm:block ml-2 mr-2 lg:mr-0">
                        <img src="assets/images/common/avatar/avatar-3.jpg" alt="profile picture" />
                    </span>
                    <div class="border border-r border-gray-200 dark:border-gray-600 block lg:hidden ms-1 h-7"></div>
                    <span id="menu" class="block lg:hidden">
                        <ejs-menu [hamburgerMode]="true" title="" [items]="[{text: 'Builders'}, {text: 'Features'}, {text: 'Websites'}, {text: 'Elements'}, {text: 'Pricing'}]" aria-label="menu items" role="menu"></ejs-menu>
                    </span>
                </div>
            </div>
        </div>
        <div class="border border-t-0 border-gray-200 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 block sm:h-auto mx-auto">
            <div class="flex flex-col sm:flex-row justify-between px-0 sm:px-6 py-2.5">
                <div class="flex items-center sm:col-span-8 md:col-span-8 lg:col-span-10 xl:col-span-10 self-start px-4 sm:px-0">
                    <ejs-breadcrumb #breadcrumb cssClass="e-breadcrumb-chips flex items-center" overflowMode="None">
                        <e-breadcrumb-items>
                            <e-breadcrumb-item text="Personal" aria-label="personal breadcrumb items"></e-breadcrumb-item>
                            <e-breadcrumb-item text="CompanyName.com" aria-label="company-oriented breadcrumb items"></e-breadcrumb-item>
                        </e-breadcrumb-items>
                        <ng-template #separatorTemplate>
                            <span class="text-base e-icons e-chevron-right"></span>
                        </ng-template>
                        <ng-template #itemTemplate let-data>
                            <div class="flex items-center">
                                <span *ngIf="data.text == 'Personal'" class="e-avatar e-avatar-xsmall e-avatar-circle mr-1">
                                    <img src="assets/images/common/avatar/avatar-3.jpg" alt="profile picture" />
                                </span>
                            </div>
                            <div *ngIf="data.text == 'Personal'">
                                <button id="mainDropdown" ejs-dropdownbutton class="e-flat pr-2 md:pr-4" content="{{data.text}}" [items]="[{ text: (data.text == 'Personal' ? 'CompanyName.com' : ''), id: 'item1' }]" type="button" aria-label="choose an item" role="button" (open)="open($event)"></button>
                            </div>
                            <button ejs-button class="e-flat" *ngIf="data.text == 'CompanyName.com'" content="{{data.text}}" type="button" aria-label="open company name website" role="button"></button>
                        </ng-template>
                    </ejs-breadcrumb>
                </div>
                <div class="flex items-center gap-2 w-full sm:w-max px-4 sm:px-0">
                    <div class="w-1/2 mt-3 sm:mt-0">
                        <button ejs-button class="e-primary w-full" type="button" aria-label="open app" role="button">Open App</button>
                    </div>
                    <div class="w-1/2 md:w-full mt-3 sm:mt-0 p-0">
                       <button #moreOptionsDropdown ejs-dropdownbutton class="e-outline e-primary w-full" content="More" [items]="[{text:'Create new app', iconCss:'e-icons e-folder'}, {text:'Inbox', iconCss:'e-icons e-folder'}, {text:'App info', iconCss:'e-icons e-folder'}, {text:'Edit app', iconCss:'e-icons e-folder'}]" type="button" aria-label="choose from more options" role="button"></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="hidden lg:flex px-4 py-1 bg-gray-100 dark:bg-gray-700 border border-t-0 border-gray-200 dark:border-gray-600">
            <ejs-menu [items]="[{text: 'Builders'}, {text: 'Features'}, {text: 'Websites'}, {text: 'Elements'}, {text: 'Pricing'}]" aria-label="menu items" role="menu"></ejs-menu>
        </div>
    </div>
</section>

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

<section>
    <div class="border border-light-subtle bg-body-tertiary py-2 ps-4 pe-2 pe-lg-4">
        <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <img class="me-2" src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                <h5 class="fw-bold text-body fs-5 mb-0">Company Name</h5>
            </div>
            <div class="d-flex align-items-center">
                <div class="d-none d-lg-block me-3">
                    <div class="e-input-group d-flex">
                        <input class="e-input" type="text" placeholder="Search" aria-label="search" role="textbox" />
                        <span class="e-input-group-icon e-icons e-search border-start-0"></span>
                    </div>
                </div>
                <button ejs-button class="sf-icons sf-icon-notification-bell-01 fs-6 e-flat me-0 me-sm-3" type="button" aria-label="notification" role="button"></button>
                <div class="border-end border-secondary-subtle d-none d-sm-block me-3" style="height: 24px;"></div>
                <button ejs-button class="e-icons e-grid-view e-flat d-none d-sm-block me-3 e-medium" type="button" aria-label="grid view" role="button"></button>
                <div class="border-end border-secondary-subtle d-none d-sm-block" style="height: 24px;"></div>
                <span class="e-avatar e-avatar-small e-avatar-circle d-none d-sm-block ms-3">
                    <img src="assets/images/common/avatar/avatar-3.jpg" alt="profile picture" />
                </span>
                <div class="border-end border-secondary-subtle d-block d-lg-none ms-2 ms-sm-3" style="height: 24px;"></div>
                <span id="menu" class="d-block d-lg-none">
                    <ejs-menu class="bg-body-tertiary" [hamburgerMode]="true" title="" [items]="[{text: 'Builders'}, {text: 'Features'}, {text: 'Websites'}, {text: 'Elements'}, {text: 'Pricing'}]" aria-label="menu items" role="menu"></ejs-menu>
                </span>
            </div>
        </div>
    </div>
    <div class="border border-light-subtle bg-body-tertiary border-top-0 d-block mx-auto">
        <div class="px-4 py-3 px-4 d-flex m-0 row justify-content-between">
            <div class="d-flex align-items-center justify-content-sm-start col-sm-8 col-md-8 col-lg-10 col-xl-10 m-0 p-0">
                <ejs-breadcrumb #breadcrumb cssClass="e-breadcrumb-chips d-flex align-items-center" overflowMode="None">
                    <e-breadcrumb-items>
                        <e-breadcrumb-item text="Personal" aria-label="personal breadcrumb items"></e-breadcrumb-item>
                        <e-breadcrumb-item text="CompanyName.com" aria-label="company-oriented breadcrumb items"></e-breadcrumb-item>
                    </e-breadcrumb-items>
                    <ng-template #separatorTemplate>
                        <span class="text-base e-icons e-chevron-right"></span>
                    </ng-template>
                    <ng-template #itemTemplate let-data>
                        <div class="d-flex align-items-center">
                            <span *ngIf="data.text == 'Personal'" class="e-avatar e-avatar-small e-avatar-circle me-2">
                                <img src="assets/images/common/avatar/avatar-3.jpg" alt="profile picture" />
                            </span>
                        </div>
                        <div *ngIf="data.text == 'Personal'">
                            <button id="mainDropdown" ejs-dropdownbutton class="e-flat pe-2 pe-md-4" content="{{data.text}}" [items]="[{ text: (data.text == 'Personal' ? 'CompanyName.com' : ''), id: 'item1' }]" type="button" aria-label="choose an item" role="button" (open)="open($event)"></button>
                        </div>
                        <button ejs-button class="e-flat" *ngIf="data.text == 'CompanyName.com'" content="{{data.text}}" type="button" aria-label="open company name website" role="button"></button>
                    </ng-template>
                </ejs-breadcrumb>
            </div>
            <div class="d-flex p-0 pe-2 pe-md-2 gap-2 col-sm-4 col-md-4 col-lg-2 col-xl-2 m-0">
                <div class="col-6 mt-3 mt-sm-0">
                    <button ejs-button class="e-primary p-lg-1 px-2 w-100" type="button" aria-label="open app" role="button">Open App</button>
                </div>
                <div class="p-0 col-6 mt-3 mt-sm-0">
                    <button #moreOptionsDropdown ejs-dropdownbutton class="e-outline e-primary w-100" content="More" [items]="[{text:'Create new app', iconCss:'e-icons e-folder'}, {text:'Inbox', iconCss:'e-icons e-folder'}, {text:'App info', iconCss:'e-icons e-folder'}, {text:'Edit app', iconCss:'e-icons e-folder'}]" type="button" aria-label="choose from more options" role="button"></button>
                </div>
            </div>
        </div>
    </div>
    <div class="d-none d-lg-flex ps-3 pe-4 bg-body-tertiary border border-top-0 border-light-subtle bg-body-tertiary" style="height: 40px; display: flex; align-items: center;">
        <ejs-menu [items]="[{text: 'Builders'}, {text: 'Features'}, {text: 'Websites'}, {text: 'Elements'}, {text: 'Pricing'}]" aria-label="menu items" role="menu"></ejs-menu>
    </div>
</section>

}