{{--
    Deal Explorer — Property Detail Modal
    This is the modal shell; content is injected via AJAX into #de-modal-body.
--}}

<div x-show="modalOpen" @keydown.escape.window="closeModal()"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm" role="dialog"
    aria-modal="true" aria-label="Property Details" aria-describedby="de-modal-body" x-cloak>
    <div @click.outside="closeModal()" x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="relative flex max-h-[92vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-2xl">
        {{-- Modal header --}}
        <div
            class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between border-b border-border px-6 py-4 bg-white dark:bg-card">
            <h2 class="text-sm font-semibold text-foreground flex items-center gap-1.5"
                x-text="modalTitle || 'Property Details'">
                Property Details
            </h2>
            <div class="flex flex-wrap items-center gap-2 sm:gap-3">

                {{-- Favourite button --}}
                <button type="button" @click="toggleFavourite(modalPropertyId, isFavourited)"
                    class="inline-flex items-center justify-center h-9 w-9 rounded-full border border-border bg-card shadow-sm transition-all hover:scale-110 hover:bg-muted"
                    :aria-label="isFavourited ? 'Remove from favourites' : 'Add to favourites'">
                    <!-- Filled Heart -->
                    <x-heroicon-s-heart x-show="isFavourited" x-cloak class="h-5 w-5 text-red-500" />

                    <!-- Outline Heart -->
                    <x-heroicon-o-heart x-show="!isFavourited" class="h-5 w-5 text-muted-foreground" />
                </button>


                {{-- Close --}}
                <button type="button" @click="closeModal()"
                    class="inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-muted"
                    aria-label="Close">
                    <x-heroicon-o-x-mark class="h-3.5 w-3.5" />
                    Close
                </button>
            </div>
        </div>

        {{-- Modal body --}}
        <div class="flex-1 overflow-y-auto">

            {{-- Loading state --}}
            <div x-show="modalLoading" class="flex items-center justify-center py-24">
                <div class="h-8 w-8 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"></div>
            </div>

            {{-- AJAX-injected content --}}
            <div x-show="!modalLoading && modalHtml" x-html="modalHtml" x-cloak id="de-modal-body"
                class="de-modal-content"></div>
        </div>
    </div>
</div>