<nav class="bg-gray-800 p-4" xmlns:sec="http://www.w3.org/1999/xhtml">
    <div id="navbar" class="flex flex-wrap bg-gray-800 text-white py-4 px-8 mx-auto">

        <div class="flex items-center mb-4 w-full md:w-auto md:mr-auto">

            <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 120 120">

                <!-- Background Parallelogram Shape -->
                <polygon points="0,0 0,0, 120,60,0,170" fill="#3498db" />

                <!-- Wire -->
                <line x1="20" y1="50" x2="90" y2="50" stroke="#fff" stroke-width="5" />

                <!-- Plug -->
                <rect x="50" y="40" width="20" height="20" fill="#e74c3c" />

                <!-- T Letter -->
                <text x="2%" y="70%" font-family="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" font-size="25" fill="#fff" font-weight="bold">
                    <tspan font-family="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" font-size="52" letter-spacing="2">T</tspan>
                </text>

                <!-- U Letter -->
                <text x="20%" y="70%" font-family="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" font-size="25" fill="#fff" font-weight="bold">
                    <tspan font-family="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" font-size="40" letter-spacing="2">U</tspan>
                </text>

                <!-- S Letter -->
                <text x="40%" y="70%" font-family="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" font-size="25" fill="#fff" font-weight="bold">
                    <tspan font-family="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" font-size="40" letter-spacing="2">S</tspan>
                </text>

                <!-- C Letter -->
                <text x="58%" y="70%" font-family="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" font-size="25" fill="#fff" font-weight="bold">
                    <tspan font-family="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" font-size="40" letter-spacing="2">C</tspan>
                </text>
            </svg>



        </div>

        <ul class="flex flex-wrap justify-start space-x-4 items-center w-full md:w-auto">
            <!-- Left side navigation links with icons -->
            <li>
                <a th:href="@{/}" class="flex items-center">
                    <i class="fas fa-home mr-2"></i>
                    <span class="hover:text-gray-300 transition duration-300">Home</span>
                </a>
            </li>
            <li>
                <a  th:href="@{/contact}" class="flex items-center" id="contactUsLink">
                    <i class="fas fa-envelope mr-2"></i>
                    <span class="hover:text-gray-300 transition duration-300">Contact Us</span>
                </a>
            </li>
            <li>
                <a th:href="@{/docs-ui}" class="flex items-center">
                    <i class="fas fa-book mr-2"></i>
                    <span class="hover:text-gray-300 transition duration-300">API Docs</span>
                </a>
            </li>
            <li>
                <a th:href="@{/monitoring}" class="flex items-center">
                    <i class="fas fa-book mr-2"></i>
                    <span class="hover:text-gray-300 transition duration-300">Health</span>
                </a>
            </li>
            <li sec:authorize="isAuthenticated()">
                <a th:href="@{/logout}" class="flex items-center">
                    <i class="fas fa-sign-out-alt mr-2"></i>
                    <span class="hover:text-gray-300 transition duration-300">Logout</span>
                </a>
            </li>
        </ul>

        <div class="ml-auto flex items-center space-x-4">
            <!-- Right side profile dropdown with icons -->
            <div class="relative" sec:authorize="isAuthenticated()">
                <button class="flex items-center focus:outline-none" onclick="toggleDropdown()">
                    <i class="fas fa-user-circle text-xl mr-2"></i>
                    <span class="mr-2" th:text="${user.username}"></span>
                    <img th:src="@{/api/user/profile-picture?username=} + ${user.username}" alt="Profile Picture" class="w-8 h-8 rounded-full cursor-pointer">
                </button>
                <div id="profileDropdown" class="absolute right-0 mt-2 bg-white border rounded-md shadow-md hidden text-black" style="z-index: 10">
                    <p>&nbsp;&nbsp;User ID:<span class="mr-2" th:text="${user.userId}"></span></p>
                    <p class="p-2" th:text="${user.email}"></p>
                    <hr class="my-2 text-blue-500">
                    <a href="#" id="profileSettings" class="flex items-center p-2 hover:bg-gray-200">
                        <i class="fas fa-cogs mr-2"></i>
                        Settings
                    </a>
                    <a href="/logout" class="flex items-center p-2 hover:bg-gray-200">
                        <i class="fas fa-sign-out-alt mr-2"></i>
                        Logout
                    </a>
                </div>
            </div>

            <!-- Login Button -->
            <a sec:authorize="isAnonymous()" th:href="@{/login}" class="bg-blue-500 text-white py-2 px-4 rounded-full hover:bg-blue-700 transition duration-300">Login</a>

            <!-- Register Button -->
            <a sec:authorize="isAnonymous()" th:href="@{/register}" class="bg-green-500 text-white py-2 px-4 rounded-full hover:bg-green-700 transition duration-300">Register</a>
        </div>



        <!-- Script to toggle dropdown visibility -->
        <script>
            function toggleDropdown() {
                const dropdown = document.getElementById('profileDropdown');
                dropdown.classList.toggle('hidden');
                setProfileSettingsLink();
            }

            function setProfileSettingsLink() {
                let settings = document.getElementById("profileSettings");
                settings.href = "http://localhost:8080/profile?username=" + username;
            }

            // Initial call to set profileSettings link
            setProfileSettingsLink();


        </script>

    </div>
</nav>
