{{-- Renders one addon field. $obj = JS expression for the data object, $f = JS variable holding the field schema. --}}
<div class="pb-field" :class="{{ $f }}.width === 'half' ? 'pb-field--half' : 'pb-field--full'">
    <template x-if="{{ $f }}.type !== 'toggle'">
        <label class="pb-label" x-text="{{ $f }}.label"></label>
    </template>

    <template x-if="{{ $f }}.type === 'text'">
        <input type="text" class="home-input" x-model="{{ $obj }}[{{ $f }}.key]" :placeholder="{{ $f }}.placeholder || ''">
    </template>

    <template x-if="{{ $f }}.type === 'textarea'">
        <textarea :rows="{{ $f }}.rows || 3" class="home-textarea" x-model="{{ $obj }}[{{ $f }}.key]"></textarea>
    </template>

    <template x-if="{{ $f }}.type === 'code'">
        <textarea rows="8" class="home-textarea pb-code" spellcheck="false" x-model="{{ $obj }}[{{ $f }}.key]" placeholder="<iframe …></iframe>"></textarea>
    </template>

    <template x-if="{{ $f }}.type === 'number'">
        <input type="number" class="home-input" :min="{{ $f }}.min" :max="{{ $f }}.max" x-model.number="{{ $obj }}[{{ $f }}.key]">
    </template>

    <template x-if="{{ $f }}.type === 'select'">
        <select class="home-select" x-model="{{ $obj }}[{{ $f }}.key]">
            <template x-for="(optionLabel, optionValue) in {{ $f }}.options" :key="optionValue">
                <option :value="optionValue" x-text="optionLabel" :selected="String({{ $obj }}[{{ $f }}.key]) === String(optionValue)"></option>
            </template>
        </select>
    </template>

    <template x-if="{{ $f }}.type === 'toggle'">
        <label class="pb-switch">
            <input type="checkbox" x-model="{{ $obj }}[{{ $f }}.key]">
            <span class="pb-switch__track" aria-hidden="true"></span>
            <span class="pb-switch__label" x-text="{{ $f }}.label"></span>
        </label>
    </template>

    <template x-if="{{ $f }}.type === 'richtext'">
        <div class="pb-rte" x-data="pbRichtext({{ $obj }}, {{ $f }}.key)">
            <div class="pb-rte__toolbar">
                <button type="button" @click="block('p')" title="Paragraph">¶</button>
                <button type="button" @click="block('h2')" title="Heading 2">H2</button>
                <button type="button" @click="block('h3')" title="Heading 3">H3</button>
                <span class="pb-rte__sep"></span>
                <button type="button" @click="exec('bold')" title="Bold"><strong>B</strong></button>
                <button type="button" @click="exec('italic')" title="Italic"><em>I</em></button>
                <button type="button" @click="exec('underline')" title="Underline"><u>U</u></button>
                <span class="pb-rte__sep"></span>
                <button type="button" @click="exec('insertUnorderedList')" title="Bullet list">• List</button>
                <button type="button" @click="exec('insertOrderedList')" title="Numbered list">1. List</button>
                <button type="button" @click="block('blockquote')" title="Quote">❝</button>
                <button type="button" @click="link()" title="Insert link">Link</button>
                <button type="button" @click="exec('unlink')" title="Remove link">Unlink</button>
                <button type="button" @click="exec('removeFormat')" title="Clear formatting">Clear</button>
                <button type="button" class="pb-rte__source" :class="source && 'is-active'" @click="toggleSource()" title="Edit HTML">&lt;/&gt;</button>
            </div>
            <div x-ref="editor" x-show="!source" class="pb-rte__editor prose-admin" contenteditable="true" @input="sync()" @blur="sync()"></div>
            <textarea x-show="source" x-cloak rows="10" class="home-textarea pb-code" spellcheck="false" x-model="{{ $obj }}[{{ $f }}.key]"></textarea>
        </div>
    </template>

    <template x-if="{{ $f }}.type === 'image'">
        <div class="pb-media-field">
            <button type="button" class="pb-media-field__thumb" :class="!{{ $obj }}[{{ $f }}.key] && 'is-empty'" @click="openMedia({{ $obj }}, {{ $f }})">
                <template x-if="{{ $obj }}[{{ $f }}.key]">
                    <img :src="mediaSrc({{ $obj }}[{{ $f }}.key])" :alt="{{ $obj }}[{{ $f }}.key + '_alt'] || ''">
                </template>
                <template x-if="!{{ $obj }}[{{ $f }}.key]">
                    <span class="pb-media-field__empty">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 5h18v14H3zM3 16l5-5 4 4 3-3 6 6M15.5 9.5h.01" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        Add image
                    </span>
                </template>
            </button>
            <div class="pb-media-field__body">
                <div class="pb-media-field__actions">
                    <button type="button" class="home-btn home-btn--primary home-btn--sm" @click="openMedia({{ $obj }}, {{ $f }})">Upload / Select</button>
                    <button type="button" class="home-btn home-btn--ghost home-btn--sm" x-show="{{ $obj }}[{{ $f }}.key]" @click="{{ $obj }}[{{ $f }}.key] = ''">Remove</button>
                </div>
                <input type="text" class="home-input pb-input-sm" x-model="{{ $obj }}[{{ $f }}.key]" placeholder="/images/photo.jpg or https://…">
                <input type="text" class="home-input pb-input-sm" x-model="{{ $obj }}[{{ $f }}.key + '_alt']" placeholder="Alt text — describe the image for SEO & accessibility">
            </div>
        </div>
    </template>

    <template x-if="{{ $f }}.type === 'file'">
        <div class="pb-file-field">
            <div class="pb-file-field__row">
                <span class="pb-file-field__icon" x-text="fileExt({{ $obj }}[{{ $f }}.key])"></span>
                <div class="pb-file-field__meta">
                    <p class="pb-file-field__name" x-text="{{ $obj }}[{{ $f }}.key + '_name'] || fileName({{ $obj }}[{{ $f }}.key]) || 'No file selected'"></p>
                    <p class="pb-file-field__size" x-text="{{ $obj }}[{{ $f }}.key + '_size'] || ({{ $f }}.accept === 'video' ? 'MP4 / WebM up to 10 MB' : 'PDF, DOCX, XLSX, ZIP… up to 10 MB')"></p>
                </div>
                <button type="button" class="home-btn home-btn--primary home-btn--sm" @click="openMedia({{ $obj }}, {{ $f }})">Upload / Select</button>
                <button type="button" class="home-btn home-btn--ghost home-btn--sm" x-show="{{ $obj }}[{{ $f }}.key]" @click="{{ $obj }}[{{ $f }}.key] = ''; {{ $obj }}[{{ $f }}.key + '_name'] = ''; {{ $obj }}[{{ $f }}.key + '_size'] = ''">Remove</button>
            </div>
            <input type="text" class="home-input pb-input-sm" x-model="{{ $obj }}[{{ $f }}.key]" placeholder="File URL">
        </div>
    </template>

    @unless($nested ?? false)
        <template x-if="{{ $f }}.type === 'repeater'">
            <div class="pb-repeater">
                <template x-for="(item, i) in {{ $obj }}[{{ $f }}.key]" :key="item._k">
                    <div class="pb-repeater__item" :class="isItemOpen(section.uid, {{ $f }}.key, item._k) && 'is-open'">
                        <div class="pb-repeater__head" @click="toggleItem(section.uid, {{ $f }}.key, item._k)">
                            <span class="pb-repeater__index" x-text="i + 1"></span>
                            <template x-if="itemThumb({{ $f }}, item)">
                                <img class="pb-repeater__thumb" :src="itemThumb({{ $f }}, item)" alt="">
                            </template>
                            <span class="pb-repeater__title" x-text="itemLabel({{ $f }}, item, i)"></span>
                            <span class="pb-repeater__tools" @click.stop>
                                <button type="button" title="Move up" :disabled="i === 0" @click="moveItem({{ $obj }}, {{ $f }}, i, i - 1)">↑</button>
                                <button type="button" title="Move down" :disabled="i === {{ $obj }}[{{ $f }}.key].length - 1" @click="moveItem({{ $obj }}, {{ $f }}, i, i + 1)">↓</button>
                                <button type="button" title="Duplicate" @click="duplicateItem({{ $obj }}, {{ $f }}, i)">⧉</button>
                                <button type="button" title="Delete" class="is-danger" @click="removeItem({{ $obj }}, {{ $f }}, i)">✕</button>
                            </span>
                            <svg class="pb-repeater__chevron" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"/></svg>
                        </div>
                        <div class="pb-repeater__body" x-show="isItemOpen(section.uid, {{ $f }}.key, item._k)">
                            <div class="pb-fields">
                                <template x-for="sub in {{ $f }}.fields" :key="sub.key">
                                    @include('admin.pages.builder-partials.field', ['obj' => 'item', 'f' => 'sub', 'nested' => true])
                                </template>
                            </div>
                        </div>
                    </div>
                </template>

                <div class="pb-repeater__footer">
                    <button type="button" class="pb-repeater__add" :disabled="{{ $obj }}[{{ $f }}.key].length >= {{ $f }}.max" @click="addItem({{ $obj }}, {{ $f }}, section.uid)">
                        <span>+</span> Add <span x-text="singular({{ $f }}).toLowerCase()"></span>
                    </button>
                    <span class="pb-repeater__count" x-text="`${ {{ $obj }}[{{ $f }}.key].length } / ${ {{ $f }}.max }`"></span>
                </div>
            </div>
        </template>
    @endunless

    <template x-if="{{ $f }}.help">
        <p class="pb-help" x-text="{{ $f }}.help"></p>
    </template>
</div>