<template>
    <div>
        <table cellspacing="0" cellpadding="0" border="0" class="hidden md:table custom-table overflow-auto custom-table-sm text-sm">
            <thead>
                <tr>
                    <th>Tätigkeit</th>
                    <th>Untertätigkeit</th>
                    <th>Datum</th>
                    <th>Aktiv</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(membership, index) in value" :key="index">
                    <td v-text="membership.activity_name" />
                    <td v-text="membership.subactivity_name" />
                    <td v-text="membership.human_date" />
                    <td><ui-boolean-display :value="membership.is_active" /></td>
                </tr>
            </tbody>
        </table>

        <div class="md:hidden grid gap-3">
            <ui-box v-for="(membership, index) in value" :key="index" class="relative" :heading="membership.activity_name" second>
                <div class="text-xs text-gray-200" v-text="membership.subactivity_name" />
                <div class="text-xs text-gray-200" v-text="membership.human_date" />
                <div class="text-xs text-gray-200"><ui-boolean-display :value="membership.is_active" /></div>
            </ui-box>
        </div>
    </div>
</template>

<script lang="ts" setup>
defineProps<{
    value: Record<number, {activity_name: string, subactivity_name: string, human_date: string, is_active: boolean}>,
}>();
</script>
