{% extends "principal.html" %}

{% load staticfiles %}

{% load url from future %}

{% block extrahead %}

    <!--  Main Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/dandelion.css" %}" media="screen">
    <!-- Demo Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/demo.css" %}" media="screen">
    <!-- Login Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/form.css" %}" media="screen">
    <link rel="stylesheet" href="{% static "assets/css/login.css" %}" media="screen">
    <link rel="stylesheet" href="{% static "plugins/zocial/zocial.css" %}" media="screen">
    <!-- Bootstrap Stylesheet -->
    <link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}" media="screen">
    <!-- Theme Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/dandelion.theme.css" %}" media="screen">
    <!-- Icon Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/fonts/glyphicons/style.css" %}" media="screen">
    <link rel="stylesheet" href="{% static "assets/js/plugins/growl/css/jquery.growl.css" %}"  media="screen">
    <!-- Demo Stylesheet -->
    <link rel="stylesheet" href="{% static "assets/css/demo.css"%}" media="screen">
    <link rel="stylesheet" href="{% static "autocompletable/jquery-ui.css" %}" media="screen">
    <script src="{% static "autocompletable/jquery.min.js" %}"></script>
    <script src="{% static "autocompletable/jquery-ui.min.js" %}"></script>



    {# TODO. SE AGREGO TODO ESTO #}
            <!-- JS Libs -->
    <script src="{% static "assets/js/libs/jquery-1.8.3.min.js" %}"></script>
    <script src="{% static "assets/js/libs/jquery.placeholder.min.js" %}"></script>
    <script src="{% static "assets/js/libs/jquery.mousewheel.min.js" %}"></script>

    <!-- JS Bootstrap -->
    <script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script>

    <!-- jQuery-UI JavaScript Files -->
    <script src="{% static "assets/jui/js/jquery-ui-1.9.2.min.js" %}"></script>
    <script src="{% static "assets/jui/jquery.ui.timepicker.min.js" %}"></script>
    <script src="{% static "assets/jui/jquery.ui.touch-punch.min.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "assets/jui/css/jquery.ui.all.css" %} " media="screen">
    <script src="{% static "assets/js/plugins/growl/js/jquery.growl.js" %}"></script>
    <!-- JS Plugins -->

    <!-- Validation Plugin -->
    <script src="{% static "plugins/validate/jquery.validate.min.js" %}"></script>

    <!-- Wizard Plugin -->
    <script src="{% static "assets/js/plugins/wizard/dandelion.wizard.js" %}"></script>
    <script src="{% static "assets/js/libs/jquery.form.min.js" %}"></script>
    <link rel="stylesheet" href="{% static "assets/js/plugins/wizard/dandelion.wizard.css" %}" media="screen">

    <!-- JS Demo -->
    <script src="{% static "assets/js/demo/demo.wizard.js" %}"></script>

    <!-- JS Template -->
    <script src="{% static "assets/js/core/dandelion.core.js"%}"></script>

    <!-- JS Customizer -->
    <script src="{% static "assets/js/core/dandelion.customizer.js"%}"></script>
    {# TODO. SE AGREGO TODO ESTO #}

{% endblock %}


{% block pluginstylesheet %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{%static "assets/jui/css/jquery.ui.all.css" %}">

{% endblock %}

{% block breadcrumbs %}
                            <li ><a href=""><i class="icon-home"></i> Inicio</a></li>
                            <li>Usuario</li>
                            <li class="active">{{operacion}}</li>
                            

                           
{% endblock %}


{% block maincontent %}




  <div id="dgtic-content-area">
<div class="row-fluid">
<div class="span12">


<div class="dgtic-panel collapsible">
                                    <div class="dgtic-panel-header">
                                        <span class="dgtic-panel-title">
                                            Usuarios Registrados
                                        
                                        <span class="step-links">
                                            <select id="rpp" onchange = "window.location.href = '?bscr={{bscr}}&rpp=' + this.value">
                                                <option value="10" {% if rpp == '10'%}selected{% endif %}>10</option>
                                                <option value="20" {% if rpp == '20'%}selected{% endif %}>20</option>
                                                <option value="50" {% if rpp == '50'%}selected{% endif %}>50</option>
                                                <option value="100" {% if rpp == '100'%}selected{% endif %}>100</option>
                                                <option value="250" {% if rpp == '250'%}selected{% endif %}>250</option>
                                            </select>

                                            {% if datos.has_previous %}
                                            <a href="?page={{ datos.previous_page_number }}&rpp={{rpp}}&bscr={{bscr}}">Anterior</a>
                                            {% endif %}

                                            <span class="current">
                                                página {{ datos.number }} de {{ datos.paginator.num_pages }}.
                                            </span>

                                            {% if datos.has_next %}
                                            <a href="?page={{ datos.next_page_number }}&rpp={{rpp}}&bscr={{bscr}}">Siguiente</a>
                                            {% endif %}
                                            <input id="busq" type="text" class="search-query" placeholder="Buscar..." value="{{bscr}}"/>
                                </span>
                                </span>
                                    </div>
                                    <div class="dgtic-panel-content dgtic-table-container">
                                        <table id="tabla_usuario" class="dgtic-table">
                    <thead>
                        <tr>
                            
                            <th>Usuario</th>
                            <th>Nombre</th>
                            <th>Correo</th>
                            <th>Opciones</th>
                           </tr>
                    </thead>
                    <tbody>
                        {% for registro in datos %}
                        <tr>
                            
                            <td>{{registro.username}}</td>
                            <td>{{registro.first_name}}</td>
                            <td>{{registro.email}}</td>
                            

                            <td class="da-icon-column">

                               
                                <a href="/editarusuario/{{registro.id}}" rel="tooltip" data-placement="top" data-original-title="Editar">
                                    <i class="icol-pencil" title="Editar"></i>
                                </a>
                                
                                

                                
                                
                                        


                            </td>
                           
                            
                            
                            

                        </tr>
                        {%empty%}
                        <tr>
                            <td>No se encontraron registros</td>
                            
                              <td>No se encontraron registros</td>
                            
                             <td>No se encontraron registros</td>
                        </tr>
                        {%endfor%}
                  
                            
                    </tbody>
                </table>
            </div>
        </div>

        

    </div>
</div>




{% endblock %}

{% block jqueryui %}
{{ block.super }}
 <script type="text/javascript" src="{%static "assets/jui/js/jquery-ui-1.9.2.min.js"%}"></script>
{% endblock %}  

{% block jsplugins %}
{{ block.super }}
 <script src="{% static "plugins/datatables/jquery.dataTables.js" %}"></script>

{% endblock %} 

{% block extralibs %}
{{ block.super }}
    <script>
        $(function() {

            $('#busq').on('keypress', function (e){
                if(e.keyCode == 13){
                    window.location.href = '?rpp={{rpp}}&bscr='+this.value;
                }
            });

            if( $.fn.dataTable )
            {

                $('#tabla_servidoresdatos').dataTable({

                    bPaginate: true,
                    bfilter:true,
                    bInfo: true,
                    bSort: true,
                    "sPaginationType":"full_numbers",
                    "oLanguage":{
                        "sProcessing":     "Procesando...",
                        "sLengthMenu":     "Mostrar _MENU_ registros",
                        "sZeroRecords":    "No se encontraron resultados",
                        "sEmptyTable":     "Ningún dato disponible en esta tabla",
                        "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                        "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                        "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                        "sInfoPostFix":    "",
                        "sSearch":         "Buscar:",
                        "sUrl":            "",
                        "sInfoThousands":  ",",
                        "sLoadingRecords": "Cargando...",
                        "oPaginate": {
                            "sFirst":    "Primero",
                            "sLast":     "Último",
                            "sNext":     "Siguiente",
                            "sPrevious": "Anterior"
                        },
                        "oAria": {
                            "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                            "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                        }
                    }

                });
            }
        });
    </script>





       

{% endblock %}