<template>
    <div class="bg-surface-50 dark:bg-surface-950 dark:text-gray-100 min-h-svh">
        <NuxtPage />
    </div>
</template>
<script setup>

import 'primeicons/primeicons.css'

const siteData = ref()
const nuxtApp = useNuxtApp()
const categoriesStore = useCategoriesStore()
const placeStore = useMyPlacesStore()
const authStore = useAuthStore()
const configStore = useMyConfigStore()
const token = useCookie('_auth')

async function loadData() {
    const { data } = await useFetch('https://olcsoberauto.hu/rest/init',
        {
            headers: {
                'auth-key': token.value
            }
        }
    )

    if (data.value?.user) {
        authStore.user = data.value.user
        console.log(data.value.user)
    }

    if (data.value?.config) {
        configStore.config = data.value.config
    }

    if (data.value?.states) {
        configStore.states = data.value.states
    }

    if (data.value?.categories) {
        categoriesStore.categories = data.value.categories
        placeStore.places = data.value.places
    }
}

nuxtApp.hooks.hook('app:mounted', async () => {
    console.log('mounted...')
    await loadData()
})

</script>
<style>
html {
    font-size: 18px;
    font-family: "Roboto", serif;
}

.text-center {
    text-align: center;
}

.text-start {
    text-align: start;
}

.text-end {
    text-align: end;
}

.card-loading {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    z-index: 1;
}

.p-inputotp-input.p-inputtext-sm {
    width: 2rem;
}

.p-message {
    outline: none;
    border-left: 4px;
    border-style: solid;
}
.p-disabled, .p-component:disabled{
    opacity: 0.2;
}
pre{
    font-size: 13px;
}
</style>