{% extends 'base.html' %}

{% block body %}
<!-- Login Section -->
<section class="section section-padding">
    <div class="container">
        <div class="columns is-mobile is-multiline is-centered">
            <div class="card">
                <div class="card-header">
                    <div class="card-header-title">
                        <h1 class="title">{{ title }}</h1>
                    </div>
                </div>
                <div class="card-content">
                    {% with messages = get_flashed_messages() %}
                    {% for message in messages %}
                    {{ flash(title='Error - Registration Error', text=formerror, color='is-danger') }}
                    {% endfor %}
                    {% endwith %}
                    
                    {% for formerror in form.username.errors %}
                    {{ flash(title='Error - Username', text=formerror, color='is-danger') }}
                    {% endfor %}
                    
                    {% for formerror in form.email.errors %}
                    {{ flash(title='Error - Email', text=formerror, color='is-danger') }}
                    {% endfor %}

                    {% for formerror in form.password.errors %}
                    {{ flash(title='Error - Password', text=formerror, color='is-danger') }}
                    {% endfor %}
                    {% for formerror in form.password2.errors %}
                    {{ flash(title='Error - Repeat Password', text=formerror, color='is-danger') }}
                    {% endfor %}
                    <!-- Sign-in Form-->
                    <form action="" method="post" novalidate>
                        {{ form.hidden_tag() }}
                        <!-- Username Field -->
                        <div class="field">
                            {{ form.username.label }}
                            <p class="control has-icons-left">
                                {{ form.username(size=32, class_="input", placeholder="Username") }}
                                <span class="icon is-small is-left">
                                    <i class="fas fa-user"></i>
                                </span>
                            </p>
                        </div>
                        <!-- Email Field -->
                        <div class="field">
                            {{ form.email.label }}
                            <p class="control has-icons-left">
                                {{ form.email(size=64, class_="input", placeholder="Email Address") }}
                                <span class="icon is-small is-left">
                                    <i class="fas fa-envelope"></i>
                                </span>
                            </p>
                        </div>
                        <!-- Password Field -->
                        <div class="field">
                            {{ form.password.label }}
                            <p class="control has-icons-left">
                                {{ form.password(size=32, class_="input", placeholder="Password") }}
                                <span class="icon is-small is-left">
                                    <i class="fas fa-lock"></i>
                                </span>
                            </p>
                        </div>
                        <!-- Password2 Field -->
                        <div class="field">
                            {{ form.password2.label }}
                            <p class="control has-icons-left">
                                {{ form.password2(size=32, class_="input", placeholder="Repeat Password") }}
                                <span class="icon is-small is-left">
                                    <i class="fas fa-lock"></i>
                                </span>
                            </p>
                        </div>
                        <!-- Checkbox/Button Field -->
                        <div class="columns is-mobile is-vcentered is-centered">
                            <div class="column is-2"></div>
                            <!-- Submit Button Field -->
                            <div class="column is-4">
                                <div class="field">
                                    <div class="control">
                                        {{ form.submit(class_="button is-success") }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Login Section -->
{% endblock body %}