@php
    $edit = isset($item);
@endphp
<input type="hidden" name="id[]" value="{{ $edit ? $item->uuid : null }}">
<div class="rounded-lg bg-gray-300 dark:bg-gray-700 p-5 hover:shadow-2xl shadow-white dark:shadow-black">
    <div
        class="NoChart {{ isset($item) ? 'hidden' : 'flex' }} flex-col justify-center items-center space-y-3 hover:cursor-pointer hover:underline"
        onclick="EnableSelection(this)">
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor"
             class="bi bi-plus-square-dotted" viewBox="0 0 16 16">
            <path
                d="M2.5 0q-.25 0-.487.048l.194.98A1.5 1.5 0 0 1 2.5 1h.458V0zm2.292 0h-.917v1h.917zm1.833 0h-.917v1h.917zm1.833 0h-.916v1h.916zm1.834 0h-.917v1h.917zm1.833 0h-.917v1h.917zM13.5 0h-.458v1h.458q.151 0 .293.029l.194-.981A2.5 2.5 0 0 0 13.5 0m2.079 1.11a2.5 2.5 0 0 0-.69-.689l-.556.831q.248.167.415.415l.83-.556zM1.11.421a2.5 2.5 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415zM16 2.5q0-.25-.048-.487l-.98.194q.027.141.028.293v.458h1zM.048 2.013A2.5 2.5 0 0 0 0 2.5v.458h1V2.5q0-.151.029-.293zM0 3.875v.917h1v-.917zm16 .917v-.917h-1v.917zM0 5.708v.917h1v-.917zm16 .917v-.917h-1v.917zM0 7.542v.916h1v-.916zm15 .916h1v-.916h-1zM0 9.375v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .916v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .917v.458q0 .25.048.487l.98-.194A1.5 1.5 0 0 1 1 13.5v-.458zm16 .458v-.458h-1v.458q0 .151-.029.293l.981.194Q16 13.75 16 13.5M.421 14.89c.183.272.417.506.69.689l.556-.831a1.5 1.5 0 0 1-.415-.415zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373Q2.25 16 2.5 16h.458v-1H2.5q-.151 0-.293-.029zM13.5 16q.25 0 .487-.048l-.194-.98A1.5 1.5 0 0 1 13.5 15h-.458v1zm-9.625 0h.917v-1h-.917zm1.833 0h.917v-1h-.917zm1.834-1v1h.916v-1zm1.833 1h.917v-1h-.917zm1.833 0h.917v-1h-.917zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z"/>
        </svg>
        <p class="font-bold">
            {{ __('template.AddChart') }}
        </p>
    </div>
    <div class="AddChart {{ $edit ? 'flex' : 'hidden' }} flex-col space-y-2">
        <div class="grid gap-6 mb-6 md:grid-cols-2">
            <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)"
                        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="">
                        {{ __('template.ChooseDevice') }}
                    </option>
                    @foreach($devices as $device)
                        <option value="{{ $device->uuid }}" @selected($edit && $item->GetDevice()->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">
                    {{ __('template.LogCount') }}
                </label>
                <input type="number" name="count[]" value="{{ $edit ? $item->count : 20 }}"
                       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"
                       placeholder="Last n records" min="10" max="100" required/>
            </div>
        </div>
        <div class="grid gap-6 mb-6 md:grid-cols-1">
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('table.register') }}
                </label>
                <select name="{{ $edit ? "registers[$key][]" : 'registers[]' }}" multiple
                        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->GetDevice()->Registers as $register)
                            <option
                                value="{{ $register->uuid }}" @selected(in_array($register->uuid, $item->GetRegisters()->pluck('uuid')->toArray()))>
                                {{ $register->title }}
                            </option>
                        @endforeach
                    @else
                        <option value="">
                            {{ __('template.FirstChooseDevice') }}
                        </option>
                    @endif
                </select>
            </div>
        </div>
        <button type="button" onclick="DisableSelection(this)"
                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>
                {{ __('template.RemoveChart') }}
            </span>
        </button>
    </div>
</div>