<script>
    import TableResponsive from "$/components/TableResponsive.svelte";

    export let permisos = []
    export let escritura = false
    
    let resultado = []
    let search = '';

    function normalize_string(str) {
        if (!str) return str;
        return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
    }

    function filtrar_operadores(search) {
        return permisos.filter(el => !search || normalize_string(el.nombre_operador).includes(normalize_string(search)))
    }

    $: resultado = filtrar_operadores(search)
</script>

<div class="input-group my-3">
    <input type="text" class="form-control" bind:value={search} placeholder="Nombre de línea...">
    <div class="input-group-text"><i class="bi bi-search"></i></div>
</div>

<div class={escritura ? '' : 'disabled'}>
    <TableResponsive>
        <thead>
            <tr>
                <th>Operador</th>
                <th>Vigente</th>
                <th>Visualiza</th>
            </tr>
        </thead>
        <tbody>
            {#each resultado as operador}
            <tr>
                <td>{operador.nombre_operador}</td>
                <td>{operador.vigente ? '✅' : '⛔'}</td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch"
                            bind:checked={operador.acceso}
                            on:change={() => operador.modificado = true}
                            disabled={!operador.vigente}
                            id={`check-operador-${operador.id_operador}`}>
                        <label class="form-check-label" for={`check-operador-${operador.id_operador}`}>&nbsp;</label>
                    </div>
                </td>
            </tr>
            {/each}
        </tbody>
    </TableResponsive>
</div>