<script setup lang="ts">
const items = ref()
onMounted(async () => {
    const items_data = await apiCall<ApiPaged<TmcItem>>(`tmc/items/?size=30`)
    items.value = items_data.results

})
</script>
<template>
    <div class="grid grid-cols-12 gap-4">
        <div class="col-span-12 page-header">
            <h1>Список шаблонов ТМЦ</h1>
        </div>
        <UCard v-for="item in items" class="col-span-3">
            <template #header>
                <div class="prose dark:prose-invert">
                    <h4>{{ item.name }}</h4>
                </div>
            </template>
            <div class="prose dark:prose-invert text-sm">
                <p v-for="child in item.fields">
                    <strong>{{ child.name }}</strong><br/>
                    {{ child.comment }}
                </p>
            </div>
        </UCard>
    </div>
</template>