{{--
    One Studio control, bound straight to content.<path>. Text/textarea patch the
    preview live through push(); url/color/select are structural, so the component
    reloads the frame after they change (no push here). `featured` is the plan's
    exclusive ribbon — an action, not a bound value.

    Params: $path, $label, $type (default text), $options ([]), $hint (null),
            $rowIndex (null, for featured), $noFill.
--}}
@php
    $type = $type ?? 'text';
    $options = $options ?? [];
    $hint = $hint ?? null;
    $rowIndex = $rowIndex ?? null;
    $id = 'f-'.\Illuminate\Support\Str::slug(str_replace('.', '-', $path));
    $model = 'content.'.$path;
@endphp
<div class="rf-field">
    <label @if($type !== 'select' && $type !== 'featured') for="{{ $id }}" @endif>{{ $label }}</label>

    @if ($type === 'textarea')
        <textarea id="{{ $id }}" class="rf-textarea" rows="2" style="min-height:62px" {!! $noFill !!}
                  wire:model.live.debounce.400ms="{{ $model }}"
                  @input="push('{{ $path }}', $event.target.value)">{{ data_get($content, $path) }}</textarea>
    @elseif ($type === 'url')
        <input id="{{ $id }}" type="text" class="rf-input" {!! $noFill !!}
               placeholder="{{ __('e.g. #pricing, /register or https://…') }}"
               wire:model.live.debounce.600ms="{{ $model }}">
    @elseif ($type === 'color')
        <input id="{{ $id }}" type="color" class="rf-input rf-input-color"
               wire:model.live.debounce.500ms="{{ $model }}">
    @elseif ($type === 'select')
        <select class="rf-select" wire:model.live="{{ $model }}">
            @foreach ($options as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
        </select>
    @elseif ($type === 'featured')
        <div style="padding-top:4px;">
            <x-admin.switch :active="(bool) data_get($content, $path, false)"
                            wire:click="togglePlanFeatured({{ (int) $rowIndex }})" />
        </div>
    @else
        <input id="{{ $id }}" type="text" class="rf-input" {!! $noFill !!}
               wire:model.live.debounce.400ms="{{ $model }}"
               @input="push('{{ $path }}', $event.target.value)">
    @endif

    @if ($hint)<span class="rf-hint">{{ $hint }}</span>@endif
</div>