<!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/Sign-Up/signup.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="signup-form-container">

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

        <div class="signup-part">
            <div class="container">
                <div class="icon-section">
                    <div class="icon-container">
                        <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="signup-form-title"> Sign up</p>
                    <p class="signup-form-subtitle"> Register to save your favourite
                        cities,</p>
                    <p class="signup-form-subtitle"> get weather alerts and more!
                    </p>
                </div>
                <form action="/signup" method="POST" id="signUpForm">
                    <div style="display: inline-block">
                        <input name="email" type="email" id="email" class="signup-input" placeholder="Email"
                            onkeyup="checkEmail(this.value)"><br>
                        <input type="password" name="password" id="password" class="signup-input" placeholder="Password"
                            onkeyup="checkPassword(this.value), isEqualTo(document.getElementById('repeatPassword').value)"><br>
                        <div class="status-message-container">
                            <p class="status-message" id="pswStatus">
                                Password is weak. Please improve it. </p>
                        </div>
                    </div>
                    <input type="password" name="pswCheck" id="repeatPassword" class="signup-input" ;
                        placeholder="Repeat Password" onkeyup="isEqualTo(this.value)"><br>
            </div>
            <button class="log signup-button" id="signUpButton">
                Sign up
            </button>

            <% if (success=="ok" ){ %>
                <p style="margin-top: 30px;color: green;padding-left:50px;padding-right: 50px;"> Within 10 minutes,
                    activate your account by
                    clicking
                    the link you received in your email. </p>
                <% }else if (success=="failed" ){ %>
                    <p style="margin-top: 30px;color: orange;padding-left:50px;padding-right: 50px;"> You already have
                        an
                        account. Please login or
                        activate your email. </p>
                    <%}else if (success=="error" ){%>
                        <p style="margin-top: 30px;color: red;padding-left:50px;padding-right: 50px;"> Something went
                            wrong. Please try again. </p>
                        <% }%>
                            </form>
        </div>
    </div>


    </div>
    <script src="js/password_checker.js"></script>
    <script src="js/signup_slider.js"></script>

</body>

</html>