<script>
    $(document).ready(function() {
      var logoutBtn = document.getElementById('logout');
        $(logoutBtn).on('click', function() {
            $('div[name="confirmation"]').removeAttr("hidden");
            $('button[name="goToWelcome"]').on('click', function() {
                $.ajax({
                    type: 'POST',
                    url: '/auth/logout'
                }).done(function() {
                    window.location.replace('/');
                });
            });
        });
    });
</script>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
    <a class="navbar-brand" href="/">Azure Cloud App</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav mr-auto">
        <% if(active === 'home') { %>
            <a class="nav-link active" href="/">Home <span class="sr-only">(current)</span></a>
        <% } else { %>
            <a class="nav-link" href="/">Home</a>
        <% } %>
        <% if(active === 'about') { %>
            <a class="nav-link active" href="/about">About <span class="sr-only">(current)</span></a>
        <% } else { %>
            <a class="nav-link" href="/about">About</a>
        <% } %>
        <% if(active === 'contact') { %>
            <a class="nav-link active" href="/contact">Contact <span class="sr-only">(current)</span></a>
        <% } else { %>
            <a class="nav-link" href="/contact">Contact</a>
        <% } %>
        </div>
        <div class="navbar-nav ml-auto">
            <% if(!user) { %>
                <% if(active === 'login') { %>
                    <a class="nav-link active" href="/auth/login">Login <span class="sr-only">(current)</span></a>
                <% } else { %>
                    <a class="nav-link" href="/auth/login">Login</a>
                <% } %>
                <% if(active === 'register') { %>
                    <a class="nav-link active" href="/auth/register">Sign up <span class="sr-only">(current)</span></a>
                <% } else { %>
                    <a class="nav-link" href="/auth/register">Sign up</a>
                <% } %>
            <% } else { %>
                <% if(active === 'dashboard') { %>
                    <a class="nav-link active" href="/dashboard">Dashboard <span class="sr-only">(current)</span></a>
                <% } else { %>
                    <a class="nav-link" href="/dashboard">Dashboard</a>
                <% } %>
                <% if(active === 'profile') { %>
                    <a class="nav-link active" href="/profile">Profile <span class="sr-only">(current)</span></a>
                <% } else { %>
                    <a class="nav-link" href="/profile">Profile</a>
                <% } %>
                <button type="submit" class="btn btn-link nav-link" id="logout" name="logout" data-toggle="modal" data-target=".modal">Logout</a>
            <% } %>
        </div>
    </div>
    <%- include('./modals/logout-modal.ejs') %>
</nav>