{% extends 'base_app.html.twig' %}

{% block body %}
    <div class="container">
   <div class="widget widget-table action-table">
            <div class="widget-header"> 
                <div class="row">                
                <div class="col-sm-9"><i class="fa fa-list"></i>
                    <h3>Listado de Jurados Registrados</h3></div>
                    <div class="col-sm-2"><input type="text" class="form-control" name="marca"></div>
              </div>
            </div>
         <div class="widget-content context">
              <table class="table table-striped table-bordered table-condensed">
                <thead>
                  <tr>
                      <th>Id</th>
                      <th>Cédula</th>
                      <th>Nombres y Apellidos</th>
                      <th>Estado</th>
                      <th>Escalafón Actual</th>
                      <th>Correo</th>
                      <th>Acciones</th>
                  </tr>
                </thead>
                <tbody>
        {% for usuario in usuarios %}
            <tr>
                <td>{{ usuario.id }}</td>
                <td>{{ usuario.cedulaPasaporte }}</td>
                <td>{{ usuario.nombres }}, {{ usuario.apellidos }}</td>
                <td>{{ usuario.idEstado.nombre }}</td>
                <td>{{ usuario.idEscala.nombre }}</td>
                <td>{{ usuario.correoElectronico }}</td>
                <td> 
                    <a href="{{ path('admin_usuarios_show', { 'id': usuario.id }) }}" class="btn btn-xs btn-info"><i class="fa fa-eye" ></i></a>
                    <a href="{{ path('admin_jurados_edit', { 'id': usuario.id }) }}" class="btn btn-xs btn-primary"><i class="fa fa-edit"></i></a>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

            </div>
{% endblock %}

       {% block javascripts %}
           {{ parent() }}
           <script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>

           <script>
               $(function() {

                   var $input = $("input[name='marca']"),
                       $context = $("table tbody tr");
                   $input.on("input", function() {
                       var term = $(this).val();
                       $context.show().unmark();
                       if (term) {
                           $context.mark(term, {
                               done: function() {
                                   $context.not(":has(mark)").hide();
                               }
                           });
                       }
                   });

               });

           </script>

       {% endblock %}