<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="header" lang="ko" xml:lang="ko">
    <header id="header" class="header fixed-top d-flex align-items-center">
        <div class="d-flex align-items-center justify-content-between">
            <a href="/" class="logo d-flex align-items-center">
                <span class="d-none d-lg-block">NXCUS - Agent</span>
            </a>
            <button class="btn toggle-sidebar-btn" id="toggleSidebar" aria-label="Toggle Sidebar">
                <i class="bi bi-list"></i>
            </button>
        </div>
        <nav class="header-nav ms-auto">
            <ul class="d-flex align-items-center">
                <li class="nav-item dropdown pe-3">
                    <button class="nav-link nav-profile d-flex align-items-center pe-0 dropdown-toggle" id="profileDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi bi-person-circle"></i>
                        <span class="d-none d-md-block ps-2" th:text="${userInfo.userName}"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end w-auto" aria-labelledby="profileDropdown">
                        <li>
                            <button class="dropdown-item" id="signOut" style="display: flex; align-items: center;font-weight: 600;">
                                <i class="bi bi-box-arrow-right"></i> Sign Out
                            </button>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

        <script type="module" th:src="@{/js/pages/fragments/header.js}" defer></script>
    </header>
</html>