@props([
    // The heading, and the sentence under it. Both optional: a modal that is one
    // question does not need a subtitle, and a couple have their own header
    // markup (a state badge beside the title, an icon).
    'title' => null,
    'subtitle' => null,
])

{{-- R24: header and footer stay put, the middle scrolls.

     A modal grew with its content, so a form ran off the bottom of the window
     and took its own save button with it — reachable only by scrolling the page
     behind the backdrop, which on a phone means not reachable. The panel is
     capped in resources/views/vendor/wire-elements-modal/modal.blade.php; this
     is the other half: the part somebody has to read (what am I looking at) and
     the part they have to reach (the button) are outside the scroll region.

     min-h-0 on the body is the line that makes it work: a flex child refuses to
     shrink below its content without it, and the overflow never engages. --}}
<div {{ $attributes->class(['flex min-h-0 flex-1 flex-col']) }}>
    @if ($title !== null || isset($header))
        <div class="shrink-0 border-b border-line px-6 py-4">
            @isset($header)
                {{ $header }}
            @else
                <h2 class="text-lg font-semibold text-ink">{{ $title }}</h2>
                @if ($subtitle !== null)
                    <p class="mt-1 max-w-[60ch] text-sm text-muted">{{ $subtitle }}</p>
                @endif
            @endisset
        </div>
    @endif

    {{-- The only part that scrolls. overscroll-contain so reaching the end of it
         does not start scrolling the page behind the backdrop. --}}
    <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-5">
        {{ $slot }}
    </div>

    @isset($footer)
        <div class="shrink-0 border-t border-line bg-surface-2 px-6 py-4">
            {{ $footer }}
        </div>
    @endisset
</div>