{{--
    A table in the theme's report style: every row its own card.

    Headers are strings, or ['label' => …, 'align' => 'right', 'sr' => true]
    for a numeric column or an actions column with no visible heading.
--}}
@props(['headers' => []])

<div class="intro-y overflow-auto lg:overflow-visible">
    <table class="table table-report -mt-2">
        <thead>
            <tr>
                @foreach ($headers as $header)
                    @php
                        $label = is_array($header) ? ($header['label'] ?? '') : $header;
                        $align = is_array($header) ? ($header['align'] ?? 'left') : 'left';
                        $sr = is_array($header) ? ($header['sr'] ?? false) : false;
                    @endphp
                    <th class="whitespace-nowrap {{ $align === 'right' ? 'text-right' : '' }}">
                        @if ($sr)
                            <span class="sr-only">{{ $label }}</span>
                        @else
                            {{ $label }}
                        @endif
                    </th>
                @endforeach
            </tr>
        </thead>

        <tbody>
            {{ $slot }}
        </tbody>
    </table>
</div>