<div class="mt-12">

    <!-- Action buttons -->
    <livewire:tags.create>

        <!-- Search box -->
        <div class="mb-4 flex items-center">
            <!-- Input and Reset Button Container -->
            <div class="relative w-2/3">
                <input class="w-full rounded-md border border-theme-primary px-3 py-1 pr-10 text-theme-primary shadow-sm focus:border-theme-accent focus:outline-none focus:ring-1 focus:ring-theme-accent sm:text-sm"
                    placeholder="{{ __('Search keywords') . '...' }}" type="text"
                    wire:keydown.enter="handleSearchEnter" wire:model="search">

                <!-- Rese search button -->
                @if ($search)
                    <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-theme-secondary hover:text-theme-primary focus:outline-none"
                            wire:click.prevent="resetSearch">
                        <x-icon mini name="backspace" solid />
                    </button>
                @endif
            </div>

            <!-- Search Button -->
            <x-jetstream.secondary-button class="ml-3 w-32 justify-center" wire:click.prevent="searchTags">
                {{ __('Search') }}
            </x-jetstream.secondary-button>
        </div>

        <!-- Selection action buttons -->
        <div class="mb-6 flex items-center justify-end space-x-4">
            <x-jetstream.danger-button
                :disabled="$this->bulkDisabled"
                title="{{ __('Delete') . ' ' . __('selection') }}"
                wire:click.prevent="openBulkDeleteTagsModal()">
                <x-icon class="mr-3 h-5 w-5" name="trash" />
                {{ __('Delete') }} {{ __('selection') }}
            </x-jetstream.danger-button>

            @if (!$this->bulkDisabled)
                <x-jetstream.secondary-button wire:click="resetBulkSelection">
                    {{ __('Clear Selection') }}
                </x-jetstream.secondary-button>
            @endif
        </div>

        <!-- Table -->
        <div class="bg-white shadow-sm rounded-lg" x-data="{
            initScrollSync() {
                if (this.$refs.topScroll && this.$refs.bottomScroll && this.$refs.table && this.$refs.topScrollContent) {
                    const topScroll = this.$refs.topScroll;
                    const bottomScroll = this.$refs.bottomScroll;
                    const table = this.$refs.table;

                    // Set the width of the dummy div to match table width
                    this.$refs.topScrollContent.style.width = table.scrollWidth + 'px';
                }
            }
        }" x-init="setTimeout(() => initScrollSync(), 100)">

            <!-- Top scrollbar -->
            <div class="overflow-x-auto border-b border-gray-200" x-ref="topScroll" @scroll="$refs.bottomScroll.scrollLeft = $event.target.scrollLeft">
                <div x-ref="topScrollContent" style="height: 20px;"></div>
            </div>

            <!-- Table with bottom scrollbar -->
            <div class="overflow-x-auto" x-ref="bottomScroll" @scroll="$refs.topScroll.scrollLeft = $event.target.scrollLeft">
                <table class="min-w-full divide-y divide-gray-200" x-ref="table">
                <thead class="bg-gray-50">
                    <tr>
                        {{-- Non-sortable checkbox column --}}
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"></th>

                        {{-- Sortable ID column --}}
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
                            wire:click="sortBy('tag_id')">
                            <div class="flex items-center">
                                {{ __('Id') }}
                                @if ($sortField === 'tag_id')
                                    <x-icon :name="$sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'" class="ml-1 h-4 w-4" micro />
                                @endif
                            </div>
                        </th>

                        {{-- Sortable Language column --}}
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
                            wire:click="sortBy('locale')">
                            <div class="flex items-center">
                                {{ __('Lang.') }}
                                @if ($sortField === 'locale')
                                    <x-icon :name="$sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'" class="ml-1 h-4 w-4" micro />
                                @endif
                            </div>
                        </th>

                        {{-- Sortable Tag Name column --}}
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
                            wire:click="sortBy('name')">
                            <div class="flex items-center">
                                {{ __('Tag') }}
                                @if ($sortField === 'name')
                                    <x-icon :name="$sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'" class="ml-1 h-4 w-4" micro />
                                @endif
                            </div>
                        </th>

                        {{-- Sortable Profiles column --}}
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
                            wire:click="sortBy('profiles')">
                            <div class="flex items-center">
                                {{ __('Profiles') }}
                                @if ($sortField === 'profiles')
                                    <x-icon :name="$sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'" class="ml-1 h-4 w-4" micro />
                                @endif
                            </div>
                        </th>

                        {{-- Sortable Comment column --}}
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
                            wire:click="sortBy('comment')">
                            <div class="flex items-center">
                                {{ __('Comment') }}
                                @if ($sortField === 'comment')
                                    <x-icon :name="$sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'" class="ml-1 h-4 w-4" micro />
                                @endif
                            </div>
                        </th>

                        {{-- Sortable Category column --}}
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
                            wire:click="sortBy('category')">
                            <div class="flex items-center">
                                {{ __('Category') }}
                                @if ($sortField === 'category')
                                    <x-icon :name="$sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'" class="ml-1 h-4 w-4" micro />
                                @endif
                            </div>
                        </th>

                        {{-- Sortable Updated at column (using locale updated_at) --}}
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
                            wire:click="sortBy('updated_at')">
                            <div class="flex items-center">
                                {{ __('Updated') }}
                                @if ($sortField === 'updated_at')
                                    <x-icon :name="$sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'" class="ml-1 h-4 w-4" micro />
                                @endif
                            </div>
                        </th>

                        {{-- Non-sortable Action column --}}
                        <th class="px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider w-32">{{ __('Actions') }}</th>
                    </tr>
                </thead>

                <!-- Table body -->
                <tbody class="bg-white">
                @forelse ($groupedTags as $contextId => $tagCollection)
                    @foreach ($tagCollection as $loop_index => $taggable_tag)
                        <!-- Tags --->
                        <tr class="@if($loop_index === 0) border-t border-gray-200 @endif">
                            <td class="px-3 py-4 whitespace-nowrap">
                                <input class="rounded border-gray-300 text-theme-brand focus:border-theme-accent focus:ring-1 focus:ring-theme-accent"
                                    type="checkbox" value="{{ $taggable_tag->tag_id }}"
                                    wire:key="bulk-{{ $taggable_tag->tag_id }}-page-{{ $tags->currentPage() }}"
                                    wire:model.live.debounce.50ms="bulkSelected">
                            </td>
                            <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
                                {{ $taggable_tag->tag_id }}
                            </td>
                            <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ $taggable_tag->locale->locale }}
                            </td>
                            <td class="px-3 py-4 text-sm">
                                @php
                                    $context = $taggable_tag->contexts->first();
                                    $category = $context?->category;
                                    $categoryColor = $category?->relatedColor ?? 'gray';
                                    $categoryPath = $category?->relatedPathExSelfTranslation ?? '';
                                @endphp
                                <span class="bg-{{ $categoryColor }}-400 inline-flex items-center rounded-md px-2 py-1 text-sm font-normal text-black">
                                    {{ $taggable_tag->name }}
                                </span>
                            </td>
                            <td class="px-3 py-4 text-sm text-gray-500 text-right">
                                {{ $taggable_tag->users_count + $taggable_tag->organizations_count + $taggable_tag->banks_count }}
                            </td>
                            <td class="px-3 py-4 text-sm text-gray-500">
                                <div class="line-clamp-3">
                                    {{ $taggable_tag->locale->comment }}
                                </div>
                            </td>
                            <td class="px-3 py-4 text-sm text-gray-500">
                                <div class="line-clamp-3">
                                    {{ $categoryPath }}
                                </div>
                            </td>

                            <!-- Profile img and updated_at -->
                            <td class="px-3 py-4">
                                <div class="flex items-center">
                                    @if ($taggable_tag->locale->updated_by_user)
                                        @php
                                            $updatedByUser = \App\Models\User::find($taggable_tag->locale->updated_by_user);
                                            $profilePhotoUrl = $updatedByUser?->profile_photo_path
                                                ? Storage::url($updatedByUser->profile_photo_path)
                                                : Storage::url(timebank_config('profiles.user.profile_photo_path_default'));
                                        @endphp
                                        <a class="mr-2 block cursor-pointer flex-shrink-0"
                                            href="{{ route('profile.show_by_type_and_id', ['type' => __('user'), 'id' => $taggable_tag->locale->updated_by_user]) }}"
                                            title="{{ $updatedByUser?->full_name ?? $updatedByUser?->name }}">
                                            <img alt="profile"
                                                class="h-6 w-6 min-w-6 rounded-full profile-photo object-cover outline outline-1 outline-offset-0 outline-gray-600"
                                                src="{{ $profilePhotoUrl }}" />
                                        </a>
                                    @endif

                                    @if ($taggable_tag->locale->updated_at)
                                        <span class="text-sm text-gray-500 whitespace-nowrap">
                                            {{ \Carbon\Carbon::createFromTimeStamp(strtotime($taggable_tag->locale->updated_at))->diffForHumans() }}
                                        </span>
                                    @endif
                                </div>
                            </td>

                            <!-- Action Buttons -->
                            <td class="px-3 py-4 whitespace-nowrap text-center text-sm font-medium">
                                <div class="flex items-center justify-center space-x-1">
                                    <x-jetstream.secondary-button
                                        title="{{ __('Edit') }}"
                                        wire:click="openEditTagModal({{ $taggable_tag->tag_id }})">
                                        <x-icon class="h-5 w-5" name="pencil-square" />
                                    </x-jetstream.secondary-button>

                                    <x-jetstream.danger-button
                                        title="{{ __('Delete') }}"
                                        wire:click="openDeleteTagModal({{ $taggable_tag->tag_id }})">
                                        <x-icon class="h-5 w-5" name="trash" />
                                    </x-jetstream.danger-button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                @empty
                    <tr>
                        <td colspan="9" class="px-6 py-12 text-center text-gray-500">
                            {{ __('No results found') }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
            </div>
        </div>

        <!-- Pagination -->
        @if($tags->hasPages())
            <div class="bg-white shadow-sm rounded-lg mt-4">
            <div class="py-3 border-t border-gray-200 flex items-center justify-between">
                <!-- Left Side: perPage Dropdown -->
                <div class="flex items-center">
                    <select class="w-20 rounded-md border border-theme-primary bg-theme-background px-3 py-2 text-theme-primary shadow-sm focus:border-theme-accent focus:outline-none focus:ring-1 focus:ring-theme-accent sm:text-sm"
                            wire:model.live="perPage">
                        <option value="10"> 10 </option>
                        <option value="50"> 50 </option>
                        <option value="100"> 100 </option>
                    </select>
                    <span class="ml-2 text-sm text-theme-secondary">{{ __('per page') }}</span>
                </div>

                <!-- Right Side: Paginator -->
                {{ $tags->links('livewire.long-paginator') }}
            </div>
            </div>
        @endif

        <!----Delete modal ---->
        @if ($modalDeleteTag)
            <x-jetstream.dialog-modal wire:model.live="modalDeleteTag" maxWidth="2xl">
                <x-slot name="title">
                    {{ __('Are you sure?') }}
                </x-slot>

                @php
                    $categoryColor =
                        (new \App\Models\Tag())->translateTagIdWithContext($selectedTag->tag_id)['category_color'] ??
                        'gray';
                    $categoryPath =
                        (new \App\Models\Tag())->translateTagIdWithContext($selectedTag->tag_id)['category_path'] ?? '';
                @endphp

                <x-slot name="content">
                    {{ __('Do you want to permanently delete this tag?') }}
                    <div class='my-3 text-xl'>
                        <span
                            class="bg-{{ $categoryColor }}-400 inline-flex items-center rounded-md px-3 py-2 text-sm font-normal text-black">
                            {{ $selectedTag->name }}
                        </span>
                    </div>
                    <div class="mb-2 flex flex-col space-y-2">
                        <div class="flex">
                            <div class="w-1/3">{{ __('Admin comment') }}:</div>
                            <div class="flex-1">{{ $selectedTag->locale->comment }}</div>
                        </div>
                        <div class="flex">
                            <div class="w-1/3">{{ __('Category') }}:</div>
                            <div class="flex-1">
                                <span
                                    class="bg-{{ $categoryColor }}-400 mr-2 inline-block h-3 w-3 rounded-full text-black"></span>
                                <span class="">
                                    {{ $categoryPath }}
                                </span>
                            </div>
                        </div>
                        <div class="flex">
                            @php
                                $lang = \DB::table('languages')
                                    ->where('lang_code', $selectedTag->locale->locale)
                                    ->get()
                                    ->first();
                            @endphp
                            <div class="w-1/3">{{ __('Language') }}:</div>
                            <div class="flex-1">{{ $lang->flag }} {{ trans('messages.' . $lang->name) }}</div>
                        </div>
                        <div class="flex">
                            <div class="w-1/3">{{ __('Translations') }}:</div>
                            <div class="flex-1">
                                @foreach ($selectedTag->translations()->sortBy('locale') as $translation)
                                    @if ($translation->locale != $selectedTag->locale->locale)
                                        {{ \DB::table('languages')->where('lang_code', $translation->locale)->value('flag') }}
                                        {{ $translation->name }}<br>
                                    @endif
                                @endforeach
                            </div>
                        </div>

                        <div class="flex">
                            <div class="{{ $countTotal > 0 ? 'text-red-500' : '' }} w-1/3">
                                {{ __('In use by number of profiles') }}:</div>
                            <div class="{{ $countTotal > 0 ? 'text-red-500' : '' }} flex-1">{{ $countTotal }}</div>
                        </div>
                    </div>
                    @if ($countTotal > 0)
                        <div class="text-red-500">
                            {{ __('This update can not be undone!') }}
                        </div>
                        <div class="mt-3 w-1/3">
                            <x-input label="{!! __('messages.confirm_input') !!}" placeholder="{{ __('Confirmation keyword') }}"
                                    autocomplete="off"
                                    wire:model="confirmString" />
                        </div>
                    @endif
                </x-slot>
                <x-slot name="footer">
                    <x-jetstream.secondary-button wire:click="resetForm" wire:loading.attr="disabled">
                        {{ __('Cancel') }}
                    </x-jetstream.secondary-button>
                    <x-jetstream.danger-button class="ml-3"
                                            wire:click.prevent="deleteTag({{ $selectedTagId }})"
                                            wire:loading.attr="disabled">
                        {{ __('Delete') }}
                    </x-jetstream.danger-button>
                </x-slot>
            </x-jetstream.dialog-modal>
        @endif

        <!-- Bulk delete modal -->
        @if ($modalBulkDeleteTags)
            <x-jetstream.dialog-modal wire:key="modalBulkDeleteTags" wire:model.live="modalBulkDeleteTags" maxWidth="2xl">
                <x-slot name="title">
                    {{ __('Are you sure?') }}
                </x-slot>

                <x-slot name="content">
                    {{ __('Do you want to permanently delete these tags?') }}

                    <table class="mt-6 table min-w-full border-t-white">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 text-left text-sm leading-4 tracking-wider">{{ __('Id') }}
                                </th>
                                <th class="px-6 py-3 text-left text-sm leading-4 tracking-wider">{{ __('Language') }}
                                </th>
                                <th class="px-6 py-3 text-left text-sm leading-4 tracking-wider">{{ __('Tag') }}
                                </th>
                                <th class="px-6 py-3 text-left text-sm leading-4 tracking-wider">{{ __('Profiles') }}
                                </th>
                            </tr>
                        </thead>

                        <!-- Table body -->
                        <tbody>
                            @foreach ($selectedTags as $tag)
                                <tr class="border-theme-background" wire:key="bulk-delete-tag-{{ $tag->tag_id }}">
                                    <td class="whitespace-no-wrap border-theme-background px-6 text-sm leading-5">
                                        {{ $tag->tag_id }}
                                    </td>
                                    <td class="whitespace-no-wrap border-theme-background px-6 text-sm leading-5">
                                        @php
                                            $lang = \DB::table('languages')
                                                ->where('lang_code', $tag->locale->locale)
                                                ->get()
                                                ->first();
                                        @endphp
                                        <div class="flex-1">{{ $tag->locale->locale }}</div>
                                    </td>
                                    <td class="whitespace-no-wrap border-theme-background px-6 text-sm leading-5">
                                        @php
                                            $categoryColor =
                                                (new \App\Models\Tag())->translateTagIdWithContext($tag->tag_id)[
                                                    'category_color'
                                                ] ?? 'gray';
                                            $categoryPath =
                                                (new \App\Models\Tag())->translateTagIdWithContext($tag->tag_id)[
                                                    'category_path'
                                                ] ?? '';
                                        @endphp
                                        <span
                                            class="bg-{{ $categoryColor }}-400 inline-flex items-center rounded-md px-3 py-2 text-sm font-normal text-black">
                                            {{ $tag->name }}
                                        </span>
                                    </td>
                                    <td class="whitespace-no-wrap border-theme-background px-6 text-sm leading-5">
                                        {{ $tag->users_count + $tag->organizations_count + $tag->banks_count }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    @if ($countTotal > 0)
                        <div class="mt-6 rounded-md border-l-4 border-red-400 bg-red-50 p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <x-icon class="h-5 w-5 text-red-400" name="exclamation-triangle" />
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-red-700">
                                        <strong>{{ __('Warning') }}:</strong>
                                        {{ __('Unique profiles affected') }}: <strong
                                                class="text-red-800">{{ $countTotal }}</strong><br>
                                        {{ __('This can not be undone!') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="mt-3 w-1/3">
                        <x-input label="{!! __('messages.confirm_input') !!}" placeholder="{{ __('Confirmation keyword') }}"
                                autocomplete="off"
                                wire:model="confirmString" />
                    </div>
                </x-slot>

                <x-slot name="footer">
                    <x-jetstream.secondary-button wire:click="resetForm" wire:loading.attr="disabled">
                        {{ __('Cancel') }}
                    </x-jetstream.secondary-button>
                    <x-jetstream.danger-button class="ml-3" wire:click.prevent="deleteSelected"
                                            wire:loading.attr="disabled">
                        {{ __('Delete') }}
                    </x-jetstream.danger-button>
                </x-slot>
            </x-jetstream.dialog-modal>
        @endif

        <!-- Edit modal -->
        @if ($selectedTag)
            <x-jetstream.dialog-modal wire:key="modalEditTag" wire:model.live="modalEditTag" maxWidth="4xl" :closeButton="true">
                <x-slot name="title">
                    {{ __('Edit tag') . ' ' . $selectedTag->tag_id }}
                </x-slot>

                @php
                    $initCategoryColor =
                        (new \App\Models\Tag())->translateTagIdWithContext($selectedTag->tag_id)['category_color'] ??
                        'gray';
                    $categoryPath =
                        (new \App\Models\Tag())->translateTagIdWithContext($selectedTag->tag_id)['category_path'] ?? '';
                @endphp

                <x-slot name="content">
                    <div class='my-3 text-xl'>
                        @if (isset($editTag['mergeTag']))
                            <div class="flex items-center space-x-2">
                                <span
                                    class="bg-{{ $initCategoryColor }}-400 inline-flex items-center rounded-md px-3 py-2 text-sm font-normal text-black line-through">
                                    {{ $initTag['name'] }}
                                </span>
                                <span>
                                    <svg class="ml-2 h-6 w-6" fill="none" stroke-width="1.5"
                                        stroke="currentColor" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                </span>
                                <span
                                    class="bg-{{ $mergeCategoryColor ?? gray }}-400 inline-flex items-center rounded-md px-3 py-2 text-sm font-normal text-black">
                                    {{ $mergeName }}
                                </span>
                            </div>
                        @else
                            <span
                                class="bg-{{ $newCategoryColor ?? $initCategoryColor }}-400 inline-flex items-center rounded-md px-3 py-2 text-sm font-normal text-black">
                                {{ $editTag['name'] }}
                            </span>
                        @endif
                    </div>
                    <div class="mb-2 flex flex-col space-y-2">
                        <div class="flex">
                            <div class="w-1/3">{{ __('Name') }}:</div>
                            <div class="flex-1">
                                <x-input :disabled="isset($editTag['mergeTag'])"
                                        placeholder="{{ __('Accurate and unique name for this activity, avoid vague or general keywords') }}"
                                        wire:model.live="editTag.name" />
                            </div>
                        </div>
                        <div class="flex">
                        </div>
                        <div class="flex">
                            <div class="w-1/3">{{ __('Language') }}:</div>
                            <div class="flex-1">
                                <x-select :options="$localesOptions" class="placeholder-theme-light" id="category"
                                        option-label="label" option-value="lang_code"
                                        placeholder="{{ __('Select a language') }}"
                                        wire:model.live="editTag.language" />
                            </div>
                        </div>
                        <div class="flex">
                            <div class="w-1/3">{{ __('Category') }}:</div>
                            <div class="flex-1">
                                <x-select :disabled="isset($editTag['mergeTag'])" :options="$categoryOptions" class="placeholder-theme-light"
                                        id="category" option-label="name" option-value="category_id"
                                        placeholder="{{ __('Select a category') }}"
                                        wire:model.live="editTag.category" />
                            </div>
                        </div>
                        <div class="flex">
                            <div class="w-1/3">{{ __('Merge into tag') }}:</div>
                            <div class="flex-1">
                                <x-select :options="$mergeTagOptions" class="placeholder-theme-light" id="mergeTag"
                                        option-label="name" option-value="tag_id"
                                        placeholder="{{ __('Select another tag in the current language') }}"
                                        wire:model.live="editTag.mergeTag" />
                            </div>
                        </div>
                        <div class="flex">
                            <div class="w-1/3">{{ __('Admin comment') }}:</div>
                            <div class="flex-1">
                                <x-textarea :disabled="isset($editTag['mergeTag'])" rows="3" wire:model.lazy="editTag.comment" />
                            </div>
                        </div>

                        <div class="flex">
                            <div class="w-1/3">{{ __('Translations') }}:</div>
                            <div class="flex-1">
                                @foreach ($selectedTag->translations()->sortBy('locale') as $translation)
                                    @if ($translation->locale != $selectedTag->locale->locale)
                                        {{ \DB::table('languages')->where('lang_code', $translation->locale)->value('flag') }}
                                        {{ $translation->name }}<br>
                                    @endif
                                @endforeach
                            </div>
                        </div>

                        <div class="flex">
                            <div class="w-1/3">{{ __('In use by number of profiles') }}:</div>
                            <div class="flex-1">{{ $countTotal }}</div>
                        </div>
                        <div class="flex">
                            <div class="w-1/3">{{ __('Translations in use by number of profiles') }}:</div>
                            <div class="flex-1">{{ $countTotalTranslations }}</div>
                        </div>
                    </div>
                    @if (($editTagContextChanged && $countTotal > 0) || ($editTagContextChanged && $countTotalTranslations > 0))
                        <div class="mt-6 text-red-500">
                            {{ __('Profiles affected by update') }}: {{ $countTotal + $countTotalTranslations }}<br>
                            {{ __('This update can not be undone!') }}
                        </div>
                        <div class="mt-3 w-1/3">
                            <x-input label="{!! __('messages.confirm_input') !!}" placeholder="{{ __('Confirmation keyword') }}"
                                    wire:model="confirmString" />
                        </div>
                    @elseif ($editTagChanged && $countTotal > 0)
                        <div class="text-red-500">
                            {{ __('Profiles affected by update') }}: {{ $countTotal }}<br>
                            {{ __('This update can not be undone!') }}
                        </div>
                        <div class="mt-3 w-1/3">
                            <x-input label="{!! __('messages.confirm_input') !!}" placeholder="{{ __('Confirmation keyword') }}"
                                    wire:model="confirmString" />
                        </div>
                    @endif
                    {{-- <x-errors /> --}}
                </x-slot>
                <x-slot name="footer">
                    <x-jetstream.secondary-button wire:click="resetForm" wire:loading.attr="disabled">
                        {{ __('Cancel') }}
                    </x-jetstream.secondary-button>
                    <x-jetstream.button class="ml-3"
                                            wire:click.prevent="updateTag({{ $selectedTagId }})"
                                            wire:loading.attr="disabled">
                        {{ __('Update') }}
                    </x-jetstream.button>
                </x-slot>
            </x-jetstream.dialog-modal>
        @endif

        @push('scripts')
            <script>
                document.addEventListener('scroll-to-top', event => {
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                });
            </script>
        @endpush

</div>
