<div>
    <div class="card"  id="website-legal-settings-card">
        <div class="card-body">
            <div class="nav-align-left mb-6">
                <ul class="nav nav-pills" role="tablist" wire:ignore>
                    <li>
                        <h5>Avislos legales</h5>
                    </li>
                    @foreach($legalVars as $key => $section)
                        <li class="nav-item">
                            <button
                                type="button"
                                class="nav-link @if($currentSection === $key) active @endif"
                                onclick="@this.currentSection = '{{ $key }}'; WebsiteLegalSettingsForm.switchToForm('{{ $key }}-nav');"
                                role="tab"
                                data-bs-toggle="tab"
                                data-bs-target="#{{ $key }}-nav"
                                aria-controls="{{ $key }}-nav"
                                aria-selected="@if($currentSection === $key)= true: flase @endif">
                                {{ $section['title'] }}
                            </button>
                        </li>
                    @endforeach
                </ul>
                <div class="tab-content">
                    @foreach($legalVars as $key => $section)
                        <div class="tab-pane fade @if($currentSection === $key) show active @endif" id="{{ $key }}-nav" role="tabpanel">
                            <h4 class="card-title text-center">{{ $section['title'] }}</h4>
                            <div class="form-check mb-3">
                                <x-form.checkbox
                                    id="{{ $key }}-enabled"
                                    wire:model="legalVars.{{ $key }}.enabled"
                                    parent_class='form-switch'>
                                    Habilitar {{ $section['title'] }}
                                </x-form.checkbox>
                            </div>
                            <!-- Div Quill ignorado por Livewire -->
                            <div wire:ignore>
                                <div id="{{ $key }}-content">
                                    {!! $section['content'] !!}
                                </div>
                            </div>
                            <textarea id="{{ $key }}-textarea" class="hidden" wire:model.defer="legalVars.{{ $key }}.content"></textarea>
                            @error("legalVars.{$key}.content")
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    @endforeach
                    <div>
                        {{-- Botones --}}
                        <div class="row my-4">
                            <div class="col-lg-12 text-end">
                                <button
                                    type="button"
                                    id="save-button"
                                    class="btn btn-primary btn-sm mt-2 mr-2 waves-effect waves-light"
                                    disabled
                                    data-loading-text="Guardando...">
                                    <i class="ti ti-device-floppy mr-2"></i>
                                    Guardar cambios
                                </button>
                                <button
                                    type="button"
                                    id="cancel-button"
                                    class="btn btn-secondary btn-sm mt-2 mr-2 waves-effect waves-light"
                                    wire:click="loadSettings"
                                    disabled>
                                    <i class="ti ti-rotate-2 mr-2"></i>
                                    Cancelar
                                </button>
                            </div>
                        </div>
                        {{-- Notifications --}}
                        <div class="notification-container" wire:ignore></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
