<div class="container">
    <nav class="navbar navbar-expand-lg my-4 mb-lg-0">
        <h1 class="mb-0 d-lg-none"><%= title %></h1>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
            aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse mt-2 mt-lg-0" id="navbarText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 d-flex gap-2 gap-lg-4">
                <li class="nav-item">
                    <a class="p-0 nav-link <% if (currentUrl === '/sites') { %> active <% } %>" href="/sites">Sites</a>
                </li>
                <li class="nav-item">
                    <a class="p-0 nav-link <% if (currentUrl === '/account') { %> active <% } %>" href="/account">Account</a>
                </li>
                <!-- <li class="nav-item">
                    <a class="p-0 nav-link <% if (currentUrl === '/about') { %> active <% } %>" href="/about">About</a>
                </li> -->
            </ul>
            <div class="nav-item dropdown">
                <div class="nav-link dropdown-toggle" href="" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-person-circle me-1"></i>
                    <%= userEmail %>
                </div>
                <ul class="dropdown-menu dropdown-menu-lg-end">
                    <li>
                        <a id="logOutLink" class="dropdown-item" href="#" title="Log out">
                            <i class="bi bi-box-arrow-right me-2"></i>
                            Log out
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="d-none d-lg-block">
        <hr class="mt-0 mb-4 border-dark border-opacity-50">
        <h1><%= title %></h1>
    </div>
</div>

<script>
    const logOutLink = document.getElementById('logOutLink');

    logOutLink.addEventListener('click', logOut);
</script>