@extends('layouts.app')

@push('style')
    @vite('resources/sass/landing.scss')
@endpush

@section('content')
<div class="row">
    <div class="col-12 px-0">
        @include('components.alert_success')
        @include('components.alert_error')

        <div class="editor-row">
            <!-- LEFT SIDEBAR: BLOCKS & LAYERS -->
            @include('pages.landing_website.editor._sidebar_left')

            <!-- CENTER: CANVAS -->
            <div class="editor-canvas">
                <!-- Toolbar (Top Bar) -->
                @include('pages.landing_website.editor._toolbar')

                <!-- GrapesJS Mount Point -->
                <div id="gjs"
                     style="height: calc(100% - 50px); overflow: hidden;"
                     data-landing-website='@json($landingWebsite)'
                     data-landing-website-assets='@json($landingWebsite->getAssets())'
                ></div>
            </div>

            <!-- RIGHT SIDEBAR: STYLES & TRAITS -->
            @include('pages.landing_website.editor._sidebar_right')
        </div>
    </div>
</div>

@include('pages.landing_website._modal_create_child')
@include('pages.landing_website._modal_children')

@endsection

@push('scripts')
    <script>
        const landingWebsite = {!! json_encode($landingWebsite) !!};
        const landingWebsiteAssets = {!! json_encode($landingWebsite->getAssets()) !!};
    </script>
    @vite('resources/js/views/landing_website_gjs.js')
@endpush