<div>

    <div class="ml-auto my-6 flex space-x-4">
        <x-jetstream.button wire:click.prevent="openCreateModal()">
            {{ __('New tag') }}
        </x-jetstream.button>
    </div>

    <!-- Edit modal -->
    @if ($showCreateModal)
        <x-jetstream.dialog-modal wire:model.live="showCreateModal" wire:key="showCreateModal"  maxWidth="4xl" closeButton="true">
            <x-slot name="title">
                {{ str_replace('@PLATFORM_NAME@', platform_name(), __('Add a new activity or skill to @PLATFORM_NAME@')) }}
            </x-slot>

            <x-slot name="content">
                <div class='my-3 text-xl'>
                    <span
                        class="bg-{{ $categorySelected['color'] }}-400 text-black inline-flex items-center rounded-md px-3 py-2 text-sm font-normal">
                        {{ $createTag['name'] ?? ''}}
                    </span>
                </div>
                    <div class="flex my-3">
                        <div class="w-1/3 items-center">{{ __('Name') }}</div>
                        <div class="flex-1">
                            <x-input
                                placeholder="{{ __('Accurate and unique name for this activity, avoid vague or general keywords') }}"
                                wire:model.live="createTag.name"
                                />
                        </div>
                    </div>
                    <div class="flex my-3">
                        <div class="w-1/3 items-center">{{ __('Language') }}</div>
                        <div class="flex-1">
                            <x-select :options="$localeOptions" class="placeholder-gray-300" id="language"
                                option-label="label" option-value="lang_code"
                                placeholder="{{ __('Select a language') }}"
                                wire:model.live="createTag.language"
                                />
                        </div>
                    </div>
                    <div class="flex my-3">
                        <div class="w-1/3 items-center">{{ __('Category') }}</div>
                        <div class="flex-1">
                            <x-select :options="$categoryOptions"
                                :disabled="$translateRadioButton === 'select' && $selectTagTranslation !== null"
                                class="placeholder-gray-300" id="category"
                                option-label="name" option-value="category_id"
                                placeholder="{{ __('Select a category') }}"
                                wire:model.live="createTag.category"
                                />
                        </div>
                    </div>
                    <div class="flex my-3">
                        <div class="w-1/3 items-center">{{ __('Translation') . ' ' . __('(optional)') }}</div>
                            <div class="flex-1">

                            <div class="grid grid-cols-1 gap-6  md:grid-cols-2"
                                    id='select-translation-language'>
                                    <x-select :options="$translationLanguages" class="placeholder-gray-300"
                                        id="translation-language" option-label="name"
                                        option-value="lang_code" placeholder="{{ __('Select a translation language') }}"
                                        wire:model.live="selectTranslationLanguage"/>
                                </div>

                                <div class="grid grid-cols-1 gap-6 " wire:loading wire:target="selectTranslationLanguage">
                                    <x-mini-button flat icon="" primary rounded spinner /> <span>
                                        {{ __('Loading...') }}
                                    </span>
                                </div>

                                @if ($selectTranslationLanguage)

                                    @php
                                    if ($selectTranslationLanguage) {
                                        $translationLang = App\Models\Language::where('lang_code', $selectTranslationLanguage)->first()->name;
                                    } else {
                                        $translationLang = "...";
                                    }
                                    @endphp
                                    <hr class="border-t border-theme-border" py-12 />
                                    <x-radio id="radio-select"
                                        label="{{ str_replace('@LANGUAGE@', $translationLang, __('Select an existing, untranslated activity tag in @LANGUAGE@')) }}"
                                        value="select" wire:model.live="translateRadioButton" />
                                    <div class="my-6 grid grid-cols-1 gap-6 pl-8 md:grid-cols-2"
                                        id='select-translation'>
                                        <x-select :disabled="$translateRadioButton === 'input'" :options="$translationOptions" class="placeholder-gray-300"
                                            id="translation" label="" option-label="name"
                                            option-value="tag_id" placeholder="{{ __('Select a translation') }}"
                                            wire:model.live="selectTagTranslation" />
                                        <div class="mt-6 grid grid-cols-1 gap-6" wire:loading
                                            wire:target="translationOptions">
                                            {{ __('Updating...') }}
                                        </div>
                                    </div>
                                    <hr class="border-t border-theme-border" py-12 />
                                    <x-radio id="radio-input"
                                            label="{{ str_replace('@LANGUAGE@', $translationLang, __('Or create a new Activity tag in @LANGUAGE@')) }}"
                                            value="input" wire:model.live="translateRadioButton" />
                                    <div id="input-translation">
                                        <div class="mt-6 grid grid-cols-1 gap-6 pl-8">

                                            <x-input :disabled="$translateRadioButton === 'select'"
                                                    label="{{ str_replace('@LANGUAGE@', $translationLang, __('Activity tag in @LANGUAGE@ (min. 2 words)')) }}"
                                                    placeholder="{{ !empty($newTag['name'])
                                                        ? '\'' . $createTag['name'] . '\'' . ' ' . __('in') . ' ' . $translationLang
                                                        : __('Activity tag name in') . ' ' . $translationLang }}"
                                                    wire:key="nameInput"
                                                    wire:model.live="inputTagTranslation.name" />
                                            <div class="grid grid-cols-1 gap-6 transition-opacity duration-1500 ease-in-out opacity-100">
                                                @php $localeTranslation = $selectTranslationLanguage ?? '';
                                                    $localeNameTranslation = \Locale::getDisplayName($localeTranslation, $localeTranslation);
                                                @endphp
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                </div>

            {{-- <x-errors /> --}}
            </x-slot>
            <x-slot name="footer">
                <div class="" wire:loading wire:target="createTag">
                    <x-mini-button flat icon="" primary rounded spinner />
                </div>
                <x-jetstream.secondary-button class="ml-3 w-32 justify-center" wire:click="resetForm"
                    wire:loading.attr="disabled">
                    {{ __('Cancel') }}
                </x-jetstream.secondary-button>
                <x-jetstream.button class="ml-3 w-32 justify-center"
                    wire:click.prevent="create()"
                    wire:loading.attr="disabled">
                    {{ __('Save') }}
                </x-jetstream.button>
            </x-slot>
        </x-jetstream.dialog-modal>
    @endif
</div>