<nav class="navbar navbar-expand-lg navbar-custom navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/dashboard">
            <img src="/images/bak_counter_logo-sm.png" alt="Logo" height="40">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="/bak/submit">BAK Versturen</a>
                </li>
                <li class="nav-item position-relative">
                    <a class="nav-link" href="/bak/validate">BAK Valideren</a>
                    <% if (pendingRequestCount> 0) { %>
                    <span class="position-absolute translate-middle badge rounded-pill bg-danger"
                        style="top: 10%; right: -20px; transform: translate(50%, -50%);">
                        <%= pendingRequestCount %>
                        <span class="visually-hidden">Openstaande verzoeken</span>
                    </span>
                    <% } %>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/bak-getrokken">Getrokken Bak aanvragen</a>
                </li>
                <li class="nav-item position-relative">
                    <a class="nav-link" href="/bets">Weddenschappen</a>
                    <% if (pendingBetCount > 0) { %>
                    <span class="position-absolute translate-middle badge rounded-pill bg-danger"
                        style="top: 10%; right: -20px; transform: translate(50%, -50%);">
                        <%= pendingBetCount %>
                        <span class="visually-hidden">Weddenschappen in afwachting</span>
                    </span>
                    <% } %>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/hall-of-fame">Hall of Fame</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/eventLogs">Event Logs</a>
                </li>
                <!-- Admin only option -->
                <% if (user.isAdmin) { %>
                <li class="nav-item">
                    <a class="nav-link" href="/admin">Admin Overzicht</a>
                </li>
                <% } %>
            </ul>
            <div class="navbar-text">
                <div class="dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <%= user.name %> <img
                            src="<%= user.profilePicture ? 'https://bak-counter-images.ams3.digitaloceanspaces.com/'+user.profilePicture : '/uploads/profile/blank_image.png' %>"
                            alt="Profiel" class="profile-icon rounded-circle">
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a class="dropdown-item" href="/profile/<%= user.id %>">Profiel</a></li>
                        <li><a class="dropdown-item" href="/logout">Uitloggen</a></li>
                    </ul>
                </div>
            </div>


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