@props(['id', 'title' => null])
<div id="{{ $id }}" class="crh-modal-overlay" hidden
     onclick="if(event.target===this)this.setAttribute('hidden','')">
    <div class="crh-modal" role="dialog" aria-modal="true" aria-label="{{ $title }}">
        @if($title)
            <div class="crh-modal__header">
                <h3 class="crh-modal__title">{{ $title }}</h3>
                <button type="button" class="crh-modal__close"
                        onclick="document.getElementById('{{ $id }}').setAttribute('hidden','')"
                        aria-label="Close">&times;</button>
            </div>
        @endif
        <div class="crh-modal__body">{{ $slot }}</div>
        @isset($footer)<div class="crh-modal__footer">{{ $footer }}</div>@endisset
    </div>
</div>