{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: error-modal.blade.php
------------------------------------------------------
Use: The single, global-standard error dialog. All
     errors surface here with one "understood" button.
     No page renders its own error UI.
=====================================================
--}}

<x-ui.modal show="$store.errorModal.open" close="$store.errorModal.close()">
    <div class="flex items-start gap-3">
        <span class="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full bg-secondary-50 text-secondary-500" aria-hidden="true">
            <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" />
                <line x1="12" y1="8" x2="12" y2="12" />
                <line x1="12" y1="16" x2="12.01" y2="16" />
            </svg>
        </span>

        <div class="min-w-0 flex-1">
            <h2 class="text-lg font-bold text-zinc-900">{{ __('front.error.title') }}</h2>
            <p class="mt-2 text-sm leading-7 text-zinc-600" x-text="$store.errorModal.message || @js(__('front.error.generic'))"></p>
        </div>
    </div>

    <div class="mt-6">
        <button
            type="button"
            class="inline-flex w-full items-center justify-center rounded-xl bg-primary-600 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2"
            x-on:click="$store.errorModal.close()"
        >
            {{ __('front.actions.understood') }}
        </button>
    </div>
</x-ui.modal>