<template>
    <ClientOnly>
        <Card style="margin-top: 78px; min-height: 200px;"> 
            <template #content>
                <Panel header="Bought, but not evaluated clothes - Detail Page" class="rounded-4 bg-white" >
                    <div class="grid nested-grid">
                        <div class="col-6">
                            <Galleria :value="images" :responsive-options="responsiveOptions" :num-visible="5" container-style="max-width: 480px">
                                <template #item="slotProps">
                                    <img :src="`${pfad}/${slotProps.item.pfad}`"  style="width: 100%;" />
                                </template>
                                <template #thumbnail="slotProps">
                                    <img :src="`${pfad}/thumb-${slotProps.item.pfad}`"  />
                                </template>
                            </Galleria>
                        </div>
                        <div class="col-6">
                            <div class="grid">
                                <p>{{ itemsbd.kurzbeschreibung }}</p>
                                <p>Da kommt der Text rein</p>
                            </div>
                        </div>
                        
                    </div>
                </Panel>
            </template>
        </Card>
    </ClientOnly>
    



</template>

<script setup lang="ts">
import { ref } from "vue";
const responsiveOptions = ref();
const pfad = '/photos';
const route = useRoute();
const qid = route.query.id;


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

</script>