{{--
    @intent Aba "Barras Laterais" do Editor Estrutural — editores empilhados.
    @description Editor direto de HTML/Blade para barra esquerda e direita.
    @vars $contents (array)
--}}
<form action="{{ route('v2.structural-editor.editor.save') }}" method="POST">
    {{ csrf_field() }}

    {{-- ── Barra Esquerda ──────────────────────────────── --}}
    <div class="sle-area-editor mb-4" data-area="main_left">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <div>
                <label class="form-label fw-bold mb-0">Barra Esquerda</label>
                <p class="text-muted small mb-0">
                    Código HTML/Blade injetado na barra lateral <strong>esquerda</strong>.
                    Se vazia, o conteúdo padrão é renderizado.
                </p>
            </div>
            <div class="d-flex align-items-center gap-2 flex-shrink-0 ms-2">
                <div class="form-check form-switch mb-0">
                    @php $mlActive = $contents['main_left']->active ?? true; @endphp
                    <input class="form-check-input" type="checkbox"
                           name="areas[main_left][active]" value="1"
                           id="ml-active" {{ $mlActive ? 'checked' : '' }}>
                    <label class="form-check-label small" for="ml-active">Ativo</label>
                </div>
            </div>
        </div>

        @php $mlVal = $contents['main_left']->content ?? ''; @endphp
        <input type="hidden" name="areas[main_left][content_type]" value="htmlmixed">
        @include('v2-cms::partials.code-editor', [
            'id'     => 'ml-editor',
            'name'   => 'areas[main_left][content]',
            'value'  => $mlVal,
            'mode'   => 'htmlmixed',
            'height' => '220px',
            'label'  => false,
        ])
    </div>

    {{-- ── Barra Direita ───────────────────────────────── --}}
    <div class="sle-area-editor mb-4" data-area="main_right">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <div>
                <label class="form-label fw-bold mb-0">Barra Direita</label>
                <p class="text-muted small mb-0">
                    Código HTML/Blade injetado na barra lateral <strong>direita</strong>.
                    Se vazia, o conteúdo padrão é renderizado.
                </p>
            </div>
            <div class="d-flex align-items-center gap-2 flex-shrink-0 ms-2">
                <div class="form-check form-switch mb-0">
                    @php $mrActive = $contents['main_right']->active ?? true; @endphp
                    <input class="form-check-input" type="checkbox"
                           name="areas[main_right][active]" value="1"
                           id="mr-active" {{ $mrActive ? 'checked' : '' }}>
                    <label class="form-check-label small" for="mr-active">Ativo</label>
                </div>
            </div>
        </div>

        @php $mrVal = $contents['main_right']->content ?? ''; @endphp
        <input type="hidden" name="areas[main_right][content_type]" value="htmlmixed">
        @include('v2-cms::partials.code-editor', [
            'id'     => 'mr-editor',
            'name'   => 'areas[main_right][content]',
            'value'  => $mrVal,
            'mode'   => 'htmlmixed',
            'height' => '220px',
            'label'  => false,
        ])
    </div>

    <button type="submit" class="btn btn-primary fw-bold px-4 d-inline-flex align-items-center gap-1">
        <i class="bi bi-save"></i> Salvar Barras Laterais
    </button>
</form>