@php
    $isEdit = filled($record);
    $namePrefix = $isEdit ? 'edit_'.$record->id.'_' : 'create_';
    $selectedImageId = (string) old('image_id', $record?->image_id);
    $mediaAssets = $selectOptions['mediaAssetRecords'] ?? collect();

    $mediaImageUrl = static function ($asset) {
        if (! $asset?->file_path) {
            return null;
        }

        $path = $asset->file_path;

        if (str($path)->startsWith(['http://', 'https://', '/'])) {
            return $path;
        }

        if (str($path)->startsWith('storage/')) {
            return asset($path);
        }

        if (str($path)->startsWith('images/')) {
            return asset($path);
        }

        if (($asset->disk ?: 'public') === 'public') {
            return asset('storage/'.$path);
        }

        return \Illuminate\Support\Facades\Storage::disk($asset->disk)->url($path);
    };
@endphp

<section class="glass-card rounded-4 p-3 p-lg-4">
            <form class="artefact-page-form" method="POST" action="{{ $action }}">
                @csrf
                @if ($method !== 'POST')
                    @method($method)
                @endif

                    <nav class="artefact-form-tabs" aria-label="Artefact form sections">
                        <button class="artefact-form-tab" type="button" data-scroll-target="#artefactEnglishSection">
                            <span data-admin-en="English" data-admin-as="ইংৰাজী">English</span>
                        </button>
                        <button class="artefact-form-tab" type="button" data-scroll-target="#artefactAssameseSection">
                            <span data-admin-en="Assamese" data-admin-as="অসমীয়া">Assamese</span>
                        </button>
                        <button class="artefact-form-tab" type="button" data-scroll-target="#artefactGeneralSection">
                            <span data-admin-en="General" data-admin-as="সাধাৰণ">General</span>
                        </button>
                    </nav>

                    <div class="artefact-form-section" id="artefactEnglishSection">
                        <div class="artefact-form-heading">
                            <span class="artefact-form-step">01</span>
                            <div>
                                <h3><span data-admin-en="English Fields" data-admin-as="ইংৰাজী ক্ষেত্ৰসমূহ">English Fields</span></h3>
                                <p><span data-admin-en="Primary public catalogue content." data-admin-as="মূল ৰাজহুৱা কেটেলগ তথ্য।">Primary public catalogue content.</span></p>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}title_en"><span data-admin-en="Title (English)" data-admin-as="শিৰোনাম (ইংৰাজী)">Title (English)</span> <span class="text-danger">*</span></label>
                                <input class="form-control admin-input rounded-4 @error('title_en') is-invalid @enderror" id="{{ $namePrefix }}title_en" type="text" name="title_en" value="{{ old('title_en', $record?->title_en) }}">
                                @error('title_en')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}material_en"><span data-admin-en="Material (English)" data-admin-as="সামগ্ৰী (ইংৰাজী)">Material (English)</span></label>
                                <input class="form-control admin-input rounded-4 @error('material_en') is-invalid @enderror" id="{{ $namePrefix }}material_en" type="text" name="material_en" value="{{ old('material_en', $record?->material_en) }}">
                                @error('material_en')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}description_en"><span data-admin-en="Description (English)" data-admin-as="বিৱৰণ (ইংৰাজী)">Description (English)</span></label>
                                <textarea class="form-control admin-input rounded-4 @error('description_en') is-invalid @enderror" id="{{ $namePrefix }}description_en" name="description_en" rows="2" data-ckeditor-field>{{ old('description_en', $record?->description_en) }}</textarea>
                                @error('description_en')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="artefact-form-section" id="artefactAssameseSection">
                        <div class="artefact-form-heading">
                            <span class="artefact-form-step">02</span>
                            <div>
                                <h3><span data-admin-en="Assamese Fields" data-admin-as="অসমীয়া ক্ষেত্ৰসমূহ">Assamese Fields</span></h3>
                                <p><span data-admin-en="Localized catalogue content." data-admin-as="স্থানীয় ভাষাৰ কেটেলগ তথ্য।">Localized catalogue content.</span></p>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}title_as"><span data-admin-en="Title (Assamese)" data-admin-as="শিৰোনাম (অসমীয়া)">Title (Assamese)</span></label>
                                <input class="form-control admin-input rounded-4 @error('title_as') is-invalid @enderror" id="{{ $namePrefix }}title_as" type="text" name="title_as" value="{{ old('title_as', $record?->title_as) }}">
                                @error('title_as')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}material_as"><span data-admin-en="Material (Assamese)" data-admin-as="সামগ্ৰী (অসমীয়া)">Material (Assamese)</span></label>
                                <input class="form-control admin-input rounded-4 @error('material_as') is-invalid @enderror" id="{{ $namePrefix }}material_as" type="text" name="material_as" value="{{ old('material_as', $record?->material_as) }}">
                                @error('material_as')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}description_as"><span data-admin-en="Description (Assamese)" data-admin-as="বিৱৰণ (অসমীয়া)">Description (Assamese)</span></label>
                                <textarea class="form-control admin-input rounded-4 @error('description_as') is-invalid @enderror" id="{{ $namePrefix }}description_as" name="description_as" rows="2" data-ckeditor-field>{{ old('description_as', $record?->description_as) }}</textarea>
                                @error('description_as')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="artefact-form-section mb-0" id="artefactGeneralSection">
                        <div class="artefact-form-heading">
                            <span class="artefact-form-step">03</span>
                            <div>
                                <h3><span data-admin-en="General Details" data-admin-as="সাধাৰণ তথ্য">General Details</span></h3>
                                <p><span data-admin-en="Classification, image, status, and ordering." data-admin-as="শ্ৰেণী, ছবি, স্থিতি আৰু ক্ৰম।">Classification, image, status, and ordering.</span></p>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}category_id"><span data-admin-en="Category" data-admin-as="শ্ৰেণী">Category</span></label>
                                <select class="form-select admin-input rounded-4 @error('category_id') is-invalid @enderror" id="{{ $namePrefix }}category_id" name="category_id">
                                    <option value="" data-admin-en="Select category" data-admin-as="শ্ৰেণী বাছনি কৰক">Select category</option>
                                    @foreach ($selectOptions['categories'] ?? [] as $optionValue => $optionLabel)
                                        <option value="{{ $optionValue }}" @selected((string) old('category_id', $record?->category_id) === (string) $optionValue)>{{ $optionLabel }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}period"><span data-admin-en="Period" data-admin-as="কাল">Period</span></label>
                                <input class="form-control admin-input rounded-4 @error('period') is-invalid @enderror" id="{{ $namePrefix }}period" type="text" name="period" value="{{ old('period', $record?->period) }}">
                                @error('period')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}slug"><span data-admin-en="Slug" data-admin-as="স্লাগ">Slug</span></label>
                                <input class="form-control admin-input rounded-4 @error('slug') is-invalid @enderror" id="{{ $namePrefix }}slug" type="text" name="slug" value="{{ old('slug', $record?->slug) }}">
                                <div class="form-text admin-muted"><span data-admin-en="Leave blank to auto-generate." data-admin-as="স্বয়ংক্ৰিয়ভাৱে সৃষ্টি কৰিবলৈ খালী ৰাখক।">Leave blank to auto-generate.</span></div>
                                @error('slug')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 col-md-3">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}status"><span data-admin-en="Status" data-admin-as="স্থিতি">Status</span></label>
                                <select class="form-select admin-input rounded-4 @error('status') is-invalid @enderror" id="{{ $namePrefix }}status" name="status">
                                    <option value="" data-admin-en="Select status" data-admin-as="স্থিতি বাছনি কৰক">Select status</option>
                                    @foreach ($selectOptions['statuses'] ?? [] as $optionValue => $optionLabel)
                                        <option value="{{ $optionValue }}" @selected((string) old('status', $record?->status) === (string) $optionValue)>{{ $optionLabel }}</option>
                                    @endforeach
                                </select>
                                @error('status')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 col-md-3">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}sort_order"><span data-admin-en="Sort Order" data-admin-as="ক্ৰম">Sort Order</span></label>
                                <input class="form-control admin-input rounded-4 @error('sort_order') is-invalid @enderror" id="{{ $namePrefix }}sort_order" type="number" name="sort_order" value="{{ old('sort_order', $record?->sort_order) }}">
                                @error('sort_order')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}imageSearch"><span data-admin-en="Image" data-admin-as="ছবি">Image</span></label>
                                {{-- This picker shows only recent images; the full media library opens in the Browse modal. --}}
                                <div class="artefact-image-picker" data-artefact-image-picker data-upload-url="{{ route('admin.media-assets.store') }}" data-browse-url="{{ route('admin.media-assets.search-images') }}">
                                    <input type="hidden" name="image_id" value="{{ $selectedImageId }}" data-artefact-image-input>

                                    <div class="artefact-image-picker-top">
                                        <div class="artefact-image-selected" data-artefact-image-selected>
                                            <span class="artefact-image-selected-thumb">
                                                <i data-lucide="image" width="18" height="18"></i>
                                            </span>
                                            <div>
                                                <strong data-artefact-selected-title data-admin-en="No image selected" data-admin-as="ছবি বাছনি কৰা হোৱা নাই">No image selected</strong>
                                                <p data-artefact-selected-path data-admin-en="Choose an image from the media library below." data-admin-as="তলৰ মিডিয়া লাইব্ৰেৰীৰ পৰা ছবি বাছনি কৰক।">Choose an image from the media library below.</p>
                                            </div>
                                        </div>
                                        <div class="artefact-image-actions">
                                            <label class="btn btn-sm btn-success rounded-3 mb-0" for="{{ $namePrefix }}imageUpload">
                                                <span data-admin-en="Upload" data-admin-as="আপলোড">Upload</span>
                                            </label>
                                            <input class="visually-hidden" id="{{ $namePrefix }}imageUpload" type="file" accept="image/*" multiple data-artefact-upload-image>
                                            <button class="btn btn-sm glass-card admin-text rounded-3" type="button" data-artefact-browse-media><span data-admin-en="Browse" data-admin-as="ব্ৰাউজ">Browse</span></button>
                                            <button class="btn btn-sm glass-card admin-text rounded-3" type="button" data-artefact-clear-image><span data-admin-en="Clear" data-admin-as="আঁতৰাওক">Clear</span></button>
                                        </div>
                                    </div>
                                    <div class="artefact-upload-status" data-artefact-upload-status hidden></div>

                                    <div class="input-group">
                                        <span class="input-group-text admin-input border-end-0 rounded-start-4"><i data-lucide="search" width="16" height="16"></i></span>
                                        <input class="form-control admin-input border-start-0 rounded-end-4" id="{{ $namePrefix }}imageSearch" type="search" placeholder="Search by title or path" data-admin-placeholder-en="Search by title or path" data-admin-placeholder-as="শিৰোনাম বা পথ অনুসন্ধান কৰক" data-artefact-image-search>
                                    </div>

                                    <div class="artefact-image-grid" data-artefact-image-grid>
                                        @forelse ($mediaAssets as $asset)
                                            @php
                                                $imageUrl = $mediaImageUrl($asset);
                                                $label = $asset->title_en ?: basename($asset->file_path);
                                                $searchText = str($label.' '.$asset->title_as.' '.$asset->file_path)->lower();
                                                $isSelected = $selectedImageId === (string) $asset->id;
                                            @endphp

                                            <button class="artefact-image-option {{ $isSelected ? 'is-selected' : '' }}" type="button" data-image-id="{{ $asset->id }}" data-image-title="{{ $label }}" data-image-path="{{ $asset->file_path }}" data-image-url="{{ $imageUrl }}" data-image-search="{{ $searchText }}">
                                                <img src="{{ $imageUrl }}" alt="{{ $asset->alt_text_en ?: $label }}" loading="lazy">
                                                <span>{{ str($label)->limit(42) }}</span>
                                            </button>
                                        @empty
                                            <div class="artefact-image-empty" data-admin-en="No active image media found." data-admin-as="সক্ৰিয় ছবি মিডিয়া পোৱা নগল।">No active image media found.</div>
                                        @endforelse
                                    </div>
                                </div>

                                @error('image_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <input type="hidden" name="is_featured" value="0">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" id="{{ $namePrefix }}is_featured" name="is_featured" value="1" @checked((bool) old('is_featured', $record?->is_featured))>
                                    <label class="form-check-label fw-semibold" for="{{ $namePrefix }}is_featured"><span data-admin-en="Featured" data-admin-as="বিশেষ">Featured</span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                <div class="d-flex flex-column flex-sm-row justify-content-end gap-2 mt-4 pt-3 border-top" style="border-color: var(--admin-border) !important;">
                    <a class="btn glass-card admin-text rounded-4 px-3" href="{{ route('admin.artefacts.index') }}"><span data-admin-en="Cancel" data-admin-as="বাতিল">Cancel</span></a>
                    <button type="submit" class="btn btn-success rounded-4 px-4 fw-semibold"><span data-admin-en="{{ $isEdit ? 'Update' : 'Create' }}" data-admin-as="{{ $isEdit ? 'আপডেট' : 'সৃষ্টি' }}">{{ $isEdit ? 'Update' : 'Create' }}</span></button>
                </div>
            </form>
</section>

@once
    {{-- One shared modal is used by every artefact form, so repeated edit modals stay lightweight. --}}
    <div class="modal fade" id="artefactMediaLibraryModal" tabindex="-1" aria-labelledby="artefactMediaLibraryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen-xl-down artefact-library-dialog modal-dialog-scrollable">
            <div class="modal-content glass-panel admin-text border-0 rounded-4">
                <div class="modal-header" style="border-color: var(--admin-border);">
                    <div>
                        <h2 class="modal-title fs-5 fw-bold" id="artefactMediaLibraryModalLabel"><span data-admin-en="Browse Media Library" data-admin-as="মিডিয়া লাইব্ৰেৰী ব্ৰাউজ কৰক">Browse Media Library</span></h2>
                        <p class="small admin-muted mb-0"><span data-admin-en="Search the full image library and select one image for this artefact." data-admin-as="সম্পূৰ্ণ ছবি লাইব্ৰেৰী অনুসন্ধান কৰি এই প্ৰত্নবস্তুৰ বাবে এখন ছবি বাছনি কৰক।">Search the full image library and select one image for this artefact.</span></p>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    {{-- Server search keeps the artefact form fast even when media grows large. --}}
                    <div class="input-group mb-3">
                        <span class="input-group-text admin-input border-end-0 rounded-start-4"><i data-lucide="search" width="16" height="16"></i></span>
                        <input class="form-control admin-input border-start-0 rounded-end-4" type="search" placeholder="Search image title, alt text, or path" data-admin-placeholder-en="Search image title, alt text, or path" data-admin-placeholder-as="ছবিৰ শিৰোনাম, বিকল্প পাঠ বা পথ অনুসন্ধান কৰক" data-media-library-search>
                    </div>

                    <div class="artefact-library-status" data-media-library-status hidden></div>
                    <div class="artefact-image-grid artefact-library-grid" data-media-library-grid></div>

                    <div class="d-flex justify-content-center mt-3">
                        <button class="btn glass-card admin-text rounded-4 px-4" type="button" data-media-library-load-more hidden><span data-admin-en="Load More" data-admin-as="অধিক লোড কৰক">Load More</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .artefact-form-section {
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid var(--admin-border);
            border-radius: 1rem;
            background: rgba(255, 255, 255, .03);
            scroll-margin-top: 7rem;
        }

        .artefact-page-form {
            display: block;
        }

        .artefact-form-tabs {
            position: sticky;
            top: 0;
            z-index: 5;
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-bottom: 1rem;
            padding: .65rem;
            border: 1px solid var(--admin-border);
            border-radius: 1rem;
            background: var(--admin-panel);
            backdrop-filter: blur(14px);
        }

        .artefact-form-tab {
            border: 1px solid var(--admin-border);
            border-radius: .8rem;
            padding: .55rem .85rem;
            color: var(--admin-text);
            background: var(--admin-card);
            font-weight: 800;
            font-size: .84rem;
            transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
        }

        .artefact-form-tab:hover {
            border-color: rgba(34, 197, 94, .55);
            background: rgba(34, 197, 94, .12);
            transform: translateY(-1px);
        }

        .artefact-page-form .ck.ck-editor {
            color: #111827;
        }

        .artefact-page-form .ck-editor__editable {
            min-height: 12rem;
        }

        .artefact-form-heading {
            display: flex;
            gap: .85rem;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .artefact-form-heading h3 {
            margin: 0;
            font-size: .98rem;
            font-weight: 800;
        }

        .artefact-form-heading p {
            margin: .15rem 0 0;
            color: var(--admin-muted);
            font-size: .78rem;
        }

        .artefact-form-step {
            width: 2.15rem;
            height: 2.15rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: .75rem;
            background: rgba(34, 197, 94, .14);
            color: var(--admin-green);
            border: 1px solid rgba(34, 197, 94, .22);
            font-weight: 800;
            font-size: .78rem;
        }

        .artefact-image-picker {
            border: 1px solid var(--admin-border);
            border-radius: 1rem;
            padding: 1rem;
            background: var(--admin-input);
        }

        .artefact-image-picker-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: .9rem;
        }

        .artefact-image-actions {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            flex: 0 0 auto;
        }

        .artefact-upload-status {
            margin-bottom: .85rem;
            padding: .65rem .75rem;
            border-radius: .75rem;
            color: var(--admin-text);
            background: rgba(34, 197, 94, .1);
            border: 1px solid rgba(34, 197, 94, .24);
            font-size: .82rem;
            font-weight: 700;
        }

        .artefact-upload-status.is-error {
            background: rgba(190, 18, 60, .1);
            border-color: rgba(190, 18, 60, .32);
        }

        .artefact-library-status {
            margin-bottom: .85rem;
            padding: .85rem 1rem;
            border-radius: .85rem;
            color: var(--admin-muted);
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--admin-border);
            font-size: .85rem;
            font-weight: 700;
            text-align: center;
        }

        .artefact-library-grid {
            grid-template-columns: repeat(auto-fill, minmax(9.75rem, 1fr));
            min-height: 18rem;
            max-height: calc(100vh - 17rem);
        }

        .artefact-library-dialog {
            --bs-modal-width: min(94vw, 92rem);
        }

        .artefact-library-dialog .modal-content {
            min-height: min(88vh, 56rem);
        }

        .artefact-library-dialog .modal-body {
            min-height: 0;
        }

        .artefact-image-selected {
            display: flex;
            align-items: center;
            gap: .75rem;
            min-width: 0;
        }

        .artefact-image-selected-thumb {
            width: 3.8rem;
            height: 3rem;
            flex: 0 0 3.8rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: .75rem;
            overflow: hidden;
            background: rgba(255, 255, 255, .06);
            color: var(--admin-muted);
            border: 1px solid var(--admin-border);
        }

        .artefact-image-selected-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .artefact-image-selected strong,
        .artefact-image-selected p {
            display: block;
            max-width: 34rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .artefact-image-selected p {
            margin: .15rem 0 0;
            color: var(--admin-muted);
            font-size: .78rem;
        }

        .artefact-image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
            gap: .75rem;
            max-height: 22rem;
            overflow: auto;
            padding: .15rem;
            margin-top: .85rem;
        }

        .artefact-image-option {
            min-width: 0;
            padding: .45rem;
            border: 1px solid var(--admin-border);
            border-radius: .85rem;
            color: var(--admin-text);
            background: rgba(255, 255, 255, .04);
            text-align: left;
            transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
        }

        .artefact-image-option:hover,
        .artefact-image-option.is-selected {
            border-color: rgba(34, 197, 94, .7);
            background: rgba(34, 197, 94, .12);
            transform: translateY(-1px);
        }

        .artefact-image-option img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            border-radius: .65rem;
            background: rgba(0, 0, 0, .2);
        }

        .artefact-image-option span {
            display: block;
            margin-top: .45rem;
            font-size: .78rem;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .artefact-image-empty {
            grid-column: 1 / -1;
            color: var(--admin-muted);
            text-align: center;
            padding: 2rem 1rem;
        }

        @media (max-width: 575.98px) {
            .artefact-image-picker-top {
                align-items: stretch;
                flex-direction: column;
            }

            .artefact-image-actions {
                justify-content: flex-start;
            }

            .artefact-image-selected strong,
            .artefact-image-selected p {
                max-width: 13rem;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const ckeditorInstances = new Map();

            document.querySelectorAll('[data-scroll-target]').forEach((button) => {
                button.addEventListener('click', () => {
                    document.querySelector(button.dataset.scrollTarget)?.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start',
                    });
                });
            });

            // Load CKEditor once, then initialize every textarea marked with data-ckeditor-field.
            const loadCkeditor = () => new Promise((resolve, reject) => {
                if (window.ClassicEditor) {
                    resolve(window.ClassicEditor);
                    return;
                }

                const existingScript = document.querySelector('script[data-ckeditor-script]');

                if (existingScript) {
                    existingScript.addEventListener('load', () => resolve(window.ClassicEditor));
                    existingScript.addEventListener('error', () => reject(new Error('CKEditor could not be loaded.')));
                    return;
                }

                const script = document.createElement('script');
                script.src = 'https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js';
                script.dataset.ckeditorScript = 'true';
                script.onload = () => resolve(window.ClassicEditor);
                script.onerror = () => reject(new Error('CKEditor could not be loaded.'));
                document.head.appendChild(script);
            });

            loadCkeditor()
                .then((ClassicEditor) => Promise.all(
                    Array.from(document.querySelectorAll('[data-ckeditor-field]')).map((textarea) => (
                        ClassicEditor.create(textarea, {
                            toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'undo', 'redo'],
                        }).then((editor) => {
                            ckeditorInstances.set(textarea, editor);
                        })
                    ))
                ))
                .catch((error) => {
                    console.error(error);
                });

            // CKEditor keeps its own state, so copy it back into the textareas before Laravel receives the form.
            document.querySelectorAll('.artefact-page-form').forEach((form) => {
                form.addEventListener('submit', () => {
                    ckeditorInstances.forEach((editor, textarea) => {
                        textarea.value = editor.getData();
                    });
                });
            });

            const libraryModalElement = document.getElementById('artefactMediaLibraryModal');
            const libraryModal = libraryModalElement ? new bootstrap.Modal(libraryModalElement) : null;
            const librarySearch = libraryModalElement?.querySelector('[data-media-library-search]');
            const libraryGrid = libraryModalElement?.querySelector('[data-media-library-grid]');
            const libraryStatus = libraryModalElement?.querySelector('[data-media-library-status]');
            const libraryLoadMore = libraryModalElement?.querySelector('[data-media-library-load-more]');
            let activePickerApi = null;
            let libraryBrowseUrl = '';
            let libraryPage = 1;
            let librarySearchTerm = '';

            // This creates the same image tile shape for recent images, uploaded images, and library search results.
            const createImageOption = (record, onSelect) => {
                const option = document.createElement('button');
                const title = record.title_en || record.file_path || 'Image';
                const searchText = `${title} ${record.title_as || ''} ${record.file_path || ''}`.toLowerCase();

                option.className = 'artefact-image-option';
                option.type = 'button';
                option.dataset.imageId = record.id;
                option.dataset.imageTitle = title;
                option.dataset.imagePath = record.file_path || '';
                option.dataset.imageUrl = record.url || '';
                option.dataset.imageSearch = searchText;

                const image = document.createElement('img');
                image.src = record.url || '';
                image.alt = record.alt_text_en || title;
                image.loading = 'lazy';

                const label = document.createElement('span');
                label.textContent = title.length > 42 ? `${title.slice(0, 39)}...` : title;

                option.append(image, label);
                option.addEventListener('click', () => onSelect(option, record));

                return option;
            };

            const setLibraryStatus = (message, show = true) => {
                if (! libraryStatus) {
                    return;
                }

                libraryStatus.textContent = message;
                libraryStatus.hidden = ! show;
            };

            // This function calls the backend image search endpoint and paints the Browse modal grid.
            const loadLibraryImages = async ({ append = false } = {}) => {
                if (! libraryBrowseUrl || ! libraryGrid || ! libraryLoadMore) {
                    return;
                }

                const url = new URL(libraryBrowseUrl, window.location.origin);
                url.searchParams.set('page', String(libraryPage));
                url.searchParams.set('per_page', '24');

                if (librarySearchTerm !== '') {
                    url.searchParams.set('q', librarySearchTerm);
                }

                try {
                    setLibraryStatus('Loading images...');
                    libraryLoadMore.hidden = true;

                    const response = await fetch(url, {
                        headers: { Accept: 'application/json' },
                    });

                    const payload = await response.json();

                    if (! response.ok) {
                        throw new Error(payload.message || 'Unable to load media images.');
                    }

                    if (! append) {
                        libraryGrid.replaceChildren();
                    }

                    payload.records.forEach((record) => {
                        libraryGrid.append(createImageOption(record, (_option, selectedRecord) => {
                            activePickerApi?.selectRecord(selectedRecord);
                            libraryModal?.hide();
                        }));
                    });

                    setLibraryStatus(payload.records.length === 0 && ! append ? 'No images found.' : '', payload.records.length === 0 && ! append);
                    libraryLoadMore.hidden = ! payload.pagination?.has_more;
                } catch (error) {
                    setLibraryStatus(error.message || 'Unable to load media images.');
                }
            };

            let librarySearchTimer = null;

            librarySearch?.addEventListener('input', () => {
                clearTimeout(librarySearchTimer);

                librarySearchTimer = setTimeout(() => {
                    librarySearchTerm = librarySearch.value.trim();
                    libraryPage = 1;
                    loadLibraryImages();
                }, 250);
            });

            libraryLoadMore?.addEventListener('click', () => {
                libraryPage += 1;
                loadLibraryImages({ append: true });
            });

            document.querySelectorAll('[data-artefact-image-picker]').forEach((picker) => {
                const input = picker.querySelector('[data-artefact-image-input]');
                const search = picker.querySelector('[data-artefact-image-search]');
                const grid = picker.querySelector('[data-artefact-image-grid]');
                let options = Array.from(picker.querySelectorAll('[data-image-id]'));
                const clearButton = picker.querySelector('[data-artefact-clear-image]');
                const browseButton = picker.querySelector('[data-artefact-browse-media]');
                const uploadInput = picker.querySelector('[data-artefact-upload-image]');
                const uploadStatus = picker.querySelector('[data-artefact-upload-status]');
                const selectedTitle = picker.querySelector('[data-artefact-selected-title]');
                const selectedPath = picker.querySelector('[data-artefact-selected-path]');
                const selectedPreview = picker.querySelector('.artefact-image-selected-thumb');
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

                const renderEmptyPreview = () => {
                    const icon = document.createElement('i');
                    icon.setAttribute('data-lucide', 'image');
                    icon.setAttribute('width', '18');
                    icon.setAttribute('height', '18');
                    selectedPreview.replaceChildren(icon);
                    lucide.createIcons();
                };

                const renderSelection = (option) => {
                    options.forEach((item) => item.classList.toggle('is-selected', option && item === option));

                    if (! option) {
                        selectedTitle.textContent = 'No image selected';
                        selectedPath.textContent = 'Choose an image from the media library below.';
                        renderEmptyPreview();
                        return;
                    }

                    selectedTitle.textContent = option.dataset.imageTitle || 'Selected image';
                    selectedPath.textContent = option.dataset.imagePath || '';

                    const image = document.createElement('img');
                    image.src = option.dataset.imageUrl || '';
                    image.alt = '';
                    selectedPreview.replaceChildren(image);
                };

                const bindOption = (option) => {
                    option.addEventListener('click', () => {
                        input.value = option.dataset.imageId;
                        renderSelection(option);
                    });
                };

                const setUploadStatus = (message, isError = false) => {
                    uploadStatus.textContent = message;
                    uploadStatus.hidden = false;
                    uploadStatus.classList.toggle('is-error', isError);
                };

                const clearUploadStatus = () => {
                    uploadStatus.textContent = '';
                    uploadStatus.hidden = true;
                    uploadStatus.classList.remove('is-error');
                };

                // This inserts a selected library/upload image into the small picker if it is not there yet.
                const ensureOptionFromRecord = (record) => {
                    let option = options.find((item) => item.dataset.imageId === String(record.id));

                    if (option) {
                        return option;
                    }

                    option = createImageOption(record, (selectedOption) => {
                        input.value = selectedOption.dataset.imageId;
                        renderSelection(selectedOption);
                    });

                    grid.prepend(option);
                    options = [option, ...options];

                    return option;
                };

                const selectRecord = (record) => {
                    const option = ensureOptionFromRecord(record);
                    input.value = String(record.id);
                    renderSelection(option);
                    search.value = '';
                    options.forEach((item) => {
                        item.hidden = false;
                    });
                };

                options.forEach(bindOption);

                clearButton.addEventListener('click', () => {
                    input.value = '';
                    renderSelection(null);
                });

                browseButton.addEventListener('click', () => {
                    activePickerApi = { selectRecord };
                    libraryBrowseUrl = picker.dataset.browseUrl;
                    libraryPage = 1;
                    librarySearchTerm = '';

                    if (librarySearch) {
                        librarySearch.value = '';
                    }

                    libraryGrid?.replaceChildren();
                    libraryModal?.show();
                    loadLibraryImages();
                });

                search.addEventListener('input', () => {
                    const term = search.value.trim().toLowerCase();

                    options.forEach((option) => {
                        option.hidden = term !== '' && ! (option.dataset.imageSearch || '').includes(term);
                    });
                });

                uploadInput.addEventListener('change', async () => {
                    const files = Array.from(uploadInput.files || []);

                    if (files.length === 0) {
                        return;
                    }

                    const invalidFile = files.find((file) => ! file.type.startsWith('image/'));

                    if (invalidFile) {
                        setUploadStatus('Please choose image files only.', true);
                        uploadInput.value = '';
                        return;
                    }

                    const formData = new FormData();
                    files.forEach((file) => {
                        formData.append('media_files[]', file);
                    });
                    formData.append('status', 'active');

                    try {
                        setUploadStatus(files.length === 1 ? 'Uploading image...' : `Uploading ${files.length} images...`);
                        uploadInput.disabled = true;

                        const response = await fetch(picker.dataset.uploadUrl, {
                            method: 'POST',
                            headers: {
                                Accept: 'application/json',
                                'X-CSRF-TOKEN': csrfToken,
                            },
                            body: formData,
                        });

                        const payload = await response.json().catch(() => ({}));

                        if (! response.ok) {
                            const message = payload.message || Object.values(payload.errors || {}).flat()[0] || 'Image upload failed.';
                            throw new Error(message);
                        }

                        const records = (payload.records || []).filter((item) => item.file_type === 'image');

                        if (records.length === 0) {
                            throw new Error('No uploaded files were saved as images.');
                        }

                        picker.querySelector('.artefact-image-empty')?.remove();

                        const newOptions = records.map((record) => ensureOptionFromRecord(record));
                        input.value = String(records[0].id);
                        renderSelection(newOptions[0]);
                        search.value = '';
                        options.forEach((item) => {
                            item.hidden = false;
                        });
                        setUploadStatus(records.length === 1 ? 'Image uploaded and selected.' : `${records.length} images uploaded. First image selected.`);
                    } catch (error) {
                        setUploadStatus(error.message || 'Image upload failed.', true);
                    } finally {
                        uploadInput.disabled = false;
                        uploadInput.value = '';
                    }
                });

                renderSelection(options.find((option) => option.dataset.imageId === input.value));
            });
        });
    </script>
@endonce