<style type="text/css">
    #list-listRoles-{{ hash_listado }} {
        cursor: move;
    }
    
    .operacion-TAREA {
        color: #3c763d;
        background-color: #dff0d8;
    }
    .operacion-ADQUISICION {
        color: #8a6d3b;
        background-color: #fcf8e3;
    }
</style>

<div>
    <input type="text" class="form-control uppercase" id="input-search-listRoles-{{ hash_vista }}" onkeyup="busquedaLista()" placeholder="BUSCAR ROL">
    <hr>
    <ul class="list-group" style="height: 400px;overflow-y: scroll;border: thin solid #EEE;border-radius: 5px;" 
        id="list-listRoles-{{ hash_listado }}" >
      {% if roles %}
        {% for rol in roles  %}
        <li data-operacion="{{rol.rolID}}"  class="list-group-item  css-operacion-{{hash_vista}}">
            {{ rol.rolTITULO }}
        </li>
        {% endfor %}
      {% endif %}
    </ul>
    <div align="center">
      {{ boton('Nuevo',"mostrarFormularioNuevoRolesUsuarios", null , 'AGREGAR NUEVO ROL' ) }}
    </div>
</div>

<script type="text/javascript" >
    
    function busquedaLista() {
          var filter, operacion, a, i;
          filter =  $("#input-search-listRoles-{{ hash_vista }}").val().toUpperCase();
          operacion =$("#list-listRoles-{{ hash_listado }} li");
          for (i = 0; i < operacion.length; i++) {
              if ( operacion[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                  operacion[i].style.display = "";
              } else {
                  operacion[i].style.display = "none";
              }
          }
      }
</script>
