{% extends "layout.html" %}

{% block header_meta_additional %}
{% endblock header_meta_additional %}

{% block header_css_additional %}
{% endblock header_css_additional %}

{% block header_scripts_additional %}
{% endblock header_scripts_additional %}


{% block body_header_additional %}
{% endblock body_header_additional %}

{% block body_content_additional %}
        <div class="row">
            <div class="col">
            <!-- <div class="col justify-content-center text-center"> -->
                <form action="" method="POST">
                    {{ form.hidden_tag() }}
                    <fieldset class="form-group">
                        <legend class="border-bottom mb-4">Create Account</legend>
                        <div class="form-group">
                            {{ form.username.label(class="form-control-label") }}

                            {% if form.username.errors %}
                                {{ form.username(class="form-control form-control-sm is-invalid", autocomplete="off", autofocus=true) }}
                                <div class="invalid-feedback">
                                    {% for error in form.username.errors %}
                                        <span class="">{{ error }}</span>
                                    {% endfor %}
                                </div>
                            {% else %}
                                {{ form.username(class="form-control form-control-sm", autocomplete="off", autofocus=true) }}
                            {% endif %}
                        </div>
                        <div class="form-group">
                            {{ form.email.label(class="form-control-label") }}

                            {% if form.email.errors %}
                                {{ form.email(class="form-control form-control-sm is-invalid", autocomplete="off") }}
                                <div class="invalid-feedback">
                                    {% for error in form.email.errors %}
                                        <span class="">{{ error }}</span>
                                    {% endfor %}
                            {% else %}
                                {{ form.email(class="form-control form-control-sm", autocomplete="off") }}
                            {% endif %}
                        </div>
                        <div class="form-group">
                            {{ form.password.label(class="form-control-label") }}

                            {% if form.password.errors %}
                                {{ form.password(class="form-control form-control-sm is-invalid", autocomplete="off") }}
                                <div class="invalid-feedback">
                                    {% for error in form.password.errors %}
                                        <span class="">{{ error }}</span>
                                    {% endfor %}
                            {% else %}
                                {{ form.password(class="form-control form-control-sm", autocomplete="off") }}
                            {% endif %}
                        </div>
                        <div class="form-group">
                            {{ form.confirm_password.label(class="form-control-label") }}

                            {% if form.confirm_password.errors %}
                                {{ form.confirm_password(class="form-control form-control-sm is-invalid", autocomplete="off") }}
                                <div class="invalid-feedback">
                                    {% for error in form.confirm_password.errors %}
                                        <span class="">{{ error }}</span>
                                    {% endfor %}
                            {% else %}
                                {{ form.confirm_password(class="form-control form-control-sm", autocomplete="off") }}
                            {% endif %}
                        </div>
                    </fieldset>
                    <div class="form-group justify-content-right text-right">
                        {{ form.submit(class="btn btn-success") }}
                    </div>
                </form>
                <div class="border-top pt-3">
                    <small>Already Have An Account? <a class="ml-2" href="{{ url_for('login') }}">Login!</a></small>
                </div>
            </div>
        </div>
{% endblock body_content_additional %}

{% block body_footer_additional %}
{% endblock body_footer_additional %}


{% block body_scripts_additional %}
{% endblock body_scripts_additional %}