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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="stylesheets/Common/common.css">
    <link rel="stylesheet" href="stylesheets/Login/login.css">
</head>

<body>
    <div class="navbar-container">

        <div class="logo-container">
            <a href="/">
                <img class="logo" src="images/homepage/icons/logo.png">
            </a>
        </div>

        <div class="navbar-button-container">
            <a href="/"><button class="navbar-item">Home</button>
                <a href="/dashboard"><button class="navbar-item" href="/">Forecast</button></a>
        </div>

        <div class="login-signup-container">
            <form id="form">
                <button class="login" formaction="/login" id="loginButton">login</button>
                <button class="sign-up" formaction="/signup" id="signupButton">sign up</button>
            </form>
        </div>
    </div>

    <div class="form-container">

        <div class="img-slider">
            <img src="images/homepage/website_overview/astronaut.svg" id="img1">
            <img src="images/homepage/website_overview/rocket.svg" id="img2" class="hidden">
            <img src="images/homepage/website_overview/umbrella.svg" id="img3" class="hidden">
            <img src="images/homepage/website_overview/notification.svg" id="img4" class="hidden">
        </div>

        <div class="login-form-container">
            <div class="login-form-wrapper">
                <div class="icon-holder">
                    <div class="icon-place">
                        <div class="wrapper">
                            <img src="images/homepage/icons/wind.png" style="width: 70px;height:70px;">
                        </div>
                    </div>
                </div>
                <div style="line-height: 10px;">

                    <p class="login-title"> Welcome back!</p>
                    <p class="login-subtitle"> Log in to save cities, show stats
                        and more.</p>
                    <p class="login-subtitle"> Your data is kept safe.</p>
                </div>
                <form method="POST">
                    <div style="display: inline-block">
                        <input name="email" type="email" id="email" placeholder="Email"><br>
                        <input type="password" name="password" id="password" placeholder="Password"><br>
                        <div class="remind-me">
                            <p style="color: gray;font-size: 14px;"> Remember me</p>

                            <button formaction="/password-recovery" class="recover-password"
                                onclick="makeEmailRequired()">
                                Recover Password
                            </button>
                        </div>
                    </div>
                    <% if (found===true && activated===false) { %>
                        <p style="color:orange">Please activate your account</p>
                        <% }else if (found===false){ %>
                            <p style="color:red">Account not found</p>
                            <% } %>
                                <p></p>
                                <button class="log login-button" formaction="/login" onclick="makeFormRequired()">
                                    Login
                                </button>

                                <p style="margin-top: 30px;color:gray">Don't have an account? <a href="/signup"><span
                                            style="color: #3056BB;">Sign up
                                            now.</span></p></a>
                </form>
            </div>
        </div>


    </div>
    <script>
        setInterval(switchImages, 2850); // 3000 milliseconds = 3 seconds

        function switchImages() {
            //var currentDot = document.querySelector(".active");
            //var nextDot = currentDot.nextElementSibling;

            var currentImage = document.querySelector("img:not(.hidden):not(.logo)");

            var nextImage = currentImage.nextElementSibling;

            //if (!nextDot) {
            //    nextDot = document.getElementById("firstDot");
            //}
            if (!nextImage) {
                nextImage = document.getElementById("img1");
            }

            //currentDot.classList.remove("active");
            //nextDot.classList.add("active");

            currentImage.classList.add("hidden");
            nextImage.classList.remove("hidden");
        }

        function makeEmailRequired() {
            document.getElementById("email").required = true;
            document.getElementById("password").required = false;
        }
        function makeFormRequired() {
            document.getElementById("email").required = true;
            document.getElementById("password").required = true;

        }
    </script>
</body>

</html>