@php
    $edit = isset($item);
@endphp
<div class="grid gap-6 md:grid-cols-3 border-2 border-gray-300 dark:border-gray-700 p-2 rounded items-end">
    <div>
        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
            {{ __('forms.device') }}
        </label>
        <select name="devices[]" onchange="GetRegisters(this)" required
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            <option value="">
                {{ __('forms.ChooseOption') }}
            </option>
            @foreach($devices as $key => $device)
                <option value="{{ $device->uuid }}" @selected($edit && $item->device_uuid == $device->uuid)>
                    {{ $device->name }}
                </option>
            @endforeach
        </select>
    </div>
    <div>
        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
            {{ __('forms.register') }}
        </label>
        <select name="registers[]" onchange="GetCommands(this)" required
                class="registers bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            @if($edit)
                @foreach($item->Device->Registers as $register)
                    <option value="{{ $register->uuid }}" @selected($item->uuid == $register->uuid)>
                        {{ $register->title }}
                    </option>
                @endforeach
            @else
                <option value="">
                    {{ __('forms.ChooseDevice') }}
                </option>
            @endif
        </select>
    </div>
    <button type="button" onclick="$(this).parent().remove();"
            class="flex items-center justify-center text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
        <i class="bi bi-trash3-fill me-2"></i>
        <span>
            {{ __('forms.remove') }}
        </span>
    </button>
</div>