<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container-fluid">
        <a href="/"><img src="/assets/img/header-logo.png" class="navbar-brand header-logo" alt="ThrowdownTV logo"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a href="/browse" class="nav-link" id="nav-browse">Browse</a>
                </li>
                <li class="nav-item">
                    <a href="/following" class="nav-link" id="nav-following">Following</a>
                </li>
                <li class="nav-item">
                    <a href="/vip" class="nav-link" style="font-weight: bold; color: #F57EB6;" id="get-vip">VIP</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item" id="nav-dashboard" style="margin-left: 5px; margin-right: 5px; display: none;">
                    <a href="/dashboard" class="btn btn-block btn-warning my-2 my-sm-0">Dashboard</a>
                </li>
                <li class="nav-item" id="nav-login" style="margin-left: 5px; margin-right: 5px; display: none;">
                    <a href="/login" class="btn btn-block btn-success my-2 my-sm-0">Log In</a>
                </li>
                <li class="nav-item" id="nav-signup" style="margin-left: 5px; margin-right: 5px; display: none;">
                    <a href="/signup" class="btn btn-block btn-primary my-2 my-sm-0">Sign Up</a>
                </li>
                <li class="nav-item" id="nav-logout" style="margin-left: 5px; margin-right: 5px; display: none;">
                    <a href="/logout" class="btn btn-block btn-danger my-2 my-sm-0">Log Out</a>
                </li>
                
            </ul>
        </div>
    </div>

    <script>
        $(document).ready(() => {
            fetch(`/authenticated`).then(data => data.json()).then(data => {
                if (!data.isLoggedIn) {
                    $(`#nav-login`).show();
                    $(`#nav-signup`).show();
                } else {
                    $(`#nav-logout`).show();
                    $(`#nav-dashboard`).show();

                    /*
                    fetch(`/api/public-stream-data/` + data.username.toLowerCase()).then(data => data.json()).then(data2 => {
                        if(data2.isVip || data2.isStaff) $(`#get-vip`).hide();
                    })
                    */
                }
            });

        });
    </script>
</nav>