<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Wandrlust</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
    <!-- Google Fonts Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
    <!-- MDB -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.2.0/mdb.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- Custom styles -->
    <!-- <link rel="stylesheet" href="css/style.css" /> -->
    <style>
        /* Carousel styling */
        #introCarousel,
        .carousel-inner,
        .carousel-item,
        .carousel-item.active {
            height: 100vh;
        }

        .carousel-item:nth-child(1) {
            background-image: url('https://mdbootstrap.com/img/Photos/Others/images/76.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }

        .carousel-item:nth-child(2) {
            background-image: url('https://mdbootstrap.com/img/Photos/Others/images/77.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }

        .carousel-item:nth-child(3) {
            background-image: url('https://mdbootstrap.com/img/Photos/Others/images/78.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }

        /* Height for devices larger than 576px */
        @media (min-width: 992px) {
            #introCarousel {
                margin-top: -58.59px;
            }
        }

        .navbar .nav-link {
            color: #fff !important;
        }
    </style>
</head>

<body>
    <!--Main Navigation-->
    <header>
        <!-- Navbar -->
        <nav class="navbar navbar-expand-lg navbar-dark d-none d-lg-block" style="z-index: 2000;">
            <div class="container-fluid">
                <!-- Navbar brand -->
                <a class="navbar-brand nav-link" target="_self" href="/">
                    <strong>Wandrlust</strong>
                </a>
                <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
                    data-mdb-target="#navbarExample01" aria-controls="navbarExample01" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarExample01">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item active">
                            <a class="nav-link" aria-current="page" href="/">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/locations">Locations</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/feed">Feeds</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/faq" rel="nofollow">FAQ</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/contact">Contact Us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/about">About Us</a>
                        </li>
                    </ul>

                    <ul class="navbar-nav list-inline">
                        <!-- Icons -->
                        <% if( isLoggedIn ){ %>
                            <li class="dropdown nav-item">
                                <a role="button" id="dropdownMenuLink" data-mdb-toggle="dropdown" aria-expanded="false">
                                    <div>
                                        <i class="fas fa-user-circle text-decoration-none text-white fa-2x"></i>
                                    </div>
                                </a>
                                <ul class="dropdown-menu mt-3" aria-labelledby="dropdownMenuLink"
                                    style="background-color: #282b30;">
                                    <a href="/profile" style="text-decoration: none;">
                                        <div class="profile dropdown-item text-white bg-transparent"
                                            style="display: flex; flex-direction: row; gap:1rem;">
                                            <div style="color: gainsboro; padding-top: .5rem;">
                                                <i class="far fa-user fa-2x"></i>
                                            </div>
                                            <div>
                                                <div style="color: gainsboro; font-size: 1rem;">
                                                    <%=username%>
                                                </div>
                                                <div style="color: gainsboro; font-size: .9rem;">
                                                    <%= email%>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    <hr width="100%" color="white">
                                    <li>
                                        <a class="dropdown-item text-white   bg-transparent" href="/chatHome">WandrChat</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item text-white bg-transparent" href="/budget">Budget
                                            Tracker</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item text-white bg-transparent" href="/todo">Todo List</a>
                                    </li>
                                    <li style="padding-bottom: .5rem"><a class="dropdown-item text-white bg-transparent"
                                            href="/logout">Logout</a></li>
                                </ul>
                            </li>
                            <% } else { %>
                                <a href="/admin/login" role="button" id="dropdownMenuLink"
                                    style="display: flex;color: white;gap: 1rem;text-decoration: none;">
                                    <div>
                                        Admin Login
                                    </div>
                                    <div>
                                        <i class="fas fa-solid fa-lock text-decoration-none"></i>
                                    </div>
                                </a>
                                <% } %>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Navbar -->

        <!-- Carousel wrapper -->
        <div id="introCarousel" class="carousel slide carousel-fade shadow-2-strong" data-mdb-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-mdb-target="#introCarousel" data-mdb-slide-to="0" class="active"></li>
                <li data-mdb-target="#introCarousel" data-mdb-slide-to="1"></li>
                <li data-mdb-target="#introCarousel" data-mdb-slide-to="2"></li>
            </ol>

            <!-- Inner -->
            <div class="carousel-inner">
                <!-- Single item -->
                <div class="carousel-item active">
                    <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
                        <div class="d-flex justify-content-center align-items-center h-100">
                            <div class="text-white text-center">
                                <h1 class="mb-3">
                                    <% if( isLoggedIn ){ %>
                                        Wandrlust awaits,
                                        <span>
                                            <%=name%>
                                        </span>
                                        <% } else{ %>
                                            Wandrlust awaits
                                            <% } %>
                                </h1>
                                <h5 class="mb-4">Start your journey with us today!</h5>
                                <% if( !isLoggedIn ){ %>
                                    <a class="btn btn-outline-light btn-lg m-2" href="/login" role="button"
                                        rel="nofollow" target="_self">Sign up</a>
                                    <a class="btn btn-outline-light btn-lg m-2" href="/login" target="_self"
                                        role="button">Log
                                        in</a>
                                    <% } %>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Single item -->
                <div class="carousel-item">
                    <div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">
                        <div class="d-flex justify-content-center align-items-center h-100">
                            <div class="text-white text-center">
                                <h1 class="mb-3">Travel the world, one click at a time</h1>
                                <h5 class="mb-4">Your ultimate guide to the world's best destinations!</h5>
                                <% if( isLoggedIn ){ %>
                                    <a class="btn btn-outline-light btn-lg m-2" href="/locations" role="button"
                                        rel="nofollow">Check locations
                                    </a>
                                    <% } %>
                                        <% if( !isLoggedIn ){ %>
                                            <a class="btn btn-outline-light btn-lg m-2" href="/login" role="button"
                                                rel="nofollow" target="_self">Sign up</a>
                                            <a class="btn btn-outline-light btn-lg m-2" href="/login" target="_self"
                                                role="button">Log
                                                in</a>
                                            <% } %>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Single item -->
                <div class="carousel-item">
                    <div class="mask" style="
              background: linear-gradient(
                45deg,
                rgba(29, 236, 197, 0.7),
                rgba(91, 14, 214, 0.7) 100%
              );
            ">
                        <div class="d-flex justify-content-center align-items-center h-100">
                            <div class="text-white text-center">
                                <h1 class="mb-3">Where adventure meets affordability</h1>
                                <h5 class="mb-4">Explore more, worry less with our travel expertise</h5>
                                <% if( isLoggedIn ){ %>
                                    <a class="btn btn-outline-light btn-lg m-2" href="/budget" role="button"
                                        rel="nofollow">
                                        Budget Tracker
                                    </a>
                                    <% } %>
                                        <% if( !isLoggedIn ){ %>
                                            <a class="btn btn-outline-light btn-lg m-2" href="/login" role="button"
                                                rel="nofollow" target="_self">Sign up</a>
                                            <a class="btn btn-outline-light btn-lg m-2" href="/login" target="_self"
                                                role="button">Log
                                                in</a>
                                            <% } %>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Inner -->

        <!-- Controls -->
        <a class="carousel-control-prev" href="#introCarousel" role="button" data-mdb-slide="prev">
            <span class="fa fa-chevron-left fa-2x" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#introCarousel" role="button" data-mdb-slide="next">
            <span class="fas fa-chevron-right fa-2x" aria-hidden="true"></span>
        </a>
        </div>
        <!-- Carousel wrapper -->
    </header>
    <!--Main Navigation-->
    <!-- MDB -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.2.0/mdb.min.js"></script>
    <!-- Custom scripts -->
    <script type="text/javascript" src="js/script.js"></script>

</body>

</html>