<div>
    {{-- Tagify single-tag picker --}}
    <div x-data="callTagPicker">
        <label class="block text-sm text-theme-primary mb-2">
            {{ __('Requested activity or skill') }}
        </label>
        <div wire:ignore>
            <input x-ref="callTagsInput"
                   type="text"
                   data-suggestions='@json($suggestions)'
                   placeholder="{{ __('Select or create a new tag title') }}"
                   class="w-full" />
        </div>
    </div>

    {{-- New Tag Creation Modal --}}
    @if ($modalVisible)
        <form wire:submit.prevent="createTag">
            <x-jetstream.dialog-modal wire:model.live="modalVisible">
                <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-{{ $categoryColor }}-300 inline-flex items-center rounded-md px-3 py-2 text-sm font-normal">
                            {{ $newTag['name'] }}
                        </span>
                    </div>

                    <div class="mt-6 grid grid-cols-1 gap-6">
                        <x-input
                            label="{{ __('Activity tag (min. 2 words)') }}"
                            placeholder="{{ __('Accurate and unique name for this activity, avoid vague or general keywords') }}"
                            wire:model.live="newTag.name" />
                    </div>

                    @if (!$sessionLanguageOk)
                        <div class="mt-3 grid grid-cols-1 gap-6">
                            @php
                                $locale = app()->getLocale();
                                $localeName = \Locale::getDisplayName($locale, $locale);
                            @endphp
                            <x-checkbox :disabled="$sessionLanguageOk" id="sessionLang-ignore-checkbox"
                                        label="{{ __('This tag is in :locale.', ['locale' => $localeName]) }}"
                                        wire:model.live="sessionLanguageIgnored" />
                        </div>
                    @endif

                    @if ($translationPossible && $translationAllowed)
                        <div class="mt-6 grid grid-cols-1 gap-6">
                            <x-checkbox id="checkbox"
                                        label="{{ __('Attach a translation to this tag (recommended)') }}"
                                        wire:model.live="translationVisible" />
                        </div>

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

                    <div>
                        @if ($translationVisible)
                            <div class="my-6 grid grid-cols-1 gap-6 pl-8 md:grid-cols-2" id="select-translation-language">
                                <x-select :options="$translationLanguages" class="placeholder-theme-light"
                                    id="translation-language" label="{{ __('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 pl-8" wire:loading wire:target="selectTranslationLanguage">
                                <x-mini-button flat icon="" primary rounded spinner />
                                <span>{{ __('Loading...') }}</span>
                            </div>

                            @if ($selectTranslationLanguage)
                                @php
                                    $translationLang = \App\Models\Language::where('lang_code', $selectTranslationLanguage)->first()?->name ?? $selectTranslationLanguage;
                                @endphp

                                <hr class="border-t border-theme-primary" />
                                <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">
                                    @if (count($translationOptions) > 0)
                                        <x-select
                                            :disabled="$translateRadioButton === 'input'"
                                            :options="$translationOptions"
                                            class="placeholder-theme-light"
                                            id="translation" label="" option-label="name" option-value="tag_id"
                                            placeholder="{{ __('Select a translation') }}"
                                            wire:model.live="selectTagTranslation" />
                                    @else
                                        <x-select
                                            :disabled="true"
                                            :options="[['tag_id' => '', 'name' => __('No translations available'), 'disabled' => true]]"
                                            class="placeholder-theme-light"
                                            id="translation" label="" option-label="name" option-value="tag_id"
                                            placeholder="{{ __('No existing translation available') }}"
                                            wire:model.live="selectTagTranslation" />
                                    @endif
                                </div>

                                <hr class="border-t border-theme-primary" />
                                <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']) ? '\'' . $newTag['name'] . '\' ' . __('in') . ' ' . $translationLang : __('Activity tag name in') . ' ' . $translationLang }}"
                                            wire:key="nameInput" wire:model.live="inputTagTranslation.name" />

                                        @if (!$transLanguageOk)
                                            <div class="grid grid-cols-1 gap-6">
                                                @php
                                                    $localeTranslation = $selectTranslationLanguage ?? '';
                                                    $localeNameTranslation = \Locale::getDisplayName($localeTranslation, $localeTranslation);
                                                @endphp
                                                <x-checkbox :disabled="$translateRadioButton === 'select'"
                                                    id="transLang-ignore-checkbox"
                                                    label="{{ __('This tag is in :localeTranslation.', ['localeTranslation' => $localeNameTranslation]) }}"
                                                    wire:model.live="transLanguageIgnored" />
                                            </div>
                                        @endif

                                        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                                            <x-select :disabled="$translateRadioButton === 'select'"
                                                :options="$categoryOptions"
                                                class="placeholder-theme-light" id="category"
                                                label="{{ __('Category') }}" option-label="name"
                                                option-value="category_id"
                                                placeholder="{{ __('Select a category') }}"
                                                wire:model.live="newTagCategory" />
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endif
                    </div>

                    @if (!$translationVisible || !$translationAllowed)
                        <div class="mt-3 grid grid-cols-1 gap-6 md:grid-cols-2">
                            <x-select :options="$categoryOptions" class="placeholder-theme-light" id="category"
                                label="{{ __('Category') }}" option-label="name" option-value="category_id"
                                placeholder="{{ __('Select a category') }}"
                                wire:model.live="newTagCategory" />
                        </div>
                        @error('newTagCategory')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    @endif

                    <div class="pt-10 my-3 grid grid-cols-1">
                        <x-skill-tag-warning />
                    </div>
                </x-slot>

                <x-slot name="footer">
                    <x-jetstream.secondary-button wire:click="cancelCreateTag" wire:loading.attr="disabled">
                        {{ __('Cancel') }}
                    </x-jetstream.secondary-button>
                    <x-jetstream.secondary-button
                        class="ml-3"
                        wire:click="createTag"
                        wire:key="createTagButton"
                        wire:loading.attr="disabled">
                        {{ __('Save') }}
                    </x-jetstream.secondary-button>
                </x-slot>
            </x-jetstream.dialog-modal>
        </form>
    @endif
</div>
