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

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

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

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

    $: resultado = filtrar_lineas(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>

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