@props(['title', 'description' => null, 'size' => 'md', 'icon' => null, 'tone' => 'brand'])
{{--
    Accessible modal bound to a Livewire boolean property:
        <x-ui.modal wire:model="showCancelModal" title="Cancel work order"> ... </x-ui.modal>
    Focus is trapped while open, Escape closes, focus returns to the trigger.
--}}
@php
    $width = ['sm' => 'sm:max-w-md', 'md' => 'sm:max-w-lg', 'lg' => 'sm:max-w-2xl', 'xl' => 'sm:max-w-4xl'][$size] ?? 'sm:max-w-lg';
    $titleId = 'modal-title-'.\Illuminate\Support\Str::random(6);
@endphp

<div x-data="{ open: @entangle($attributes->wire('model')) }"
     x-on:keydown.escape.window="open = false"
     x-show="open" x-cloak
     class="fixed inset-0 z-50 overflow-y-auto"
     role="dialog" aria-modal="true" aria-labelledby="{{ $titleId }}">
    <div x-show="open" x-transition.opacity class="fixed inset-0 bg-slate-900/50 backdrop-blur-[1px]" x-on:click="open = false"></div>

    <div class="flex min-h-full items-end justify-center p-4 sm:items-center">
        <div x-show="open" x-trap.inert.noscroll="open"
             x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0 translate-y-4 sm:scale-95"
             class="relative w-full {{ $width }} rounded-xl bg-white shadow-xl ring-1 ring-slate-900/10">
            <div class="flex items-start gap-4 px-6 pb-4 pt-5">
                @if ($icon)
                    <span class="icon-tile tone-{{ $tone }}"><x-icon :name="$icon" class="size-5" /></span>
                @endif
                <div class="min-w-0 flex-1">
                    <h2 id="{{ $titleId }}" class="text-base font-semibold text-slate-900">{{ $title }}</h2>
                    @if ($description)<p class="mt-1 text-sm text-slate-500">{{ $description }}</p>@endif
                </div>
                <button type="button" class="btn-icon -mr-2 -mt-1 size-8" x-on:click="open = false">
                    <x-icon name="x-mark" class="size-5" /><span class="sr-only">Close</span>
                </button>
            </div>
            <div class="px-6 pb-5">
                {{ $slot }}
            </div>
            @isset($footer)
                <div class="flex flex-col-reverse gap-2 rounded-b-xl border-t border-slate-100 bg-slate-50/70 px-6 py-3 sm:flex-row sm:justify-end">
                    {{ $footer }}
                </div>
            @endisset
        </div>
    </div>
</div>