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

    export let lineas = [];
    export let escritura = false;

    function toggleCheckbox(linea, event) {
        const newState = event.target.checked;
        linea.activo = newState;
        linea.modificado = true;
        lineas = lineas; // Asignar el array a sí mismo para asegurar la reactividad en Svelte
    }
</script>

<div class={"form" + (escritura ? "" : " disabled")}>
    <TableResponsive>
        <thead>
            <tr>
                <th>Linea</th>
                <th>Asociada</th>
            </tr>
        </thead>
        <tbody>
            {#each lineas as linea}
                <tr>
                    <td>{linea.route_long_name}</td>
                    <td>
                        <div class="form-check form-switch">
                            <input
                                class="form-check-input"
                                type="checkbox"
                                role="switch"
                                bind:checked={linea.activo}
                                on:change={(event) => toggleCheckbox(linea, event)}
                                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>
</div>
