@props([
    'createAction' => 'checkTranslations',
    'createAnotherProperty' => 'createAnother',
    'updateMode' => false,
])

{{-- Footer Buttons --}}
<div class="flex justify-start gap-3 mt-6">
    <x-filament::button type="button" color="primary" wire:click="{{ $createAction }}" x-on:click="open = false; window.livewire.emit('checkTranslations', 'yes');">
        {{ $updateMode ? __('Update') : __('Create') }}
    </x-filament::button>

    @unless($updateMode)
        <x-filament::button type="button" color="secondary" wire:click="{{ $createAction }}"
            x-on:click="$wire.set('{{ $createAnotherProperty }}', true)">
            {{ __('Create & create another') }}
        </x-filament::button>
    @endunless

    <x-filament::button type="button" color="secondary" onclick="window.history.back()">
        {{ __('Cancel') }}
    </x-filament::button>
</div>
<div
    x-data="{ open: false, missing: '' }"
    x-on:open-translation-modal.window="
        open = true;
        missing = $event.detail.missing;
    "
    x-show="open"
    x-cloak
    class="fixed inset-0 flex items-center justify-center bg-black/40 z-[9999] !mt-0"
    style="z-index: 9999 !important;" {{-- ensure it's higher than Filament modal --}}
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
>
    <div
        class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-sm w-full mx-4 overflow-hidden relative"
        x-transition:enter="transition ease-out duration-200 transform"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150 transform"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        style="z-index: 10000 !important;" {{-- even higher for modal content --}}
    >
        <!-- Close Button -->
        <div class="absolute top-4 right-4 z-[10001]">
            <button type="button" x-on:click="open = false"
                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <!-- Header -->
        <div class="px-8 pt-8 pb-4 text-center">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
                {{ __('Missing Translations') }}
            </h2>
            <p class="text-gray-700 dark:text-gray-300">
                {{ __('You have not translated the strings in:') }}
                <strong x-text="missing"></strong>
            </p>
            <p class="mt-3 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                {{ __('Do you want to translate them automatically using Google Translate?') }}
            </p>
        </div>

        <div aria-hidden="true" class="border-t px-2"></div>

        <!-- Buttons -->
        <div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(0,1fr))] px-6 py-4">
            <button type="button"
                x-on:click="open = false; window.livewire.emit('handleModalResponse', 'no');"
                class="filament-button filament-button-size-md inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset min-h-[2.25rem] px-4 text-sm text-gray-800 bg-white border-gray-300 hover:bg-gray-50 focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600">
                {{ __('No') }}
            </button>

            <button type="submit"
                x-on:click="open = false; window.livewire.emit('handleModalResponse', 'yes');"
                class="filament-button filament-button-size-md inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset min-h-[2.25rem] px-4 text-sm text-white shadow focus:ring-white border-transparent bg-primary-600 hover:bg-primary-500 focus:bg-primary-700 focus:ring-offset-primary-700">
                {{ __('Yes') }}
            </button>
        </div>
    </div>
</div>