{% extends 'base.html' %}

{% block metas %}
    {{ super() }}
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
{% endblock %}

{% block nav %}{% endblock %}

{% block content %}
    <div class="container">
        <br>
        <a href="{{ url_for('index') }}">&larr; Return</a>
        <h1 class="display-4">Bootstrap Style Form</h1>
        <hr>
        <form method="post">
            {{ form.csrf_token }}
            <div class="form-group">
                {{ form.username.label }}
                {% if form.username.errors %}
                    {{ form.username(class='form-control is-invalid') }}
                    {% for error in form.username.errors %}
                        <div class="invalid-feedback">
                            {{ error }}
                        </div>
                    {% endfor %}
                {% else %}
                    {{ form.username(class='form-control') }}
                {% endif %}
            </div>
            <div class="form-group">
                {{ form.password.label }}
                {% if form.password.errors %}
                    {{ form.password(class='form-control is-invalid') }}
                    {% for error in form.password.errors %}
                        <div class="invalid-feedback">
                            {{ error }}
                        </div>
                    {% endfor %}
                {% else %}
                    {{ form.password(class='form-control') }}
                {% endif %}
            </div>
            <div class="form-check">
                {{ form.remember(class='form-check-input') }}
                {{ form.remember.label }}
            </div>
            {{ form.submit(class='btn btn-primary') }}
        </form>
    </div>
{% endblock %}

{% block footer %}{% endblock %}