@props([
    'name',
    'label' => null,
    'values' => [],
    'hint' => null,
    'placeholder' => '',
])

@php($rows = old($name, $values ?: []))

{{-- Repeating single-line inputs: sector services, media tags, hero badges. --}}
<div {{ $attributes->only('class') }} x-data="repeater({{ Js::from(array_values(array_filter((array) $rows, fn ($v) => filled($v)))) }})">
    @if ($label)
        <span class="form-label">{{ $label }}</span>
    @endif

    <template x-for="(row, index) in rows" :key="index">
        <div class="mb-2 flex gap-2">
            <input type="text" :name="'{{ $name }}[' + index + ']'" x-model="rows[index]"
                   placeholder="{{ $placeholder }}" class="form-input">
            <button type="button" @click="remove(index)" class="btn-outline btn-sm shrink-0" aria-label="Remove row">
                <x-icon name="trash" class="size-4" />
            </button>
        </div>
    </template>

    <button type="button" @click="add()" class="btn-ghost btn-sm mt-1">
        <x-icon name="plus" class="size-4" /> Add row
    </button>

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