<form wire:submit.prevent="submit">

    @include('flash::message')

    @forelse($this->moznosti as $moznost)
        <div class="row py-2">
            <div class="col-auto align-self-center"><span>{{$loop->index + 1}}.</span></div>
            <div class="col">
                <input type="text"
                       autocomplete="off"
                       id="popis_{{$loop->index}}"
                       class="form-control"
                       name="popis_{{$loop->index}}"
                       placeholder="popis možnosti"
                       wire:model="moznosti.{{$loop->index}}.popis"
                >
                @error('moznosti.'.$loop->index.'.popis')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-md btn-danger" wire:click="removeMoznost({{$loop->index}})">
                    <span wire:loading.remove wire:target="removeMoznost({{$loop->index}})" class="icon-trash"></span>
                    <span wire:loading wire:target="removeMoznost({{$loop->index}})" class="spinner-grow spinner-grow-sm" role="status"></span>
                    Odstrániť
                </button>
            </div>
        </div>
    @empty
        <div class="list-group-item bg-light d-flex justify-content-center disabled py-2">
            <span class="text-muted h5">Neboli vytvorené žiadne položky...</span>
        </div>
    @endforelse

    <hr class="my-2">

    <div class="form-row">
        <div class="col d-flex justify-content-center justify-content-between">
            <button type="button" class="btn btn-md btn-success" wire:click="addMoznost()">
                <span wire:loading.remove wire:target="addMoznost" class="icon-plus"></span>
                <span wire:loading wire:target="addMoznost" class="spinner-grow spinner-grow-sm" role="status"></span>
                Pridať ďalšiu možnosť
            </button>

            <button type="button" class="btn btn-md btn-primary" wire:click="saveMoznosti()">
                <span wire:loading.remove wire:target="saveMoznosti" class="icon-floppy"></span>
                <span wire:loading wire:target="saveMoznosti" class="spinner-grow spinner-grow-sm" role="status"></span>
                Uložiť možnosti
            </button>
        </div>
    </div>

</form>
