@props([
    'title' => null,
    'subtitle' => null,
])

{{-- A settings panel: one card, a header that names it, a body of rows, and an
     optional footer for whatever finishes the group.

     The page was a heap of cards of different heights, each holding one thing,
     which produced a staircase down the screen and left half the width empty
     beside it. A panel with divided rows is what every settings page worth
     copying does — the group is the card, the settings are its rows, and the
     rhythm comes from the dividers rather than from the gaps between boxes. --}}
<section {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-line bg-surface shadow-xs']) }}>
    @if ($title || isset($header))
        <div class="flex flex-wrap items-start justify-between gap-3 border-b border-line px-6 py-4">
            @isset($header)
                {{ $header }}
            @else
                <div class="min-w-0">
                    <h2 class="text-sm font-bold text-ink">{{ $title }}</h2>
                    @if ($subtitle)
                        <p class="mt-0.5 max-w-[76ch] text-sm leading-relaxed text-muted">{{ $subtitle }}</p>
                    @endif
                </div>
                @isset($action)
                    <div class="shrink-0">{{ $action }}</div>
                @endisset
            @endisset
        </div>
    @endif

    <div class="divide-y divide-line">{{ $slot }}</div>

    @isset($footer)
        <div class="flex flex-wrap items-center justify-end gap-3 border-t border-line bg-surface-2 px-6 py-4">
            {{ $footer }}
        </div>
    @endisset
</section>