@using Memodex.WebApp.Infrastructure
@inject ProfileProvider ProfileProvider

@{
    CurrentProfile profile = await ProfileProvider.GetSelectedProfileAsync();
}

<header>
    <nav class="bg-blue-900 dark:bg-slate-900">
        <div class="mx-auto max-w-7xl h-16 flex items-center justify-between">
            <div class="flex items-center space-x-8">
                <a href="@Url.Page("Index")" class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="fill-slate-200 dark:fill-slate-500 w-10 h-10 " viewBox="0 0 128 128"
                         preserveAspectRatio="xMidYMid meet">
                        <path d="M69 120c-24-4-42-22-46-46-2-15 4-31 15-43a52 52 0 0 1 89 37 52 52 0 0 1-58 52zm18-6c21-6 36-25 35-47 0-20-13-38-33-45-7-2-20-2-28 0l-6 2h6c12 2 23 9 28 20 2 4 3 7 3 14 0 8-1 10-3 14a33 33 0 0 1-52 11c-3-2-6-7-7-9-2-4-3-4-3-2 1 17 17 37 36 42 6 2 17 2 24 0zM67 86c1 0 1-1-2-1-5-1-11-6-14-11-7-16 6-33 23-29 4 1 6 2 9 6l5 4-1-3c-3-14-14-23-28-23-11 0-21 6-26 16-3 5-3 15-2 22 3 8 10 16 18 19h18zm7-6c7-3 10-8 10-16 0-9-6-15-15-15-5 0-9 2-13 6-4 6-4 14 2 20 4 6 9 7 16 5z"/>
                    </svg>
                    <span class="ml-4">
                        Memodex
                    </span>
                </a>

                <a href="@Url.Page("BrowseDecks")">Decks</a>
            </div>

            <div class="flex items-center">
                <partial name="_ThemeTogglePartial"/>
                <div class="relative inline-block text-left">
                    <button type="button" class="flex items-center focus:outline-none" id="avatarDropdownToggle">
                        <img src="@($"{profile.AvatarPath}")" alt="avatar" class="rounded-full w-12 h-12 ml-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                        </svg>
                    </button>

                    <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-slate-900 ring-1 ring-black ring-opacity-5 z-10 hidden"
                         id="profileDropdown">
                        <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                            <a href="@Url.Page("MyProfile")"
                               class="block px-4 py-2 text-sm text-gray-700 dark:text-slate-200 hover:bg-gray-100 dark:hover:bg-slate-800 hover:text-gray-900" role="menuitem">
                                My Profile
                            </a>
                            <a href="@Url.Page("Logout")"
                               class="block px-4 py-2 text-sm text-gray-700 dark:text-slate-200 hover:bg-gray-100 dark:hover:bg-slate-800 hover:text-gray-900" role="menuitem">
                                Logout
                            </a>
                        </div>
                    </div>
                </div>

                <script>
                   document.getElementById('avatarDropdownToggle').addEventListener('click', function() {
                       const dropdown = document.getElementById('profileDropdown');
                       dropdown.style.display = dropdown.style.display === 'none' || dropdown.style.display === '' ? 'block' : 'none';
                   });
               </script>

            </div>
        </div>
    </nav>
</header>
