<template>
    <div>
        <table v-if="inner.length" cellspacing="0" cellpadding="0" border="0" class="hidden md:table custom-table overflow-auto custom-table-sm">
            <thead>
                <tr>
                    <th>Datum</th>
                    <th>Baustein</th>
                    <th>Veranstaltung</th>
                    <th>Organisator</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(course, index) in inner" :key="index">
                    <td v-text="course.completed_at_human" />
                    <td v-text="course.course.short_name" />
                    <td v-text="course.event_name" />
                    <td v-text="course.organizer" />
                </tr>
            </tbody>
        </table>
        <div v-else class="py-3 text-gray-400 text-center">Keine Ausbildungen vorhanden</div>
        <div class="md:hidden grid gap-3">
            <ui-box v-for="(course, index) in inner" :key="index" class="relative" :heading="course.course.short_name" second>
                <div class="text-xs text-gray-200" v-text="course.event_name" />
                <div class="text-xs text-gray-200" v-text="course.completed_at_human" />
                <div class="text-xs text-gray-200" v-text="course.organizer" />
            </ui-box>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        value: {},
    },
    data: function () {
        return {
            inner: [],
        };
    },
    created() {
        this.inner = this.value;
    },
};
</script>
