<%- include('./partials/header_head.ejs') -%>

        <link rel="stylesheet" href="/login/login.css">
        <div onload="particles()" class="wrapper fadeInDown">
            <div id="formContent">
                <!-- Tabs Titles -->

                <!-- Icon -->
                <div class="fadeIn first">
                    <a href="/"> <img id="form-logo" class="" src="/images/futuretech.png" alt=""></a>
                </div>

                <!-- Login Form -->
                <form id="login_form" method="POST" action="/login">
                    <input type="text" id="login" class="fadeIn second" name="username" placeholder="login">
                    <input type="password" id="password" class="fadeIn third" name="password" placeholder="password">
                    <br><a id="forgot_pass_link" href="/reset/password" >forgot password?</a>
                    <br><input type="submit" class="fadeIn fourth" value="Log In">
                    <a class="btn fadeIn fourth" href="/register">Register</a>
                </form>

                <% if(locals.status){ %>
                    <div class="alert alert-danger" role="alert">
                        Wrong credentials! please verify
                    </div>
                    <% } %>

                    <% if(messages.info){ %>
                        <div class="alert alert-info" role="alert">
                            <%= messages.info %>
                        </div>
                      <% }%>

            </div>
        </div>


        <div id="particle-container"></div>

        <script src="/login/particles.min.js"></script>
        <script src="/login/particles_options.js"></script>


        <%- include('./partials/footer.ejs') -%>