<template>
    <NuxtLayout :name="device" :config="config">
        <main class="panel-orders">
            <ul>
                <li v-for="(order, i) in items" :key="i">
                    <PanelOrderItem :data="order" />
                </li>
            </ul>
            <AppPagination :pages="pages" />
        </main>
    </NuxtLayout>
</template>

<script setup>
const { device, t } = inject('service')
const config = reactive({
    desktop: { toolbar: true }, mobile: { header: { back: true, title: t('orders') } },
})

const { meta, query } = useRoute()
const { page = 1 } = query

const { status, data, error } = await useFetch(`/api/orders/user/${page}`, {
    headers: {
        Authorization: useCookie('token')
    }
})

const items = ref([])
const pages = ref(1)

if (status.value == 'success') {
    items.value = data.value.items
    pages.value = data.value.pages

} else throw createError(error.value)
</script>

<style lang="scss">
.panel-orders {
    @apply w-full lg:container flex flex-col gap-y-10 lg:gap-[2.6rem];
    @apply px-6 sm:px-4 lg:px-0 pt-8 pb-20 lg:pt-14 lg:pb-[14.9rem];

    &>ul:first-child {
        @apply flex flex-col gap-x-6 gap-y-10 lg:gap-[2.6rem];
    }

    .pagination {
        @apply self-center mt-auto;
    }
}
</style>
