<nav class="navbar navbar-expand-lg navbar-light bg-body my-4">
    <div class="container">
        <a class="navbar-brand" href="/"><% if (config.siteLogo?.url) { %><img class="pt-3" src="<%= config.imgThumbnail %>" alt="<%= config.siteName %>" title="<%= config.siteName %>"><% } else { %><%= config.siteName %> <% } %></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/">Upcoming Events</a>
                </li>
                <% if (currentUser) { %>
                    <% if (['eventHost','systemAdmin','admin','superAdmin'].includes(currentUser.role)) { %>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Administration</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <h4 class="dropdown-header">
                                        Event Administration
                                    </h4>
                                </li>
                                <li><a class="dropdown-item text-muted" href="/admin/events">Manage My Events</a></li>
                                <li><a class="dropdown-item text-muted" href="/events/signin">Ticket Check</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <h6 class="dropdown-header">
                                        System Administration
                                    </h6>
                                </li>
                                <li><a class="dropdown-item text-muted" href="/admin/hosts">Manage Event Hosts</a></li>
                                <li><a href="/admin/monsters" class="dropdown-item text-muted">Manage Monster Manual</a></li>
                                <% if (['systemAdmin','admin','superAdmin'].includes(currentUser.role)) { %>
                                    <li><a href="/admin/systems" class="dropdown-item text-muted">Manage Event Systems</a></li>
                                    <% if (['admin','superAdmin'].includes(currentUser.role)) { %>
                                        
                                        <li><a class="dropdown-item text-muted" href="/admin/events/all">Manage All Events</a></li>
                                        <li><a class="dropdown-item text-muted" href="/admin/users">Manage Users</a></li>
                                        <li><a href="/admin/email" class="dropdown-item text-muted">Manage E-mails</a></li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li><a href="/admin/policies" class="dropdown-item text-muted">Manage Site Policies</a></li>
                                        <li><a href="/admin/faq" class="dropdown-item text-muted">Manage FAQ</a></li>
                                        <li><a href="/admin/config" class="dropdown-item text-muted">System Config</a></li>
                                        <% }} %>
                            </ul>
                        </li>
                        <% } %>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">My Account</a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <h6 class="dropdown-header">
                                            <%= currentUser.username %>
                                        </h6>
                                    </li>
                                    <li><a class="dropdown-item text-muted" href="/account/bookings">Event Bookings</a></li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item text-muted" href="/account">Account Settings</a></li>
                                    <li><a href="/password" class="dropdown-item text-muted">Change Password</a></li>
                                    <li><a href="/logout" class="dropdown-item text-muted">Logout</a></li>

                                </ul>
                            </li>
                            <% } else { %>
                                <li class="nav-item">
                                    <a class="nav-link" href="/login">Login or Register</a>
                                </li>

                                <% } %>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="/about" class="dropdown-item text-muted">About <%= config.siteName %></a></li>
                                            <li><a href="/faq" class="dropdown-item text-muted">FAQ</a></li>
                                            <li><a href="/organisers" class="dropdown-item text-muted">Event Organisers</a></li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            <li><a href="/events.ics" class="dropdown-item text-muted"><i class="bi bi-calendar3"></i> ICS Calendar</a></li>
                                            <li><a href="/rss" class="dropdown-item text-muted"><i class="bi bi-rss"></i> RSS Feed</a></li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            <li><a class="dropdown-item text-muted" href="/privacy">Privacy Policy</a></li>
                                            <li><a class="dropdown-item text-muted" href="/terms">Terms & Conditions</a></li>
                                        </ul>
                                    </li>
            </ul>
        </div>
    </div>
</nav>