{% extends "base_template.html" %}

{% block title %}Sign up{% endblock %}

{% block content %}

    <h1 class="h2 mb-3"><b>Sign</b> Up</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.name.label(class="form-label") }} *
                            {{ form.name(class="form-control",placeholder="Enter name") }}
                            {% for error in form.name.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.surname.label(class="form-label") }} *
                            {{ form.surname(class="form-control",placeholder="Enter surname") }}
                            {% for error in form.surname.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.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-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">

                    <div class="col-lg-6 col-12">

                        {% if error %}

                            <div class="mt-3">
                                <p style="color: red;"><strong>Error:</strong> {{ error }}
                            </div>

                        {% endif %}

                    </div>

                </div>

                <div class="row">

                    <div class="mt-3">
                        <div class="col-lg-6 col-12">
                            Already an account? <a href="{{ url_for('auth.login') }}">Login</a>
                        </div>
                    </div>

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

                </div>

            </form>

        </div>
    </div>

{% endblock %}