<header class="app-header">
    <!-- Collapse icon -->
    <div class="d-flex flex-grow-1 w-100 me-auto align-items-center">

        <!-- App logo -->
        <?php include('partials/app-logo.php'); ?>

        <button class="mobile-menu-icon me-2 d-flex d-sm-flex d-md-flex d-lg-none flex-shrink-0" data-action="toggle-swap" data-toggleclass="app-mobile-menu-open" aria-label="Toggle Mobile Menu">
            <svg class="sa-icon">
                <use href="/public/icons/sprite.svg#menu"></use>
            </svg>
        </button>

        <!-- Collapse icon -->
        <button type="button" class="collapse-icon me-3 d-none d-lg-inline-flex d-xl-inline-flex d-xxl-inline-flex" data-action="toggle" data-class="set-nav-minified" aria-label="Toggle Navigation Size">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 8">
                <polygon fill="#878787" points="4.5,1 3.8,0.2 0,4 3.8,7.8 4.5,7 1.5,4" />
            </svg>
        </button>

        <form class="app-search" role="search" action="search.php" autocomplete="off">
            <input type="text" class="form-control" placeholder="Search for anything">
        </form>
    </div>

    <!-- Settings -->
    <button type="button" class="btn btn-system hidden-mobile" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-drawer-settings" aria-label="Open Settings">
        <svg class="sa-icon sa-icon-2x">
            <use href="/public/icons/sprite.svg#settings"></use>
        </svg>
    </button>

    <!-- Theme modes -->
    <button type="button" class="btn btn-system" data-action="toggle-theme" aria-label="Toggle Dark Mode" aria-pressed="false">
        <svg class="sa-icon sa-icon-2x sa-mode-light">
            <use href="/public/icons/sprite.svg#sun"></use>
        </svg>
        <svg class="sa-icon sa-icon-2x sa-mode-dark">
            <use href="/public/icons/sprite.svg#moon"></use>
        </svg>
    </button>

    <!-- Sidebar -->
    <button type="button" class="btn btn-system d-none d-sm-block d-sm-none d-md-none d-lg-block" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-app-drawer" aria-label="Open Sidebar">
        <svg class="sa-icon sa-icon-2x">
            <use href="/public/icons/sprite.svg#aperture"></use>
        </svg>
    </button>

    <!-- Full Screen Mode -->
    <button type="button" class="btn btn-system d-none d-sm-block d-sm-none d-md-none d-lg-block" data-action="app-fullscreen" aria-label="Toggle Dark Mode" aria-pressed="false">
        <svg class="sa-icon sa-icon-2x sa-fullscreen-on">
            <use href="/public/icons/sprite.svg#minimize"></use>
        </svg>
        <svg class="sa-icon sa-icon-2x sa-fullscreen-off">
            <use href="/public/icons/sprite.svg#maximize"></use>
        </svg>
    </button>

    <!-- Notifications -->
    <button type="button" class="btn btn-system dropdown-toggle no-arrow" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Open Notifications">
        <span class="badge badge-icon pos-top pos-end">5</span>
        <svg class="sa-icon sa-icon-2x">
            <use href="/public/icons/sprite.svg#bell"></use>
        </svg>
    </button>

    <!-- Notifications dropdown -->
    <?php include('partials/app-notifications.php'); ?>

    <!-- Profile -->
    <button type="button" data-bs-toggle="dropdown" title="drlantern@getwebora.com" class="btn-system bg-transparent d-flex flex-shrink-0 align-items-center justify-content-center" aria-label="Open Profile Dropdown">
        <img src="/public/img/demo/avatars/avatar-admin.png" class="profile-image profile-image-md rounded-circle" alt="Sunny A.">
    </button>

    <!-- Profile dropdown -->
    <div class="dropdown-menu dropdown-menu-animated">
        <div class="notification-header rounded-top mb-2">
            <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
                <span class="status status-success d-inline-block me-2">
                    <img src="/public/img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" alt="Sunny A.">
                </span>
                <div class="info-card-text">
                    <div class="fs-lg text-truncate text-truncate-lg">Sunny A.</div>
                    <span class="text-truncate text-truncate-md opacity-80 fs-sm">sunnya@sadim.com</span>
                </div>
            </div>
        </div>

        <div class="dropdown-divider m-0"></div>

        <a href="#" class="dropdown-item" data-action="app-reset" role="button">
            <span data-i18n="drpdwn.reset_layout">Reset Layout</span>
        </a>
        <a href="#" class="dropdown-item" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-drawer-settings" role="button">
            <span data-i18n="drpdwn.settings">Settings</span>
        </a>
        <a href="#" class="dropdown-item d-block d-sm-block d-md-block d-lg-none" data-action="toggle-swap" data-toggleclass="open" data-target="aside.js-app-drawer" role="button">
            <span data-i18n="drpdwn.settings">Virtual Assistant</span>
        </a>

        <div class="dropdown-divider m-0"></div>

        <a href="#" class="dropdown-item d-flex justify-content-between align-items-center" data-action="app-fullscreen" aria-pressed="false" role="button">
            <span data-i18n="drpdwn.fullscreen">Fullscreen</span>
            <b class="text-muted fs-nano px-2 rounded font-monospace align-self-center border">F11</b>
        </a>
        <a href="#" class="dropdown-item d-flex justify-content-between align-items-center" data-action="app-print" role="button">
            <span data-i18n="drpdwn.print">Print</span>
            <span class="text-muted fs-nano px-2 rounded font-monospace align-self-center border">
                <svg width="15" height="15">
                    <path d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953" stroke-width="1.2" stroke="currentColor" fill="none" stroke-linecap="square"></path>
                </svg>
                + P
            </span>
        </a>

        <div class="dropdown-multilevel dropdown-multilevel-left">
            <div class="dropdown-item d-flex justify-content-between align-items-center">
                <span data-i18n="drpdwn.language">Language</span>
                <i class="sa sa-chevron-right"></i>
            </div>
            <div class="dropdown-menu">
                <a href="#?lang=fr" class="dropdown-item" data-action="lang" data-lang="fr">Français</a>
                <a href="#?lang=en" class="dropdown-item selected" data-action="lang" data-lang="en">English (US)</a>
                <a href="#?lang=es" class="dropdown-item" data-action="lang" data-lang="es">Español</a>
                <a href="#?lang=ru" class="dropdown-item" data-action="lang" data-lang="ru">Русский язык</a>
                <a href="#?lang=jp" class="dropdown-item" data-action="lang" data-lang="jp">日本語</a>
                <a href="#?lang=ch" class="dropdown-item" data-action="lang" data-lang="ch">中文</a>
            </div>
        </div>

        <div class="dropdown-divider m-0"></div>

        <a class="dropdown-item py-3 fw-500 d-flex justify-content-between" href="auth-login.php">
            <span class="text-danger" data-i18n="drpdwn.page-logout">Logout</span>
            <span class="d-block text-truncate text-truncate-sm">@sunnyahmed</span>
        </a>
    </div>
</header>