{% extends "base.html" %}

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

{% block breadcrumbs %}
    {{ block.super}}

    <li class="{{ padron_ac}}" >
        <a href="{% url "lista-usuarios" %}">Usuarios</a>
    </li>

{% endblock %}
{% block content %}
    <div class="row">
        <div class="span12">
            <div class="dgtic-panel">
                <div class="dgtic-panel-header">
                    <span class="dgtic-panel-title">
                        <i class="icon-user-add"></i>
                        Usuarios
                    </span>
                </div>
                <div class="dgtic-panel-content dgtic-table-container">
                    <div class="dgtic-panel-content">
                        Mostrar:
                        <select onchange="handleSubmitSearch();" name="rpp" id="id_rpp" style="width: inherit;">
                            <option value="50" {% if rpp == 50 %}selected{% endif %}>50</option>
                            <option value="100" {% if rpp == 100 %}selected{% endif %} >100</option>
                            <option value="150" {% if rpp == 150 %}selected{% endif %} >150</option>
                            <option value="200" {% if rpp == 200 %}selected{% endif %} >200</option>
                        </select>
                        registros

                        <div class="pull-right">
                            <input onkeypress="handleSearchInput(event);" type="text" name="search" id="id_search" placeholder="Buscar" value="{{ search }}"/>
                            <button class="btn" onclick="handleSearchInput(event)">
                                <i class="icon-search"></i>
                            </button>
                        </div>
                    </div>
                    <div class="dgtic-panel-toolbar">
                    <div class="btn-toolbar">
                        <div class="btn-group">
                            <a href="{% url "crear-usuarios" %}" class="btn btn-success">
                                <i class="icon-circle-plus"></i>
                                Agregar Usuario
                            </a>
                        </div>
                    </div>
                    </div>
                    <table id="id_tiposervicio_table" class="dgtic-table">
                        <thead>
                            <tr>
                                <th>id</th>
                                <th>Nombre</th>
                                <th>Dependencia</th>
                                <th>Departamento</th>
                                <th>Puesto</th>
                            </tr>
                        </thead>
                        <tbody>
                                {% for usuarios in usuarios_list %}
                                <tr>
                                <td><a href="{% url "detalle-usuarios" usuarios.id %}" >{{ usuarios.id }}</a></td>
                                <td>{{ usuarios.get_nombre_completo }}</td>
                                <td>{{ usuarios.dependencias | default:'N/A' }}</td>
                                <td>{{ usuarios.departamentos | default:'N/A' }}</td>
                                <td>{{ usuarios.cargo  }}</td>
                                </tr>
                                {% empty %}
                                    <tr>
                                    <td colspan="5">No se encontró ningún usuario</td>
                                    </tr>
                                {% endfor %}
                        </tbody>
                    </table>

                    <div class="dgtic-panel-content">
                        {% include "paginacion.html" %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extrajs %}
    <script>
        var handleSearchInput = function(event) {
            if (event.keyCode == 13 || event.type=="click"){
                return handleSubmitSearch();
            }
            return false;
        };

        var handleSubmitSearch = function() {
            var qs = $('#id_rpp, #id_search').serialize();
            $(location).attr('href', '?' + qs);
            return false;
        }
    </script>
{% endblock %}