<div class="p-6 space-y-5">

    {{-- HEADER --}}
    <div class="flex items-start gap-3">
        <div class="w-10 h-10 rounded-xl bg-red-50 flex items-center justify-center shrink-0">
            <x-heroicon-o-exclamation-triangle class="w-5 h-5 text-red-500"/>
        </div>
        <div>
            <h2 class="text-base font-semibold text-gray-800">
                {{ t('settings.smtp.error_title') }}
            </h2>
            <p class="text-sm text-gray-500 mt-0.5">
                {{ t('settings.smtp.error_description') }}
            </p>
        </div>
    </div>

    {{-- ERROR BOX --}}
    <div class="bg-gray-50 border border-gray-200 rounded-xl p-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">
                {{ t('settings.smtp.error_details') }}
            </span>
            <button x-data
                    x-on:click="navigator.clipboard.writeText(@js($message))"
                    class="text-xs text-indigo-600 hover:text-indigo-800 hover:underline transition-colors">
                {{ t('settings.copy') }}
            </button>
        </div>
        <div class="max-h-48 overflow-auto text-xs font-mono text-gray-700 whitespace-pre-wrap leading-relaxed">{{ $message }}</div>
    </div>

    {{-- ACTIONS --}}
    <div class="flex justify-end gap-2">
        <button wire:click="$dispatch('closeModal')"
                class="px-4 py-2 text-sm rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors">
            {{ t('settings.close') }}
        </button>
        <button wire:click="$dispatch('smtp:test'); $dispatch('closeModal')"
                class="px-4 py-2 text-sm rounded-lg bg-indigo-600 text-white font-medium hover:bg-indigo-700 transition-colors flex items-center gap-1.5">
            <x-heroicon-o-arrow-path class="w-3.5 h-3.5"/>
            {{ t('settings.smtp.retry') }}
        </button>
    </div>

</div>
