<script setup lang="ts">
const open = ref(false), username = ref(""), price = ref(750), disabled = ref(false), loading = ref(false);

watch(loading, (value) => {
    if(value)
    {
        setTimeout(() => { open.value = true; loading.value = false }, 1500);
    }
})
</script>

<template>
    <Head>
        <Title>Accueil</Title>
    </Head>
    <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
        <div class="w-1/2 flex flex-1 flex-col justify-center items-center gap-2">
            <Collapsible label="Options">
                <div class="flex flex-col">
                    <Switch label="Test" v-model="disabled" />
                    <SliderInput :disabled="disabled" :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
                        v-model="price" />
                    <TextInput label="Saisir un pseudonyme" :disabled="disabled" v-model="username" />
                    <NumberPicker label="Age" :disabled="disabled" />
                </div>
            </Collapsible>

            <Button @click="() => loading = true">
                <span v-if="!loading">Load data</span>
                <Loading v-else size="small" />
            </Button>
            <Toast v-model="open" :duration="7500" content="Je suis un long texte pour tester comment ça se comporte aaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaaa" :closeable="false"  />
        </div>
    </div>
</template>