{{-- The "add a step here" button between steps. A condition may only be added at the very end of a list. --}}
@unless ($readOnly)
    <div class="relative flex justify-center" x-data="{ open: false }" x-on:click.outside="open = false">
        <button type="button" x-on:click="open = !open" class="-my-1 flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 bg-white text-sm leading-none text-gray-500 hover:border-indigo-400 hover:text-indigo-600" aria-label="افزودن مرحله">+</button>

        <div x-show="open" x-cloak x-transition.opacity class="absolute top-6 z-20 w-40 rounded-lg border border-gray-200 bg-white p-1 text-sm shadow-lg">
            <button type="button" wire:click="addStep('{{ $listPath }}', {{ $index }}, 'sms')" x-on:click="open = false" class="block w-full rounded px-3 py-1.5 text-start hover:bg-gray-50">پیامک</button>
            <button type="button" wire:click="addStep('{{ $listPath }}', {{ $index }}, 'wait')" x-on:click="open = false" class="block w-full rounded px-3 py-1.5 text-start hover:bg-gray-50">انتظار</button>
            @if ($allowCondition)
                <button type="button" wire:click="addStep('{{ $listPath }}', {{ $index }}, 'condition')" x-on:click="open = false" class="block w-full rounded px-3 py-1.5 text-start hover:bg-gray-50">شرط (دو شاخه)</button>
            @endif
        </div>
    </div>
@endunless