@component('fragments.modal')
    @slot('idmodal')
        modalDisenoTabla
    @endslot

    @slot('title')
        Evaluación de tabla
    @endslot

    @if(!$tabla)
        @slot('action')
            {{-- Esta captura guarda la plantilla base del indice en norma_index_tablas. --}}
            <form class="needs-validation ui form" method="POST" action="{{url('index/tabla/new')}}" role="form" enctype="multipart/form-data">
        @endslot

        @slot('form')
            {{ csrf_field() }}
            
            <div id="modal-form-tabla">
                <input type="text" class="form-control" id="id_index" name="id_index" hidden value="{{$id_index}}">
                <textarea type="text" class="form-control summernote" id="tabla" name="tabla"></textarea>
                <small id="emailHelp" class="form-text text-muted">
                    Después de ser guardada no se podrá modificar
                </small>
            </div>
        @endslot

        @slot('button')
            <button type="submit" class="btn btn-primary">
                <i class="save icon"></i>Guardar
            </button>
        @endslot
    @else
        @slot('action')
            <form class="needs-validation ui form" method="POST" action="{{url('index/tabla/delete')}}" role="form" enctype="multipart/form-data">
        @endslot

        @slot('form')
            {{ csrf_field() }}
            
            <div id="modal-form-tabla">
                <input type="text" class="form-control" id="id_index" name="id_index" hidden value="{{$id_index}}">

                <div class="table-preview-wrapper">
                    {!! $tabla->tabla !!}
                </div>
            </div>

            <style>
                .table-preview-wrapper {
                    width: 100%;
                    overflow-x: auto;
                    overflow-y: auto;
                    max-height: 70vh;
                    padding: 10px;
                    border: 1px solid #dcdcdc;
                    background: #fff;
                }

                .table-preview-wrapper table {
                    max-width: none !important;
                }
            </style>
        @endslot

        @slot('button')
            {{-- 
            <button type="submit" class="btn btn-danger">
                <i class="trash icon"></i>Borrar
            </button> 
            --}}
        @endslot
    @endif
@endcomponent