{% extends 'base/base.html' %}

{% block title %}
    Novo usuário
{% endblock %}

{% block content %}
<form method="post" action="{% url 'cadastrar_usuario' id_escola=escolas.Id_Escola %}">

    <div class="divided_bloc">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6">
                        {% csrf_token %}
                        <div class="form_dashboard row">
                            <h2>{{ escolas.Nome_Escola }}</h2>
                            <input type="hidden" name="idescola" id="idescola" value="{{ escolas.Id_Escola }}">
                            <div class="unicaform-dashboard col-lg-6">
                                <label for="nome">
                                    Nome
                                    <input type="text" name="nome" id="nome" required>
                                </label>
                            </div>
                            <div class="unicaform-dashboard col-lg-6">
                                <label for="unidade">
                                    Unidade
                                    <select name="unidade" id="unidade" required>
                                        <option selected disabled>---</option>
                                        {% for unidade in unidades %}
                                            <option value="{{ unidade.Id_Unidade }}">{{ unidade.Nome_Unidade }}</option>
                                        {% endfor %}
                                    </select>
                                </label>
                            </div>
                            <div class="unicaform-dashboard col-lg-12">
                                <label for="email">
                                    E-mail (o usuário precisa ter acesso ao e-mail para receber a senha)
                                    <input type="email" required name="email" id="email">
                                </label>
                            </div>
                            <div class="col-12">
                                {% if messages %}
                                    <div class="bubble_message">
                                        {% for message in messages %}
                                            {% if message.tags == 'error' %}
                                                <div class="error-message">{{ message }}</div>
                                            {% elif message.tags == 'success' %}
                                                <div class="success-message">{{ message }}</div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    
                </div>
                <div class="col-12 col-lg-6">
                    <div class="produtos-selection">
                        <div class="heading-produtos">
                            <h2>Selecione os produtos</h2>
                        </div>
                        <div class="flex-produtos">
                            <div class="row">
                                <div class="col-6 col-lg-4">
                                    <div class="unicafield-checkbox">
                                        <span>Crono<b>grid</b></span>
                                        <label class="switch">
                                            <input type="checkbox">
                                            <span class="slider round"></span>
                                          </label>
                                    </div>
                                </div>
                                <div class="col-6 col-lg-4">
                                    <div class="unicafield-checkbox">
                                        <span>Crono<b>grid</b></span>
                                        <label class="switch">
                                            <input type="checkbox">
                                            <span class="slider round"></span>
                                          </label>
                                    </div>
                                </div>
                                <div class="col-6 col-lg-4">
                                    <div class="unicafield-checkbox">
                                        <span>Crono<b>grid</b></span>
                                        <label class="switch">
                                            <input type="checkbox">
                                            <span class="slider round"></span>
                                          </label>
                                    </div>
                                </div>
                                <div class="col-6 col-lg-4">
                                    <div class="unicafield-checkbox">
                                        <span>Crono<b>grid</b></span>
                                        <label class="switch">
                                            <input type="checkbox">
                                            <span class="slider round"></span>
                                          </label>
                                    </div>
                                </div>
                                <div class="col-6 col-lg-4">
                                    <div class="unicafield-checkbox">
                                        <span>Crono<b>grid</b></span>
                                        <label class="switch">
                                            <input type="checkbox">
                                            <span class="slider round"></span>
                                          </label>
                                    </div>
                                </div>
                                <div class="col-6 col-lg-4">
                                    <div class="unicafield-checkbox">
                                        <span>Crono<b>grid</b></span>
                                        <label class="switch">
                                            <input type="checkbox">
                                            <span class="slider round"></span>
                                          </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="tabs_mathworks">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="mth1-tab" data-bs-toggle="tab" data-bs-target="#mth1" type="button" role="tab" aria-controls="home" aria-selected="true">Crono<b>grid</b></button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link disabled" id="mth2-tab" data-bs-toggle="tab" data-bs-target="#mth2" type="button" role="tab" aria-controls="home" aria-selected="false">Creative<b>cam</b></button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="mth1" role="tabpanel" aria-labelledby="mth1-tab">
                                <div class="permissions_blocx">
                                    <div class="row">

                                        <div class="col-6 col-lg-4 col-xl-2">
                                            <div class="gpt-box-permission">
                                                <div class="unica-permission permission__one">
                                                    <i></i>
                                                    <h3>
                                                        <span>Cadastro</span>
                                                        Turmas
                                                    </h3>
                                                    <div class="fieldinpt">
                                                        <label class="switch">
                                                            <input type="checkbox" value="1" name="1">
                                                            <span class="slider round"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-lg-4 col-xl-2">
                                            <div class="gpt-box-permission">
                                                <div class="unica-permission permission__one">
                                                    <i></i>
                                                    <h3>
                                                        <span>Cadastro</span>
                                                        Momentos
                                                    </h3>
                                                    <div class="fieldinpt">
                                                        <label class="switch">
                                                            <input type="checkbox" value="1" name="2">
                                                            <span class="slider round"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-lg-4 col-xl-2">
                                            <div class="gpt-box-permission">
                                                <div class="unica-permission permission__one">
                                                    <i></i>
                                                    <h3>
                                                        <span>Cadastro</span>
                                                        Dias
                                                    </h3>
                                                    <div class="fieldinpt">
                                                        <label class="switch">
                                                            <input type="checkbox" value="1" name="3">
                                                            <span class="slider round"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-lg-4 col-xl-2">
                                            <div class="gpt-box-permission">
                                                <div class="unica-permission permission__one">
                                                    <i></i>
                                                    <h3>
                                                        <span>Cadastro</span>
                                                        Matérias
                                                    </h3>
                                                    <div class="fieldinpt">
                                                        <label class="switch">
                                                            <input type="checkbox" value="1" name="4">
                                                            <span class="slider round"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-lg-4 col-xl-2">
                                            <div class="gpt-box-permission">
                                                <div class="unica-permission permission__one">
                                                    <i></i>
                                                    <h3>
                                                        <span>Cadastro</span>
                                                        Professores
                                                    </h3>
                                                    <div class="fieldinpt">
                                                        <label class="switch">
                                                            <input type="checkbox" value="1" name="5">
                                                            <span class="slider round"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-lg-4 col-xl-2">
                                            <div class="gpt-box-permission">
                                                <div class="unica-permission permission__one">
                                                    <i></i>
                                                    <h3>
                                                        <span>Cadastro</span>
                                                        Disponibilidade de turmas
                                                    </h3>
                                                    <div class="fieldinpt">
                                                        <label class="switch">
                                                            <input type="checkbox" value="1" name="6">
                                                            <span class="slider round"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-lg-4 col-xl-2">
                                            <div class="gpt-box-permission">
                                                <div class="unica-permission permission__one">
                                                    <i></i>
                                                    <h3>
                                                        <span>Cadastro</span>
                                                        Disponibilidade de professores
                                                    </h3>
                                                    <div class="fieldinpt">
                                                        <label class="switch">
                                                            <input type="checkbox" value="1" name="7">
                                                            <span class="slider round"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-lg-4 col-xl-2">
                                            <div class="gpt-box-permission">
                                                <div class="unica-permission permission__one">
                                                    <i></i>
                                                    <h3>
                                                        Rodar<br>Modelo
                                                    </h3>
                                                    <div class="fieldinpt">
                                                        <label class="switch">
                                                            <input type="checkbox" value="1" name="8">
                                                            <span class="slider round"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 col-lg-4 col-xl-2">
                                            <div class="gpt-box-permission">
                                                <div class="unica-permission permission__one">
                                                    <i></i>
                                                    <h3>
                                                        Visualizar<br>
                                                        relatório
                                                    </h3>
                                                    <div class="fieldinpt">
                                                        <label class="switch">
                                                            <input type="checkbox" value="1" name="9">
                                                            <span class="slider round"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <input type="hidden" name="qnt_permissoes" value="9">

                                        <div class="col-12">
                                            <div class="send_settings">
                                                <button type="submit">Cadastrar</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="mth2" role="tabpanel" aria-labelledby="mth2-tab">...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</form>
    
{% endblock %}