@props(['columns', 'rows'])

<div class="vpm-table-wrap">
    <table class="vpm-table vpm-table--terminal">
        <colgroup>
            @foreach ($columns as $col)
                <col @class([
                    'vpm-col-num' => ($col['align'] ?? null) === 'num',
                    'vpm-col-action' => ($col['label'] ?? '') === '',
                    'vpm-col-date' => ($col['type'] ?? null) === 'date',
                    'vpm-col-status' => ($col['type'] ?? null) === 'status',
                ])>
            @endforeach
        </colgroup>
        <thead>
            <tr>
                @foreach ($columns as $col)
                    <th
                        scope="col"
                        @class([
                            'num' => ($col['align'] ?? null) === 'num',
                            'vpm-table__actions' => ($col['label'] ?? '') === '',
                        ])
                    >
                        @if (($col['label'] ?? '') === '')
                            <span class="sr-only">Actions</span>
                        @else
                            {{ $col['label'] }}
                        @endif
                    </th>
                @endforeach
            </tr>
        </thead>
        <tbody>
            @foreach ($rows as $row)
                <tr>
                    @foreach ($columns as $col)
                        @php $cell = $row[$col['key']] ?? ''; @endphp
                        <td @class([
                            'vpm-num num' => ($col['align'] ?? null) === 'num',
                            'vpm-table__actions' => ($col['label'] ?? '') === '',
                        ])>
                            @if (! empty($col['html']))
                                {!! $cell !!}
                            @else
                                {{ $cell }}
                            @endif
                        </td>
                    @endforeach
                </tr>
            @endforeach
        </tbody>
    </table>
</div>