{% extends "base_login.html" %}
{% load static %}

{% block title %}Login{% endblock title %}

{% block content %}
<div class="col-md-8">
  <div class="card-group">
    <div class="card p-4">
      <div class="card-body">
        <h1>Login</h1>
        <!-- <p class="text-muted">Sign In to your account</p> -->

        {% if form.errors %}
          {% for error in form.non_field_errors %}
            <p class="alert alert-danger" role="alert"><span style="font-weight:bold">{{ error }}</span></p>
          {% endfor %}
        {% endif %}

        <form action="." method="POST">
          {% csrf_token %}
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">
                <i class="icon-user"></i>
              </span>
            </div>
            <input class="form-control" name="username" type="text" placeholder="Usuário" autofocus>
          </div>
          <div class="input-group mb-4">
            <div class="input-group-prepend">
              <span class="input-group-text">
                <i class="icon-lock"></i>
              </span>
            </div>
            <input class="form-control" name="password" type="password" placeholder="Senha">
          </div>
          <div class="row">
            <div class="col-4">
              <button class="btn btn-primary px-4" type="submit">Login</button>
            </div>
            <div class="col-8 text-right">
              <a class="btn btn-link px-0" href="">Esqueci minha senha</a>
            </div>
          </div>
        </form>

      </div>
    </div>
    <div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%; justify-content: center !important">
      <div class="card-body text-center" style="flex: none;">
        <div>
          <img src="{% static 'img/django-logo-negative.png' %}" alt="django-logo-negative.png" width="150px">
          <h2>Cadastre-se</h2>
          <p>Guia de autenticação do Django.</p>
          <a class="btn btn-primary active mt-3" href="{% url 'signup' %}">Cadastre-se</a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock content %}