@props(['scenario', 'editable' => true])
<style>
.command-current { background-color: #F59E0B !important; box-shadow: 4px 4px 8px -4px #F59E0B; } /*lightBlue*/
.command-done    { background-color: #10B981 !important; box-shadow: 4px 4px 8px -4px #5CBBFF; } /*success*/
.delay-current   { background-color: #F59E0B !important; box-shadow: 4px 4px 8px -4px #F59E0B; } /*danger*/
.delay-done   { background-color: #10B981 !important; box-shadow: 4px 4px 8px -4px #5CBBFF; } /*success*/
</style>
<div id="diagram-container" class="flex flex-col items-center gap-2 overflow-y-auto max-h-[432px]">
    <div class="flex flex-col gap-2 items-center">
        <div class="flex flex-col items-center text-center">
            @if(isset($scenario['name']))
                <span>{{ $scenario['name'] }}</span>
            @endif
            <!-- <span>{{ $scenario['info'] }}</span> -->
        </div>
        @foreach($scenario['items'] as $index => $item)
            <div class="flex flex-col items-center gap-2">
                <div class="flex items-center gap-1">
                    @if($editable ?? true)
                        @if($item['type'] === 'command')
                            <button wire:click="editCommand({{ $index }})" class="border-none bg-transparent cursor-pointer">
                                <img src="{{ asset('icons/emulation/edit.svg') }}" alt="Edit Icon" class="w-4 h-4">
                            </button>
                        @elseif($item['type'] === 'delay')
                            <button wire:click="editDelay({{ $index }})" class="border-none bg-transparent cursor-pointer">
                                <img src="{{ asset('icons/emulation/edit.svg') }}" alt="Edit Icon" class="w-4 h-4">
                            </button>
                        @endif
                    @endif

                    @if($item['type'] === 'command')
                        <div id="command-{{ $index }}" class="w-auto text-center py-2 px-4 bg-secondary text-white text-sm rounded-md shadow-md transition-all duration-300">
                            <span>{{ $item['value'] }}</span>
                        </div>
                    @elseif($item['type'] === 'delay')
                        <div id="delay-{{ $index }}" class="w-14 h-14 text-xs bg-lightRed text-white rounded-full flex items-center justify-center text-center transition-all duration-300">
                            <span>{{ $item['value'] }}</span>
                        </div>
                    @endif

                    @if($editable ?? true)
                        @if($item['type'] === 'command')
                            <button wire:click="deleteNode({{ $index }})">
                                <img src="{{ asset('icons/emulation/remove.svg') }}" alt="Remove Icon" class="w-4 h-4">
                            </button>
                        @elseif($item['type'] === 'delay')
                            <button wire:click="deleteNode({{ $index }})">
                                <img src="{{ asset('icons/emulation/remove.svg') }}" alt="Remove Icon" class="w-4 h-4">
                            </button>
                        @endif
                    @endif
                </div>

                @if($index < count($scenario['items']) - 1)
                    <div>
                        <img src="{{ asset('icons/emulation/arrow-down.svg') }}" alt="Arrow Down Icon" class="w-6 h-6">
                    </div>
                @endif
            </div>
        @endforeach
    </div>
</div>