@props(['translations' => []])
@php
    $menu = App\Models\Access\Menu::findOrFail(app('menuId'));
@endphp
<style>
    [x-cloak] {
        display: none !important;
    }
</style>
<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 }}'">
                {{-- <x-dynamic-component :component="'svg.' . $lang . '-flag'" class="w-4 h-4" /> --}}
                <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  ">
                @foreach (json_decode($menu->fields, true) as $key => $field)
                    <x-form.label for="translations.data.{{ $lang }}.{{ $key }}"
                        class="flex items-center">
                        {{ __($field) }}:
                    </x-form.label>
                    <x-form.input focus=false type="text"
                        wire:model="translations.data.{{ $lang }}.{{ $key }}"
                        id="translations.data.{{ $lang }}.{{ $key }}"
                        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="translations.data.{{ $lang }}.{{ $key }}"></x-form.input-error>
                @endforeach
            </div>
        @endforeach
    </div>
</div>