{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="{% static '/accounts/css/login.css' %}">
    <title>Login</title>
</head>
<body>
    <div class="container background-login">
        <div class="right-part">
           {% comment %} <img src="{% static 'accounts/media/loginlocker.png' %}" /> {% endcomment %}
        </div>
        <div class="left-part">
            <div class="box-header">
                <h3>X-SYS</h3>
                <img src="{% static '/assets/x-phy-new-logo-white.png' %}" alt="" id="logo"/>
                <div>
                    <span class="Encryption-title">>.  Encryption</span>
                    <span class="email-details">>.  Support</span>
                </div>
            </div>
           <div class="login-title-box">
            <h2 class="login-text">Login</h2>
            <p class="login-desc">Don't have an account yet? <a href="{% url 'signup' %}">Sign up</a></p>
           </div>
            <form method="post" class="login-form">
            <!-- <form method="post" action="{% url 'login' %}" class="login-form"></form> -->
                {% csrf_token %}
                <div class="email-block">
                    <div>
                        <span class="email-details">>.  Email</span>
                        <span class="email-details">...</span>
                    </div>
                    <input id="id_email" name="email" type="text" required>                
                </div>
                <div class="password-block">
                    <div>
                        <span class="email-details">>.  Password</span>
                        <span class="email-details">...</span>
                    </div>
                    <input type="password" name='password' id="id_password" required>
                </div>
               <div class="form-footer">
                <button class="login-button" type="submit">>. Login</button>
                <p class=""><a href="{% url 'signup' %}">Forgot Password?</a></p>
               </div>
               <div class="form-footer">
               
                <p class=""><a href="{% url 'Login_with_Device' %}">Add device with login</a></p>
               </div>
               <script>
                document.getElementsByClassName("login-form").value=res
                alert(res)
               </script>
            </form>
            
            {% if invalid_login %}
            <p class="error-message">Invalid email or password. Please try again.</p>
            {% endif %}
        </div>
    </div>
</body>
</html>