<script lang="ts" setup>
// import

import { VueQueryDevtools } from "@tanstack/vue-query-devtools";

// state

useSeoMeta({
    titleTemplate: (titleChunk) => {
        return titleChunk ? `${titleChunk} | فروشگاه هی‌ ملز` : "فروشگاه هی‌ ملز";
    },
    ogImage: "/img/heymlz/global-cover.jpg",
    twitterImage: "/img/heymlz/global-cover.jpg",
});

const { $updateAvailable: updateAvailable, $handleUpdate: handleUpdate } = useNuxtApp();

const closeModal = () => {
    updateAvailable.value = false;
};
</script>

<template>
    <div>
        <LoadingIndicator />

        <NuxtPwaManifest />

        <UpdatePwaModal
            :isShow="updateAvailable"
            @update="handleUpdate"
            @close="closeModal"
        />

        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>

        <ToastProvider>
            <ToastContainer />
            <ToastViewport
                class="[--viewport-padding:_25px] fixed bottom-0 left-1/2 -translate-x-1/2 flex flex-col p-[var(--viewport-padding)] gap-[10px] w-[390px] max-w-[100vw] m-0 list-none z-[9999999999999999] outline-none"
            />
        </ToastProvider>

        <VueQueryDevtools
            dir="ltr"
            buttonPosition="top-left"
        />
    </div>
</template>
