{% extends 'layouts/administrator/master.html' %}
{% load static %}
{% load querystring_tags %}

{% block title %} Usuarios {% endblock %}

{% block title_main %} Usuarios {% endblock  %}

{% block breadcrumb %}
	<li class="breadcrumb-item"><a href="{% url 'administrators:dashboard' %}">Dashboard</a></li>
    <li class="breadcrumb-item active">Usuarios</li>
{% endblock %}

{% block content %}
	<div class="card">
		<div class="card-body">
			<form action="" method="get">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-auto py-2 py-md-0">
                            <label class="sr-only" for="search">Buscar</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="search" name="search" placeholder="Buscar" value="{{ search }}">
                                <div class="input-group-append">
                                    <button type="submit" class="input-group-text btn"><i class="fas fa-search"></i></button>
                                </div>
                            </div>
                        </div>
						<div class="col-auto py-2 py-md-0">
                            <a class="btn btn-primary" href="{% url 'administrators:user_create_adm' %}" role="button">Nuevo usuario</a>
                        </div>
                        {% comment %} <div class="col-auto py-2 py-md-0">
                            <a class="btn btn-secondary" data-toggle="collapse" href="#collapseFilters" role="button" aria-expanded="false" aria-controls="collapseFilters">Ver Filtros</a>
                        </div>
                        <div class="col-auto py-2 py-md-0">
                            <a href="{% url 'administrators:complaints_list_adm' %}" class="btn btn-light">Limpiar Filtros</a>
                        </div> {% endcomment %}
                    </div>
                </div>
                <div class="collapse {% if open_filters %} show {% endif %}" id="collapseFilters">
                    <hr class="mt-4">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="park_id">Por Id</label>
                                    <input type="text">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="park_id">Por fecha de presentación</label>
                                    <input type="text">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="park_id">Leidos</label>
                                    <input type="text">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="park_id">Estatus</label>
                                    <input type="text">
                                </div>
                            </div>
                            <div class="col-md-4" style="display: flex; align-items: flex-end;">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">Filtrar</button>
                                </div>
                            </div>
                            <div class="col-md"></div>
                        </div>
                    </div>
                </div>
            </form>
		</div>
	</div>

	<!-- Default box -->
    <div class="card">
        <div class="card-body p-0">
            <table class="table table-striped projects">
                 <thead>
                    <tr>
                        <th style="width: 1%">ID</th>
                        <th style="width: 10%" class="text-center">Activo</th>
                        <th style="width: 15%">Usuario</th>
                        <th style="width: 20%">Correo electrónico</th>
                        <th style="width: 15%">Última conexión</th>
                        <th style="width: 20%" class="text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in object_list %}
                    <tr>
                        <td> {{ user.id }} </td>
						<td class="text-center">
                            {% if user.is_active %}
                                <i class="fa fa-check text-success"></i>
                            {% else %}
                                <i class="fa fa-times text-danger"></i>
                            {% endif %}
                        </td>
                        <td class="text-break"> {{ user.username }} </td>
						<td class="text-break"> {{ user.email }} </td>
                        <td class="project_progress">
                            <p class="m-0"><small> {{ user.last_login|date }} </small></p>
                        </td>
                        <td class="project-actions text-center">
                            <a class="btn btn-primary btn-sm" href="{% url 'administrators:user_update_adm' user.id %}">
                                <i class="fas fa-pencil-alt"></i> Editar
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6">No hay información</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            {% if page_obj.has_other_pages %}
                <ul class="uk-pagination uk-flex-center fs-18" uk-margin>

                    {% if page_obj.has_previous %}
                        <li>
                            <a href="{% append_to_get page=page_obj.previous_page_number %}">
                                <span uk-pagination-previous></span>
                            </a>
                        </li>
                    {% endif %}
                    
                    {% for page in page_obj.paginator.page_range %}

                        {% if page_obj.number|add:-4 > 1 and page == 1 %}
                            <li><a href="{% append_to_get page=page %}">{{page}}</a></li>
                            <li class="uk-disabled"><span>...</span></li>
                        {% endif %}

                        {% if page <= page_obj.number|add:4 and page >= page_obj.number|add:-4 %}
                            {% if page_obj.number == page %}
                                <li class="uk-active"><a href="{% append_to_get page=page %}">{{page}}</a></li>
                            {% else %}
                                <li><a href="{% append_to_get page=page %}">{{page}}</a></li>
                            {% endif %}
                        {% endif %}

                        {% if page_obj.number|add:4 < page_obj.paginator.num_pages and page == page_obj.paginator.num_pages %}
                            <li class="uk-disabled"><span>...</span></li>
                            <li><a href="{% append_to_get page=page %}">{{page}}</a></li>
                        {% endif %}

                    {% endfor %}

                    {% if page_obj.has_next %}
                        <li>
                            <a href="{% append_to_get page=page_obj.next_page_number %}">
                                <span uk-pagination-next></span>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            {% endif %}

        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
{% endblock %}