{% extends "layout.html" %}
{% block content %}
<div class="container-fluid" style="background-image: url('static/uploads/bg_image_1.jpg'); background-attachment: fixed; height: 89.7vh">
    <div class="row">
        <br><br>
    </div>
    <div class="row">
        <div class="col-md-3.5">
        </div>
        <div class="container rounded-3 border border-secondary p-4 col-md-5 bg-white shadow-lg">
            <h2>Login</h2>
            <br>
            <form class="form-group" action="{{ url_for('login') }}" method="post">
                {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                {% for category, message in messages %}
                <div class="alert alert-{{category}} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                {% endfor %}
                {% endif %}
                {% endwith %}
                <div class="form-floating">
                    <input type="text" class="shadow form-control has-validation " name="email" placeholder="Email"
                        id="email" required>
                    <label for="email">Email</label>
                </div>
                <div class="invalid-tooltip">
                    Please enter valid username.
                </div>
                <br>
                <div class="form-floating">
                    <input type="password" class="shadow form-control" name="password" placeholder="Password"
                        id="password" required>
                    <label for="password">Password</label>
                </div>
                <br>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" onclick="myFunction()">
                    <label class="form-check-label" for="flexCheckDefault">
                        Show Password
                    </label>
                </div>
                <br>
                <button type="submit" class="btn btn-primary">Login</button>
            </form>
            <br>
            <div class="border-top pt-3">
                <small class="text-muted">
                    Don't have an account? <a class="ml-2" href="{{ url_for('register') }}">Register now</a>
                </small>
            </div>
        </div>

        <div class="col-md-3.5">
        </div>
    </div>
    <div class="row">
        <br><br>
    </div>
</div>
<script>
    function myFunction() {
        var x = document.getElementById("password");
        if (x.type === "password") {
            x.type = "text";
        } else {
            x.type = "password";
        }
    }
</script>
{% endblock %}