<%# Template code for the navigation bar on private routes %>

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #37b2db;" id="navigation-bar">

    <div class="container">

        <a class="navbar-brand" href="/homepage">
            <img src="https://f000.backblazeb2.com/file/mutorials/icons/Icon_White.svg" width="32" height="32" class="d-inline-block align-top" alt="">
            Mutorials
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar">

            <ul class="navbar-nav me-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="trainDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img src="https://f000.backblazeb2.com/file/mutorials/icons/Navbar_Train.svg" width="25" height="25" class="d-inline-block align-top" alt="">
                        Train
                    </a>
                    <div class="dropdown-menu" aria-labelledby="trainDropdown">
                        <a class="dropdown-item" href="/train/Physics/chooseUnits">Physics</a>
                        <a class="dropdown-item" href="/train/Chemistry/chooseUnits">Chemistry</a>
                        <a class="dropdown-item" href="/train/Biology/chooseUnits">Biology</a>
			<a class="dropdown-item" href="/train/USABO/chooseUnits">USABO</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="/train/rush">Problem Rush</a>
                        <a class="dropdown-item" href="/train/daily">Daily Question</a>
			<a class="dropdown-item" href="/train/classic">Classic Mode</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="statsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img src="https://f000.backblazeb2.com/file/mutorials/icons/Navbar_Statistics.svg" width="25" height="25" class="d-inline-block align-top" alt="">
                        Stats
                    </a>
                    <div class="dropdown-menu" aria-labelledby="statsDropdown">
                        <a class="dropdown-item" href="/stats">Stats</a>
                        <a class="dropdown-item" href="/leaderboard">Leaderboard</a>
                    </div>
                </li>
                <li class="nav-item me-3">
                  <a class="nav-link" href="/whoWeAre">
                      About
                  </a>
                </li>
                <li class="nav-item me-3">
                    <a class="nav-link" href="/references">
                        References
                    </a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item dropdown float-end">
                    <a class="nav-link dropdown-toggle" href="#" id="accountDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img src="https://f000.backblazeb2.com/file/mutorials/icons/Navbar_Settings.svg" width="25" height="25" class="d-inline-block align-top" alt="">
                        <%= logUser.ign %>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="accountDropdown">
                        <a class="dropdown-item" href="/profile">Profile</a>
                        <a class="dropdown-item" href="/class/dash">Classes</a>
                        <a class="dropdown-item" href="/settings">Settings</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#" id="logoutModal" data-bs-toggle="modal" data-bs-target="#signoutModal">Log Out</a>
                    </div>
                </li>
            </ul>

        </div>

    </div>

</nav>

<%# Logout confirm modal %>
<div class="modal fade" id="signoutModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Are you sure you want to log out?</h5>
            </div>
			<div class="modal-body">
				<p>Your account progress has been saved and awaits your return!</p>
            </div>
            <div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                <a href="/logout"><button type="button" class="btn btn-danger" id="signoutConfirm">Yes</button></a>
            </div>
        </div>
    </div>
</div>
