{% extends "base_template.html" %}

{% block title %}Login{% endblock %}

{% block content %}

<h1 class="h2 mb-3"><b>Login</b></h1>

<div class="row">
    <div class="col-12">

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="mt-3">
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }}">{{ message }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}

        <form action="" method="post" novalidate>
                    {{ form.hidden_tag() }}

                    <div class="row">

                        <div class="col-md-6 col-lg-6 col-xs-12">
                            <div class="mb-3">
                                {{ form.email.label(class="form-label") }}
                                {{ form.email(class="form-control",placeholder="Enter email") }}
                                {% for error in form.email.errors %}
                                <span style="color: red;">{{ error }}</span>
                                {% endfor %}
                            </div>
                        </div>

                    </div>


                    <div class="row">

                        <div class="col-md-6 col-lg-6 col-xs-12">
                            <div class="mb-3">
                                {{ form.password.label(class="form-label") }}
                                {{ form.password(class="form-control",placeholder="Enter password") }}
                                {% for error in form.password.errors %}
                                <span style="color: red;">{{ error }}</span>
                                {% endfor %}
                            </div>
                        </div>

                    </div>

                    <div class="row">

                        <div class="col-md-6 col-lg-6 col-xs-12">
                            <div class="mb-2">
                                {{ form.remember_me(class="form-check-input") }}
                                {{ form.remember_me.label(class="form-check-label") }}
                            </div>
                        </div>

                    </div>

                    <div class="row">

                        <div class="col-lg-6 col-12 d-flex justify-content-between align-items-center">
                            {{ form.submit(class="btn btn-primary me-3") }} 
                        </div>

                    </div>

                    <div class="row">

                        {% if error %}

                        <div class="mt-3 col-lg-6 col-12">
                            <span style="color: red;">{{ error }}</span>
                        </div>

                        {% endif %}

                    </div>

                    <div class="row">

                        <div class="mt-3">
                            <div class="col-lg-6 col-12">
                                Don't have an account? <a href="{{ url_for('auth.show_signup_form') }}">Sign up!</a>
                            </div>
                        </div>

                        {% for hook in get_template_hooks("auth.login.form_footer") %}
                            {{ hook() | safe }}
                        {% endfor %}

                    </div>
                </form>

    </div>
</div>


{% endblock %}