{% extends "dashboard_base.html" %}
{% load staticfiles %}
{% block breadcrumbs %}
                            <li class="{{ inicio }}"><a href="/areas/administrador"><i class="icon-home"></i> Inicio</a></li>
                            <li class="active"><i class="icon-list"></i><span>Listado de areas</span></li>
                            {% endblock %}      
                        
                        {% block maincontent %}
                        {% load url from future%}
                        

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

                                <div class="dgtic-panel-header">
                                        <span class="dgtic-panel-title">
                                            <i class="icon-list"></i>
                                            Areas
                                        </span>
                                        </div>
                                <div class="dgtic-panel-toolbar">
                                <div class="btn-toolbar">
                                    <div class="btn-group">
                                        <a href="{% url 'servicio:creararea' %}" class="btn btn-success">
                                            <i class="icon-circle-plus"></i>
                                            Nuevo Area
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <table class="dgtic-table" id="tabla_area">
                                <thead>
                                <tr>
                                    <th>Area</th>
                                    <th>Cuestionario</th>
                                    <th>Opciones</th>

                                </tr>
                                </thead>
                                <tbody>
                                {% for registro in datos %}
                                <tr>
                                   
                                    <td>{{registro.nombre_area}}</td>
                                    <td>{{registro.cuestionario}}</td>


                            
                                    <td class="dgtic-icon-column">
                                
                                    <a href="{% url 'servicio:editararea' area_id=registro.id %}" rel="tooltip" data-placement="top" data-original-title="Editar">
                                    <i class="icol-pencil"></i>
                                    </a>

                                    <a href="javascript:void(0);" rel="tooltip" data-placement="top" data-original-title="Borrar" onclick=" confirmar({{registro.id}},'borrararea');">
                                    <i class="icol-cross"></i>
                                    </a>
                                    
                                    </td>

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

    <div><br><br><br><br><br><br>
    </div>
                          <div id="dgtic-ex-dialog-div" style="display:none;">
                                            <p>¿Está seguro de eliminar el registro?</p>
                         </div>

                        {% endblock %}
                        {% block jsplugins %}
                            <script src="{% static "plugins/datatables/jquery.dataTables.js" %}"></script>
                        {% endblock %}
                        {% block extralibs %}
                        <script>
                        $(document).ready(function() {
                            
                            if( $.fn.dataTable )
                             {
                                $.fn.dataTableExt.sErrMode="throw";
                                $('#tabla_area').dataTable({
                                    
                                    bPaginate: true,
                                    bfilter:true,
                                    bInfo: true,
                                    bSort: false,  
                                    "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 %}