{% extends 'private_template.html' %}

{% block titulo %}Lista de Funcionários{% endblock %}

{% block navbar %}
    {% include 'admin_navbar.html' %}
{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row mb-3">
        <div class="col-md-10">
            <h3 class="title-color">Colaboradores da Gil Serrano</h3>
        </div>
        <div class="col-md-2">
            <a href="{% url 'criar_usuario' %}" class="btn btn-sm btn-align-left button-color">Novo Colaborador</a>
        </div>      
    </div>
        
    <div class="card px-3 pt-3">
        <!-- filtro -->
        <!-- <form method="get" class="form-inline mb-3">
            <label for="role" class="mr-2">Cargo:</label>
            <select name="role" id="role" class="form-control form-control-sm mr-2">
                <option value="">Todos</option>
                <option value="superadmin" {% if role_filter == 'superadmin' %}selected{% endif %}>Administrador</option>
                <option value="user" {% if role_filter == 'user' %}selected{% endif %}>Funcionário</option>
                <option value="client" {% if role_filter == 'client' %}selected{% endif %}>Morador</option>
            </select>
            <button type="submit" class="btn btn-sm button-color">Filtrar</button>
        </form> -->

        <!-- tabela -->
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>E-mail</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for u in usuarios %}
                <tr>
                    <td>{{ u.first_name }} {{ u.last_name }}</td>
                    <td>{{ u.email }}</td>
                    <td>Colaborador</td>
                    <td>
                        <a href="{% url 'editar_usuario_superadmin' u.pk %}">
                            <svg xmlns="http://www.w3.org/2000/svg" class="text-primary mx-4" width="18" height="18" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
                                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
                                <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/>
                            </svg>
                        </a>
                        <a href="{% url 'excluir_usuario_superadmin' u.pk %}">
                            <svg xmlns="http://www.w3.org/2000/svg" class="text-danger mx-4" width="18" height="18" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
                                <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
                            </svg>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <!-- paginação -->
        <!-- <nav>
            <ul class="pagination">
                {% if usuarios.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?{% if role_filter %}role={{ role_filter }}&{% endif %}page={{ usuarios.previous_page_number }}">Anterior</a>
                    </li>
                {% else %}
                    <li class="page-item disabled"><span class="page-link">Anterior</span></li>
                {% endif %}

                <li class="page-item disabled"><span class="page-link">Página {{ usuarios.number }} de {{ usuarios.paginator.num_pages }}</span></li>

                {% if usuarios.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?{% if role_filter %}role={{ role_filter }}&{% endif %}page={{ usuarios.next_page_number }}">Próxima</a>
                    </li>
                {% else %}
                    <li class="page-item disabled"><span class="page-link">Próxima</span></li>
                {% endif %}
            </ul>
        </nav> -->
    </div>
</div>
{% endblock %}