@props([
'model',            // property path on the host component, e.g. "uris"
'items' => [],     // current array value
'label' => null,
'addLabel' => 'Add',
'placeholder' => null,
'icon' => null,
'min' => 1,
])

<div {{ $attributes->class(['w-full']) }}>
    @if ($label)
        <label class="label pb-1">
            <span class="label-text font-semibold">{{ $label }}</span>
        </label>
    @endif

    @foreach ($items as $index => $value)
        <x-mary-input
            wire:key="{{ $model }}-row-{{ $index }}"
            wire:model="{{ $model }}.{{ $index }}"
            placeholder="{{ $placeholder }}"
            icon="{{ $icon }}"
            @class([
                'border-r-red-400' => count($items) > $min
            ])
        >
            @if (count($items) > $min)
                <x-slot:append>
                    <x-mary-button
                        icon="o-x-mark"
                        wire:click="removeRepeaterItem('{{ $model }}', {{ $index }})"
                        class="join-item btn-outline btn-error"
                        spinner
                    />
                </x-slot:append>
            @endif
        </x-mary-input>
        <div class="mb-4"></div>
    @endforeach

    <x-mary-button
        :label="$addLabel"
        icon="o-plus"
        wire:click="addRepeaterItem('{{ $model }}')"
        class="btn-primary btn-outline"
    />
</div>