@if (!is_array($contents) || ($key ?? 'content') == 'gallery')
    @include('admin.pages.settings.manage-pages-sections.sections.input-field', [
        'name' => $name,
        'value' => $contents,
        'key' => $key ?? 'content',
    ])
@else
    <div
        class="space-y-4 xl:space-y-6 {{ $name !== 'contents' ? 'border border-neutral-30 dark:border-neutral-500 rounded-lg p-4 xxl:p-5' : '' }}">
        @foreach ($contents as $key => $value)
            @if (is_array($value) && $key !== 'gallery')
                <div class="white-box">
                    <h6 class="h6 mb-4">{{ snackCaseToNormalWord($key) }}</h6>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        @foreach ($value as $childKey => $childValue)
                            {{-- recursively rendering all input field  --}}
                            @include('admin.pages.settings.manage-pages-sections.sections.input-forms', [
                                'name' => $name . '[' . $key . '][' . $childKey . ']',
                                'contents' => $childValue,
                                'key' => $childKey,
                            ])
                        @endforeach
                    </div>
                </div>
            @else
                {{-- all fields will place from this component  --}}
                @include('admin.pages.settings.manage-pages-sections.sections.input-field', [
                    'name' => $name . '[' . $key . ']',
                    'value' => $value,
                    'key' => $key,
                ])
            @endif
        @endforeach
    </div>
@endif
@push('scripts')
    @vite('resources/admin/js/settings/page-sections/dynamic-sections.js')
@endpush
