@once
    @push('styles')
        <link href="{{ asset('admin_assets/assets/css/page-builder.css') }}?v={{ time() }}" rel="stylesheet">
    @endpush
@endonce

<div id="page-builder-app"
     data-save-url="{{ $saveUrl ?? '#' }}"
     data-method="{{ $method ?? 'POST' }}">

    <div class="mb-3 d-flex justify-content-between gap-2">
        <input id="page-builder-title" class="form-control" value="{{ $page->title ?? '' }}" placeholder="Page title">
        <button type="button" class="btn btn-outline-primary" id="add-section-btn">Add Section</button>
        <button type="button" class="btn btn-primary" id="save-page-builder">Save Page Builder</button>
    </div>

    <div id="page-builder-flash" class="alert alert-success d-none"></div>

    <div class="pb-layout">
        <div class="card">
            <div class="card-header">Widget Library</div>
            <div id="widget-library" class="card-body"></div>
        </div>

        <div class="card">
            <div class="card-header">Canvas</div>
            <div id="page-builder-canvas" class="card-body" data-dropzone="sections"></div>
        </div>

        <div class="card">
            <div class="card-header">Settings</div>
            <div id="page-settings-panel" class="card-body">Select an element.</div>
        </div>
    </div>
</div>

@once
    @push('scripts')
        <script>
            window.__PAGE_BUILDER_DATA__ = @json($pageBuilderData ?? ['page' => null]);
        </script>
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
        <script src="{{ asset('form-builder/page-builder.js') }}?v={{ time() }}"></script>
    @endpush
@endonce