<template>
    <ClientOnly>
        <Card style="margin-top: 78px; min-height: 200px;"> 
            <template #content>
                <Panel header="Bought, but not evaluated clothes" class="rounded-4 bg-white" >
                    <DataView :value="itemsb" paginator :rows="5">
                        <template #list="slotProps">
                            <div class="col-12">
                                <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
                                    <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`/photos/16266842344a52797c13c72c9c769e2c6b52e827b0.webp`" :alt="slotProps.data.bezeichnung" />
                                    <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                                        <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                                            <div class="text-2xl font-bold text-900">{{ slotProps.data.bezeichnung }}</div>
                                            <div class="flex align-items-center gap-3">
                                                <span class="flex align-items-center gap-2">
                                                    <i class="pi pi-tag"></i>
                                                    <span class="font-semibold">{{ slotProps.data.typid }}</span>
                                                </span>
                                                
                                            </div>
                                            <div class="col-12 gap-3 flex">
                                                    <Button severity="info" @click="openDetail(slotProps.data.type.id)" target="_blank" label=" Details " icon="pi pi-list" />
                                                    <Button severity="success" @click="openEval(slotProps.data.typid)" label=" Evaluation " icon="pi pi-eye" />                                                    
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>

                            </div>
                        </template>
                    </DataView>
                </Panel>
            </template>
        </Card>
    </ClientOnly>
    



</template>

<script setup lang="ts">
import { ref } from "vue";

//const itemsb = ref();
const {data: itemsb } = await useFetch('http://ubodroid-2:8081/api/v1/itb');

async function openDetail(id) {
    await navigateTo({
        path: '/itembdetail',
        query: {
            id: id,
            
        }
        
        },
     ) 
};

async function openEval(id) {
    
};

</script>