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

    <head>
        <%- include('../head'); %>

    </head>

    <body>
        <%- include('../backHeader'); %>

            <!-- Background image -->
            <div id="intro" class="bg-image" style="background-image: url('/img/nasa-Q1p7bh3SHj8-unsplash.jpg'); 
                        height: 100vh;">

                <div class="container">
                    <div class="d-flex justify-content-center align-content-center" data-aos="zoom-in-up">
                        <div class="col-md-6">
                            <div class="card p-5 shadow-4" style="margin-top: 150px;">

                                <h2 class="py-4">Login</h2>
                                <form>
                                    <!-- Email input -->
                                    <div class="form-outline mb-4">
                                        <input type="email" id="form1Example1" class="form-control" />
                                        <label class="form-label" for="form1Example1">Email address</label>
                                    </div>

                                    <!-- Password input -->
                                    <div class="form-outline mb-4">
                                        <input type="password" id="form1Example2" class="form-control" />
                                        <label class="form-label" for="form1Example2">Password</label>
                                    </div>

                                    <!-- 2 column grid layout for inline styling -->
                                    <div class="row mb-4">
                                        <div class="col d-flex justify-content-center">
                                            <!-- Checkbox -->
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="form1Example3" checked />
                                                <label class="form-check-label" for="form1Example3"> Remember me
                                                </label>
                                            </div>
                                        </div>

                                        <div class="col">
                                            <!-- Simple link -->
                                            <a href="#!">Forgot password?</a>
                                        </div>
                                    </div>

                                    <!-- Submit button -->
                                    <a href="/dashboard" class="btn btn-primary btn-block">Sign in</a>
                                    <!-- <button type="submit" class="btn btn-primary btn-block">Sign in</button> -->
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <%- include('../footer'); %>
    </body>


</html>