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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Find a Friendo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
            <div class="container">
                <a class="navbar-brand" href="/">Friendo</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-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 mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="/">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/search">Search</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Contact</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li class="nav-item d-sm-none">
                            <a class="nav-link" href="/register">Sign up</a>
                        </li>
                        <li class="nav-item d-sm-none">
                            <a href="/login" class="nav-link">Login</a>
                        </li>
                        <li class="nav-item dropdown d-none d-sm-block">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">Login</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <form class="px-3 py-3" action="/login" method="POST">
                                        <div class="mb-3 text-center">
                                            <label for="dropdownEmail" class="form-label">Email address</label>
                                            <input type="email" class="form-control rounded-pill" id="dropdownEmail"
                                                name="email" required placeholder="email@example.com" />
                                        </div>
                                        <div class="mb-3 text-center">
                                            <label for="dropdownPassword" class="form-label">Password</label>
                                            <input type="password" class="form-control rounded-pill"
                                                id="dropdownPassword" name="password" required placeholder="password" />
                                        </div>
                                        <div class="d-flex justify-content-center mb-3">
                                            <button type="submit" class="btn btn-primary loginPopupButton">
                                                Log in
                                            </button>
                                        </div>
                                        <div class="text-center">
                                            <span class="mb-1 d-block text-break">Don't have an account?</span>
                                            <a class="" href="/register">You can sign up instead</a>
                                        </div>
                                    </form>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <div class="container">
            <div class="text-center">
                <h1 class="text-danger text-uppercase fs-3 my-4">Sign in to see all available users.</h1>
            </div>
        </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
        integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
        integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
        crossorigin="anonymous"></script>
</body>

</html>