{{--
    A titled card. The default surface for anything that is not a table.

        <x-panel title="Account activity">
            …
        </x-panel>

        <x-panel title="Reset password" subtitle="Ends every open session." tone="warning">
            <x-slot:actions>
                <a href="…" class="btn btn-sm btn-outline-secondary">View log</a>
            </x-slot:actions>
            …
        </x-panel>

    `flush` drops the body padding, for a panel whose content is a table or a
    list that should meet the card edges.

    `tone` tints the header for a panel that carries consequence — currently
    `danger` and `warning`. It is not decoration: it is the only signal that a
    destructive control lives below, so it is never used to add colour.
--}}
@props([
    'title' => null,
    'subtitle' => null,
    'actions' => null,
    'tone' => null,
    'flush' => false,
])

@php
    /*
     | Only `danger` gets a coloured edge.
     |
     | An amber-outlined card sitting beside a red-outlined one reads as two
     | warnings of similar weight, and the eye stops separating them. A password
     | reset is consequential but reversible; a delete is not. The border is
     | reserved for the irreversible one, and `warning` says its piece in the
     | title alone.
     */
    $toneClass = $tone === 'danger' ? 'border-danger-subtle' : '';

    $titleClass = match ($tone) {
        'danger' => 'text-danger',
        'warning' => 'text-warning-emphasis',
        default => '',
    };
@endphp

<div {{ $attributes->merge(['class' => trim('card '.$toneClass)]) }}>
    @if ($title)
        <div class="card-header">
            <div class="min-width-0">
                <h2 class="ams-section-title {{ $titleClass }}">{{ $title }}</h2>

                @if ($subtitle)
                    <p class="ams-section-subtitle">{{ $subtitle }}</p>
                @endif
            </div>

            @if ($actions)
                <div class="d-flex flex-wrap gap-2 ams-no-print">
                    {{ $actions }}
                </div>
            @endif
        </div>
    @endif

    <div class="{{ $flush ? '' : 'card-body' }}">
        {{ $slot }}
    </div>
</div>
