@props(['id', 'title', 'description' => null, 'size' => 'md'])

<dialog
    id="{{ $id }}"
    class="ui-modal ui-modal--{{ $size }}"
    data-ui-modal
    data-modal-key="{{ $id }}"
    aria-labelledby="{{ $id }}-title"
    @if ($description) aria-describedby="{{ $id }}-description" @endif
    @if (old('_modal_key') === $id) data-modal-open-on-load @endif
>
    <section class="ui-modal-panel">
        <header class="ui-modal-header">
            <div><h2 id="{{ $id }}-title">{{ $title }}</h2>@if ($description)<p id="{{ $id }}-description">{{ $description }}</p>@endif</div>
            <button class="ui-modal-close" type="button" data-modal-dismiss aria-label="Tutup dialog"><x-ui.icon name="close" /></button>
        </header>
        <div class="ui-modal-body">{{ $slot }}</div>
    </section>
</dialog>