{{--
    Modal dialog.

    v12 draws no modal at all: `.modal` in its style.css is a standalone centred
    box with its own `.modal-overlay`, and no page uses either. So the markup
    here stays Bootstrap's — which is also what drives it — and the wireframe
    *look* is applied to `.modal-content` from the app-additions tail of
    nrems-wireframe.css. That tail also has to hand `.modal` itself back to
    Bootstrap, because the vendored wireframe rule would otherwise turn the
    full-viewport scroll container into a 560px white slab; the reason is
    written out there.

    Static markup only: Bootstrap 5 (shipped in plugins.bundle.js) drives it via
    data attributes. Open one with `data-bs-toggle="modal" data-bs-target="#id"`
    on the trigger; the header close button and any footer Cancel button use
    `data-bs-dismiss="modal"`. No JS lives here.

    Usage:
        <x-modal id="tentativeModal" title="Tentative Booking" size="lg">
            ...body fields...
            <x-slot:footer>
                <button type="button" class="btn btn-outline" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Save Hold</button>
            </x-slot:footer>
        </x-modal>

    The wireframe wraps modal-content in a <form> so the footer submit posts the
    body fields. This component stays dumb and does not emit a form; when you
    need one, wrap the whole component:
    <x-form.open id="..." :action="..." /><x-modal .../><x-form.close />
    (Bootstrap 5 does not relocate the modal in the DOM, so the form stays intact).

    Cancel is `btn btn-outline`. This example is the copy-source for every
    future dialog, so the class it teaches matters: v12 draws no `btn-light`
    anywhere and style.css declares no rule for it, which is why CR-2b moved
    the live wings and floor-plan footers off it. This line was still teaching
    the dead one until the CR-2c review.

    Props:
        id    — required; also seeds the aria-labelledby target ("{id}Label").
        title — heading text (escaped).
        icon  — optional FontAwesome classes before the title, the way v12
                writes a card heading. Rendered aria-hidden: it repeats the
                title.
        size  — sm | lg | xl; anything else is ignored rather than emitted.

    CR-2: `fw-bold` came off the title. The wireframe's dialog heading is 600
    and `fw-bold` is Bootstrap's 700-with-!important, which beat the stylesheet.
    `modal-title` stays — it is the aria and test hook.
--}}
@props([
    'id',
    'title' => null,
    'icon' => null,
    'size' => null,
])

@php
    $sizeClass = in_array($size, ['sm', 'lg', 'xl'], true) ? ' modal-'.$size : '';
@endphp

<div {{ $attributes->merge(['class' => 'modal fade']) }}
     id="{{ $id }}"
     tabindex="-1"
     aria-labelledby="{{ $id }}Label"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered{{ $sizeClass }}">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ $id }}Label">@if (filled($icon))<i class="{{ $icon }}" aria-hidden="true"></i>@endif{{ $title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('nrems.modal.close') }}"></button>
            </div>
            <div class="modal-body">
                {{ $slot }}
            </div>
            @isset($footer)
                <div class="modal-footer">
                    {{ $footer }}
                </div>
            @endisset
        </div>
    </div>
</div>