{% extends 'base.html' %}
{% load static %}
{% block extrahead %}
    <link rel="stylesheet" href="{% static "css/table.css" %}">
    {% endblock %}
{% block principal %}
    <section class="min-vh-100 w-100">
        <div class="container">
            <center class="mt-3"><h4>Listado de usuarios</h4></center>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Usuario <a class="fa fa-add" href="{%  url 'add_user' %}"></a>  </th>
                            <th>Estado</th>
                            <th>Telefono</th>
                            <th>Direcciòn</th>
                            <th>Tipo Usuario</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>

                    <tbody>
                    {% for usuario in lista %}

                        <tr>
                            <td>
                                <div class="user-info">
                                    <div class="user-info__img">
                                        <img src="/media/{{ usuario.img_profile }}" class="img-fluid">
                                    </div>
                                    <div>
                                        <h5 class="mb-0">{{ usuario.first_name }} {{ usuario.last_name }}</h5>
                                        <p class="text-muted mb-0">@{{ usuario.email }}</p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="active_circle"></span> active
                            </td>
                            <td>{{ usuario.phone_number }}</td>
                            <td>
                                {{ usuario.address }}
                            </td>
                             <td>
                                {{ usuario.tipo_usuario }}
                            </td>
                            <td>
                                <a class="dropdown-item" href="{% url 'actualizar_user' usuario.id %}"><i class="fa-solid fa-pencil"></i> Editar</a>
                                <a class="dropdown-item text-danger" href="{% url 'delete_user' usuario.id %}"><i class=" fa-solid fa-trash-can "></i> Eliminar</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </section>

{% endblock %}