<table id="tbl-Componentes" class="table table-bordered table-hover table-responsive">
    <thead>
        <tr>
            <th width="1%" ><input type="checkbox" class="checkComponentes" id="chk-seleccionarTodosNoticias" ></th>
            <th width="1%" >Código</th>
            <th width="1%" >Título</th>
            <th width="1%" >Descripción</th>
            <th width="1%" >Carpeta</th>
            <th width="1%" >Controles</th>
            <th width="1%" >¿es menú?</th>
            <th width="1%" >Icono</th>
            <th width="1%" >Menú</th>
            <th width="1%" >Creado por</th>
            <th width="1%" title="Estado" class="titulo-flotante" ></th>
        </tr>
    </thead>
    <tbody> 
        {% if Componentes %}
            {% for Componente in Componentes %}
                <tr>
                    <td>
                        <input type="checkbox" class="checkTable checkComponentes" name="check_afiliados_componentes[]" 
                            value="{{ Componente.componenteID }}" data-titulo="{{ Componente.componenteTITULO }}" >
                    </td>
                    <td>{{ Componente.componenteCODIGO  }}</td>
                    <td>{{ Componente.componenteTITULO  }}</td>
                    <td>{{ Componente.componenteDESCRIPCION|striptags[0:140] }}...</td>
                    <td>{{ Componente.componenteCARPETA }}</td>
                    
                    <td style="font-size: 200%" >{{ boton("enlace", null, "mostrarControladoresDelComponente(" ~ Componente.componenteID ~ ")", Componente.cantidadCONTROLADORES ) }}</td>
                    
                    <td>{{ Componente.componenteMENU }}</td>
                    <td class="titulo-flotante" title="{{ Componente.componenteMENUICONO }}" >
                        <i class="{{ Componente.componenteMENUICONO }} fa-3x" ></i>
                    </td>
                    <td >
                        {{ Componente.componenteMENUTITULO }}
                    </td>
                    <td>{{ Componente.componenteUSRCREO }}</td>
                    <td>{{ labelEstado(Componente.componenteESTADO) }}</td>
                </tr>
            {% endfor %}
        {% endif %}
    </tbody>
    <tfoot>
    </tfoot>
</table>
<script >
    $(document).ready(function () {
       checkBoxSICAM(".checkComponentes");
       activarSeleccionarTodos("chk-seleccionarTodosNoticias", "checkComponentes");
    });
    crearTablaScroll("tbl-Componentes");
    function mostrarControladoresDelComponente(idComponente){
        alertaInformacion("Vista en construccion");
    }
</script>