{% extends 'base.template.html' %}
{% load staticfiles %}
{% block title %}Login{% endblock %}
{% block content %}
    <div class="content col-md-offset-6">
      <div class="jumbotron">
        <form id="form" action="{% url 'login' %}" method="post">
        {% csrf_token %}
          <div class="text-center">
            <label class="text-primary control-label" for="{{ form.email.auto_id }">Usuario</label>
          </div>
          <div class="form-group has-feedback {% if form.usuario.errors %}has-error{% endif %}">
            {{ form.usuario }}
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
            {% include 'base.forms.errors.html' with form_errors=form.usuario.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="text-center">
            <label class="text-primary">Contraseña</label>
          </div>
          <div class="form-group has-feedback {% if form.usuario.errors %}has-error{% endif %}">
            {{ form.contrasena }}
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            {% include 'base.forms.errors.html' with form_errors=form.usuario.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
          </div>
          <div class="row text-center">
            <a href="#">¿Olvido su contraseña?</a> |
            <a href="{% url 'register' %}">Registrarse</a>
          </div>
          <div class="row">
            <div class="col-xs-8">
              <div class="checkbox icheck">
                <label id="color_gray">
                {{form.remember_me}}
                {{form.remember_me.label}}
                </label>
              </div>
            </div>
            <div class="col-xs-12">
              <label class="text-primary">{{form.captcha.label}}</label>
              <div class="form-group has-feedback {% if form.usuario.errors %}has-error{% endif %}">
                {{form.captcha}}
                <button class="js-captcha-refresh">
                  <span class="glyphicon glyphicon-refresh" data-toggle="tooltip" title="Presione para recargar la imagen del captcha"></span>
                </button>
              </div>
            </div>
            <div class="col-xs-4">
              <button type="submit" class="btn btn-primary btn-block btn-flat">Entrar</button>
            </div>
          </div>
        </form>
      </div>
    </div>
{% endblock %}