{{ block navbar() }}
<nav class="bg-gray-100 border-b border-gray-300 fixed top-0 left-0 right-0 w-full z-50">
    <div class="container mx-auto px-4 flex justify-between items-center h-16">
        <ul class="flex space-x-4">
            <li><a href="/" class="text-black hover:text-blue-500">Home</a></li>
            <li><a href="/status" class="text-black hover:text-blue-500">Status</a></li>
        </ul>
        <div class="relative">
            <input type="checkbox" id="dropdown-toggle" class="hidden">
            <label for="dropdown-toggle" class="cursor-pointer p-2 border border-gray-300 rounded bg-white">&#9776;</label>
            <ul class="absolute right-0 mt-2 w-48 bg-white border border-gray-300 rounded shadow-lg hidden">
                {{ if isset("LoggedInUser") && LoggedInUser != nil }}
                    <li><a href="/users/{{LoggedInUser.ID}}" class="block px-4 py-2 text-black hover:bg-gray-100">Profile</a></li>
                    <li><a href="/logout" class="block px-4 py-2 text-black hover:bg-gray-100">Logout</a></li>
                    {{ if LoggedInUser.IsSuperAdmin() }}
                        <li><a href="/users/new" class="block px-4 py-2 text-black hover:bg-gray-100">Create User</a></li>
                    {{ end }}
                    <li class="block px-4 py-2 bg-gray-100 border-t border-gray-300">Welcome, 
                        <a href="/users/{{LoggedInUser.ID}}"><code>{{ LoggedInUser.Username }}</code></a>
                    </li>
                {{ else }}
                    <li><a href="/login" class="block px-4 py-2 text-black hover:bg-gray-100">Login</a></li>
                {{ end }}
            </ul>
        </div>
    </div>
</nav>

<style>
    body, html {
        margin: 0;
        padding: 0;
    }
    #dropdown-toggle:checked + label + ul {
        display: block;
    }
</style>
{{ end }}