{% extends 'private_template.html' %}
{% load static %}

{% block titulo %}Makarios | Bem Aventurados em Cristo{% endblock %}

{% block header %}
    {% include 'private_header.html' %}
{% endblock %}

{% block content %}
<div class="central_pane p-0 pt-5">
    <div class="card col-md-8 mx-auto mt-5 p-0">
        <div class="card-header m-0 main-bg-purple">
            <div class="card-tools ml-auto">
                <button type="button" class="btn btn-tool text-white" data-card-widget="collapse">
                    <i id="icon" class="fas fa-minus"></i>
                </button>
            </div>
        </div>
        <div class="card-body p-2">
            <div class="content row">
                <div class="col-md row m-0">
                    <div id="card-panel" class="card col-md card-main">
                        <div class="col-md mt-3">            
                            {% if form.errors %}
                                <div class="alert alert-danger">
                                Corrija os erros abaixo.
                                </div>
                            {% endif %}
                        
                            <form method="post" action="{% url 'account_signup' %}">
                                {% csrf_token %}
                                <input type="hidden" name="next" value="{{ next }}">

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <input class="form-control" type="text" name="first_name" value="{{ form.first_name.value|default_if_none:'' }}" placeholder="Nome" maxlength="30" required>
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <span class="fas fa-user"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <input class="form-control" type="text" name="last_name" value="{{ form.last_name.value|default_if_none:'' }}" placeholder="Sobrenome" maxlength="30" required>
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <span class="fas fa-user"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <input class="form-control" type="password" name="password1" placeholder="Senha" autocomplete="new-password" maxlength="128" required id="password1">
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <span class="fas fa-key"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">                    
                                        <div class="input-group mb-3">
                                            <input class="form-control" type="password" name="password2" placeholder="Conferir Senha" autocomplete="new-password" maxlength="128" required id="password2">
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <span class="fas fa-lock"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <input class="form-control" type="email" name="email" placeholder="Email" value="{{ form.email.value|default_if_none:'' }}" autocomplete="email" maxlength="320" required id="email">
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <span class="fas fa-envelope"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">                    
                                        <div class="input-group mb-3">
                                            <select class="form-control" name="tipo_usuario" required>
                                                <option value="">-------</option>
                                                {% for value, label in form.role.field.choices %}
                                                    <option value="{{ value }}" {% if form.role.value == value %}selected{% endif %}>{{ label }}</option>
                                                {% endfor %}
                                            </select>
                                            <div class="input-group-append">
                                                <div class="input-group-text pr-2">
                                                    <span class="fas fa-tags"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            
                                {% if redirect_field_value %}
                                    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}">
                                {% endif %}
                            
                                <div class="row justify-content-between mt-5 p-2">
                                    <div class="col-md-4">
                                        <a href="{{ next|default:'/home/' }}" class="btn btn-block">Voltar</a>
                                    </div>
                                    <div class="col-md-4 offset-md-4">
                                        <button type="submit" class="btn btn-block">Confirmar Edição</button>
                                    </div>
                                </div>
                            </form>     
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}