<script setup>
import { cardClass } from '@/Components/Supervisor/ui.js';
</script>

<template>
    <div :class="cardClass">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-100">
                <thead class="bg-slate-50/80">
                    <slot name="head" />
                </thead>
                <tbody
                    class="divide-y divide-slate-100 bg-white [&_tr_td]:border-l-2 [&_tr_td]:border-l-transparent [&_tr_td]:transition-colors [&_tr_td]:duration-150 [&_tr:hover_td]:bg-indigo-50/70 [&_tr:hover_td:first-child]:border-l-indigo-500"
                >
                    <slot />
                </tbody>
            </table>
        </div>
        <slot name="footer" />
    </div>
</template>
