{% extends "base.html" %}

{% block content %}
    <h2>Регистрация</h2>
    <form action="" method="post">
        {{ form.hidden_tag() }}
        {% if message %}
            <div class="row mb-3" style="margin-top: 20px">
                <div class="alert alert-danger" role="alert">
                    {{ message }}
                </div>
            </div>
        {% endif %}
        <div class="row mb-3">
            <div class="col-sm-2 col-form-label">
                {{ form.login.label }}
            </div>
            <div class="col-sm-10">
                {{ form.login(class="form-control", type="login") }}
                {% for error in form.login.errors %}
                <div class="alert alert-danger" role="alert">
                    {{ error }}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-sm-2 col-form-label">
                {{ form.password.label }}
            </div>
            <div class="col-sm-10">
                {{ form.password(class="form-control", type="password") }}
                {% for error in form.password.errors %}
                <div class="alert alert-danger" role="alert">
                    {{ error }}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-sm-2 col-form-label">
                {{ form.repeat_password.label }}
            </div>
            <div class="col-sm-10">
                {{ form.repeat_password(class="form-control", type="password") }}
                {% for error in form.repeat_password.errors %}
                <div class="alert alert-danger" role="alert">
                    {{ error }}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-sm-2 col-form-label">
                {{ form.name.label }}
            </div>
            <div class="col-sm-10">
                {{ form.name(class="form-control", type="name") }}
                {% for error in form.name.errors %}
                <div class="alert alert-danger" role="alert">
                    {{ error }}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-sm-2 col-form-label">
                {{ form.surname.label }}
            </div>
            <div class="col-sm-10">
                {{ form.surname(class="form-control", type="surname") }}
                {% for error in form.surname.errors %}
                <div class="alert alert-danger" role="alert">
                    {{ error }}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-sm-10 offset-sm-2">
                {{ form.remember_me() }}
                {{ form.remember_me.label }}
            </div>
        </div>
        <div class="">
            {{ form.submit(type="submit", class="btn btn-primary") }}
        </div>
    </form>
{% endblock %}
make this look more modern fully using bootstrap,but make sure you don't touch connections with backend