{% extends "base_generic.html" %}

{% block title %} Sign Up {% endblock %}

{% block content %}

    {% if message %}<h1>{{ message }}</h1> {% endif %}

    <section class="vh-100 bg-image main-container">
        <div class="mask d-flex align-items-center h-100 gradient-custom-3">
            <div class="container h-100">
                <div class="row d-flex justify-content-center align-items-center h-100">
                    <div class="col-12 col-md-9 col-lg-7 col-xl-6">
                        <div class="card" style="border-radius: 15px;">
                            <div class="card-body p-5">
                                <h2 class="text-uppercase text-center mb-5">Login</h2>

                                <form action="" method="post">
                                    {% csrf_token %}
                                    {{ form.non_field_errors }}

                                    <div class="form-outline mb-4">

                                        <label class="form-label" for="{{ form.username.id_for_label }}">Your
                                            username</label>
                                        <input class="form-control form-control-lg"
                                               id="{{ form.username.id_for_label }}"
                                               name="username" type="text"/>
                                        {{ form.username.errors }}

                                    </div>


                                    <div class="form-outline mb-4">

                                        <label class="form-label"
                                               for="{{ form.password.id_for_label }}">Password</label>
                                        <input class="form-control form-control-lg"
                                               id="{{ form.password.id_for_label }}"
                                               name="password" type="password"/>
                                        {{ form.password.errors }}

                                    </div>


                                    <div class="d-flex justify-content-center">
                                        <button class="btn btn-success btn-block btn-lg gradient-custom-4 text-body"
                                                type="submit">
                                            Login
                                        </button>
                                    </div>

                                    <p class="text-center text-muted mt-5 mb-0">Don't have an account yet? <a
                                            class="fw-bold text-body" href="{% url 'signup' %}"><u>Register here</u></a>
                                    </p>

                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


{% endblock %}