{% extends 'base.html' %}

{% block content %}
<div class="container">
    <form action="" method="post">
        {% csrf_token %}
        <div class="row mb-3 justify-content-center">
         <div class="col-sm-5">
            <label for="{{form.username.id_for_label}}">Username</label>
            <div class="input-group has-validation">
                <span class="input-group-text" id="username_prepend">@</span>
                <input type="text" class="form-control{% if form.username.errors or form.non_field_errors %} is-invalid{% endif %}" id="{{form.username.id_for_label}}" name="{{form.username.name}}" aria-describedby="username_prepend validationServerUsernameFeedback" required>
                <div id="validationServerUsernameFeedback" class="invalid-feedback">
                    {% for msg in form.username.errors %}
                        {{msg}}
                    {% endfor %}
                </div>
            </div>
            </div>
        </div>
        <div class="row mb-3 justify-content-center">
            <div class="col-sm-5">
                <label for="{{form.password.id_for_label}}">Password</label>
                <div class="input-group has-validation">
                    <input type="password" class="form-control{% if form.password.errors or form.non_field_errors %} is-invalid{% endif %}" name="{{form.password.name}}" id="{{form.password.id_for_label}}" aria-describedby="validationPassword"required>
                <div id="validationPassword" class="invalid-feedback">
                    {% for msg in form.password.errors %}
                    {{msg}}
                    {% endfor %}
                </div> 
                </div>
            </div>
        </div>
        <div class="row mb-3 justify-content-center">
            {% if form.non_field_errors %}
            {% for error in form.non_field_errors %}
            <p class="text-danger text-center">{{ error }}</p>
            {% endfor %}
            {% endif %}
        </div>
         <div class="row mb-3 justify-content-center">
            <div class="col-sm-5">
                <input class="btn btn-primary mb-3 px-4" type="submit" value="Login">
            </div>
        </div>
    </form>
</div>
{% endblock content %}