<script>
    export let permisos = []
    export let escritura = false
</script>

<div class={escritura ? '' : 'disabled'}>
    <table class="table">
        <thead>
            <tr>
                <th>Aplicación</th>
                <th>Vigente</th>
                <th>Acceso</th>
                <th>Solo Visualiza</th>
            </tr>
        </thead>
        <tbody>
            {#each permisos as app}
            <tr>
                <td>{app.nombre_app}</td>
                <td>{app.vigente ? '✅' : '⛔'}</td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id={`check-acceso-${app.id_aplicacion}`}
                            bind:checked={app.acceso}
                            on:change={() => app.modificado = true}
                            disabled={!app.vigente}>
                        <label class="form-check-label" for={`check-acceso-${app.id_aplicacion}`}>&nbsp;</label>
                    </div>
                </td>
                <td>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id={`check-solo-visualiza-${app.id_aplicacion}`}
                            bind:checked={app.solo_visualizar}
                            on:change={() => app.modificado = true}
                            disabled={!app.vigente || !app.acceso}>
                        <label class="form-check-label" for={`check-solo-visualiza-${app.id_aplicacion}`}>&nbsp;</label>
                    </div>
                </td>
            </tr>
            {/each}
        </tbody>
    </table>
</div>