<script setup lang="ts">
const open = ref(false), username = ref(""), price = ref(750);
</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">
            <Switch label="Test" />
            <SliderInput :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
                v-model="price" />
            <TextInput label="Saisir un pseudonyme" v-model="username" />
            <Separator decorative orientation="horizontal" class="h-px w-96 my-2 bg-light-30 dark:bg-dark-30" />
            <Tooltip message="Vas y, ajoute stp" side="top"><button @click="open = !!username && !open"
                    class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Ajouter</button>
            </Tooltip>
            <Toast v-model="open" :title="`Bienvenue ${username}`" content="Vous êtes maintenant connecté"
                :duration="5000" />
        </div>
    </div>
</template>