{{--
    Label/value pairs for a detail panel.

        <x-detail-list :items="[
            'Access level' => $badgeHtml,
            'Last sign-in' => $user->last_login_at?->format('d M Y, H:i') ?? 'Never',
        ]" />

    Or, when a value needs markup, as slots:

        <x-detail-list>
            <x-detail-row label="Status"><x-badge color="success">Active</x-badge></x-detail-row>
            <x-detail-row label="Created">{{ $user->created_at->format('d M Y') }}</x-detail-row>
        </x-detail-list>

    These were two-column `<table>`s before. A table claims its content is a
    grid of comparable records; this is one record's attributes, which is what a
    description list is for — and it reflows to a single column on a narrow
    screen instead of scrolling sideways.
--}}
@props([
    'items' => null,
])

<dl {{ $attributes->merge(['class' => 'ams-detail-list']) }}>
    @if ($items)
        @foreach ($items as $label => $value)
            <div>
                <dt>{{ $label }}</dt>
                <dd>{!! $value !!}</dd>
            </div>
        @endforeach
    @endif

    {{ $slot }}
</dl>
