{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Multimail</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static 'multimail/css/simple-sidebar.css' %}" rel="stylesheet">
    <link href="{% static "fontawesome/css/all.min.css" %}" rel="stylesheet" type="text/css"/>
</head>

<body>

<div class="container" style="height:100vh;">
    <div class="row h-100 justify-content-center align-items-center">
        <div class="card col-6">
            <article class="card-body">
                <h4 class="card-title text-center mb-4 mt-1">Sign in</h4>
                <hr>
                {% if form.non_field_errors %}
                    <div class="alert alert-danger" role="alert">
                        <ul>
                            {% for error in form.non_field_errors %}
                                <li>{{ error|escape }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
                <form method="POST">{% csrf_token %}
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"> <i class="fa fa-user"></i> </span>
                            </div>
                            <input id="{{ form.username.id_for_label }}" name="{{ form.username.html_name }}"
                                   class="form-control" placeholder="Email or login" type="text" requird>
                        </div> <!-- input-group.//-->
                        {% if form.username.errors %}
                            <p class="text-danger text-center">
                                {% for error in form.username.errors %}
                                    {{ error|escape }}<br>
                                {% endfor %}
                            </p>
                        {% endif %}
                    </div> <!-- form-group// -->
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
                            </div>
                            <input id="{{ form.password.id_for_label }}" name="{{ form.password.html_name }}"
                                   class="form-control" placeholder="******" type="password" required>
                        </div> <!-- input-group.// -->
                        {% if form.password.errors %}
                            <p class="text-danger text-center">
                                {% for error in form.password.errors %}
                                    {{ error|escape }}<br>
                                {% endfor %}
                            </p>
                        {% endif %}
                    </div> <!-- form-group// -->
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block"> Login</button>
                    </div> <!-- form-group// -->
                    <!--p class="text-center"><a href="#" class="btn">Forgot password?</a></p-->
                </form>
            </article>
        </div>
    </div>
</div>
</body>

</html>