@if ($attributeValueId)
        <div class="my-[20px]">

            @if ($attributeValues->values()->exists())
                <div class="relative shadow-md rounded-[10px] mb-[20px] overflow-auto bg-gray-100 overflow-x-auto overflow-y-auto"
                    id="scrollableContainer">

                    <table class="text-left text-white table-auto w-full ">
                        <thead
                            class="sticky top-0 z-10 text-left font-mulish font-normal text-sm text-white bg-black max-[500px]:text-sm">
                            <tr class="max-[500px]:text-sm font-mulish font-normal  text-table">
                                <th class="min-w-[20px] p-[10px] break-words text-ellipsis font-normal overflow-hidden"
                                    scope="col">
                                </th>
                                <th
                                    class="min-w-[50px] p-[10px] break-words text-ellipsis text-left overflow-hidden font-normal">
                                    {{ __('Attribute value') }}
                                </th>
                                <th
                                    class="min-w-[50px] p-[10px] break-words text-ellipsis text-center overflow-hidden font-normal">
                                    {{ __('Attribute value order') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-300 " id="data-body">
                            @foreach ($attributeValues->values()->get() as $value)
                                <tr
                                    class="relative w-full  text-black max-[500px]:text-sm text-table font-mulish group-hover-enabled group hover:bg-gray-200">
                                    <td
                                        class="py-[10px] right-0 ml-[20px] w-[100px] flex transition-opacity duration-200 items-center justify-center gap-[20px] whitespace-nowrap">
                                        <x-svg.delete title="{{ __('Delete entry') }}" wire:click='deleteValue({{ $value->id }})'
                                            class="cursor-pointer w-5 h-5 fill-red-500" />
                                    </td>
                                    <td class="p-[10px] font-normal text-left">
                                        {{ $value->translations[0]->name ?? __("It doesn't matter in this language") }}
                                    </td>
                                    <td class="p-[10px] font-normal text-center">{{ $value->order }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>
            @endif

            <form class="shadow-md rounded-[10px] px-2  bg-slate-50 border-t border-slate-100"
                wire:submit.prevent="createValues">
                <div x-data="{ activeLang: '{{ App\Models\Lang::where('is_default', true)->first()->name ?? App::getLocale() }}' }" class="p-1 mb-4">
                    <div class="flex space-x-2">
                        @foreach (App\Models\Lang::active()->pluck('name') as $lang)
                            <button type="button" class="mr-2 relative flex p-2 items-center space-x-1 border-solid"
                                :class="activeLang === '{{ $lang }}'
                                    ?
                                    'border-x border-t top-px bg-[#EFEFEF] border-gray-400 border-bottom-0 text-gray-600' :
                                    'text-gray-600'"
                                @click.prevent="activeLang = '{{ $lang }}'">
                                <span x-cloak>{{ Str::upper($lang) }}</span>
                            </button>
                        @endforeach
                    </div>

                    <div x-cloak class="border border-gray-400 bg-[#EFEFEF] rounded-[1px] p-2">
                        @foreach (App\Models\Lang::active()->pluck('name') as $lang)
                            <div x-cloak x-show="activeLang === '{{ $lang }}'"
                                class="flex gap-2 flex-col w-full">
                                <x-form.label for="attributeValueForm.value.{{ $lang }}.name"
                                    class="flex items-center">
                                    {{ __('Attribute value') }} ({{ strtoupper($lang) }}):
                                </x-form.label>
                                <x-form.input focus=false type="text"
                                    wire:model="attributeValueForm.value.{{ $lang }}.name"
                                    id="attributeValueForm.value.{{ $lang }}.name"
                                    class="text-sm border-gray-300 focus:outline-none focus:ring-0 focus:border-gray-400 focus:ring-opacity-50 bg-white block w-full" />
                                <x-form.input-error
                                    for="attributeValueForm.value.{{ $lang }}.name"></x-form.input-error>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="col-span-2 md:col-span-1">
                    <x-form.label>{{ __('Attribute value order') }}:</x-form.label>
                    <x-form.input oninput="this.value = this.value.replace(/[^0-9]/g, '')" type="text"
                        wire:model="attributeValueForm.value.order" />
                    <x-form.input-error for="attributeValueForm.value.order"></x-form.input-error>
                </div>
                <div class="flex flex-row justify-end  text-right  ">

                    <div class="flex justify-end py-2 w-full">
                        <x-button class="ml-3" wire:loading.attr="disabled">
                            <span
                                class="text-base font-mulish font-medium text-white ">{{ __('Add') }}</span></x-button>
                    </div>
                </div>
            </form>


        </div>
    @endif