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

{% block title %}Signup{% endblock title %}

{% block content %}
<div class="col-md-10">
  <div class="card-group">
    <div class="card p-4">
      <div class="card-body">
        <h1>Cadastre-se</h1>
        <p class="text-muted">Crie sua conta.</p>

        <form action="." method="POST">
          {% csrf_token %}
          {% for field in form.visible_fields %}
            <div class="form-group{% if field.errors %} has-error {% endif %}">
              <label>
                {% if field.field.required %}
                  <span class="required">{{ field.label }} </span>
                {% else %}
                  {{ field.label }}
                {% endif %}
              </label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    {% if field.name == 'email' %}
                      @
                    {% elif field.name == 'password1' or field.name == 'password2' %}
                      <i class="icon-lock"></i>
                    {% elif field.name == 'username' %}
                      <i class="icon-user"></i>
                    {% else %}
                      <i class="icon-emotsmile"></i>
                    {% endif %}
                  </span>
                </div>
                {% render_field field class="form-control" placeholder=field.label %}
              </div>
              <span class="text-muted">{{ field.help_text }}</span>
              {% for error in field.errors %}
                <br> <span class="text-danger">{{ error }}</span>
              {% endfor %}
            </div>
          {% endfor %}
          
          <button class="btn btn-block btn-success" type="submit">Cadastrar</button>
        </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>Login</h2>
          <p>Faça login.</p>
          <a class="btn btn-primary active mt-3" href="{% url 'login' %}">Login</a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock content %}