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

    export let permisos = []
</script>

<TableResponsive>
    <thead>
        <tr>
            <th>Linea</th>
            <th>Vigente</th>
            <th>Visualiza</th>
        </tr>
    </thead>
    <tbody>
        {#each permisos 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>