<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='login.css') }}">
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='pass_eye.css') }}">

<!--    bootstrap alerts cdn-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


</head>
<body>
    <div class="login-container">
        <div class="login-form">
            <div class="logo">
                <img src="https://i.postimg.cc/qqcKmBGf/cognisun-logo-3.png" alt="Company Logo">
            </div>
            <h1>Welcome Back</h1>


            {% if msg %}
                <div class="alert alert-warning" role="alert">
                  {{ msg }}
                </div>
            {% else %}
                <p>Please log in to your account</p>
            {% endif %}

            <form action="/login" method="POST">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" id="username" name="username" placeholder="Enter your username" required>
                </div>
<!--                <div class="form-group">-->
<!--                    <label for="password">Password</label>-->
<!--                    <input type="password" id="password" name="password" placeholder="Enter your password" required>-->
<!--                </div>-->

                <div class="form-group">
                    <label for="password">Password</label>
                    <div class="password-container">
                        <input type="password" id="password" name="password" placeholder="Enter your password" required>
                        <span id="toggle-password" class="eye-icon">&#128065;</span> <!-- Unicode for the eye symbol -->
                    </div>
                </div>



                <button type="submit">Log In</button>
<!--                <p class="forgot-password"><a href="/forgot-password">Forgot your password?</a></p>-->
            </form>
<!--            <p class="signup-link">New here? <a href="/signup">Create an account</a></p>-->
        </div>
    </div>
</body>

<script>
    const togglePassword = document.getElementById('toggle-password');
    const passwordField = document.getElementById('password');

    togglePassword.addEventListener('mousedown', function () {
        passwordField.setAttribute('type', 'text'); // Show the password
    });

    togglePassword.addEventListener('mouseup', function () {
        passwordField.setAttribute('type', 'password'); // Hide the password
    });

    // For touch devices
    togglePassword.addEventListener('touchstart', function () {
        passwordField.setAttribute('type', 'text'); // Show the password
    });

    togglePassword.addEventListener('touchend', function () {
        passwordField.setAttribute('type', 'password'); // Hide the password
    });
</script>
</html>
