<template>
    <template v-if="model && model.people !== undefined">
        <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
            <Label class="flex items-center justify-between gap-2">
                <span class="pb-1 mx-2 md:p-0">Physique</span>
                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
                </NumberFieldRoot>
            </Label>
            <Label class="flex items-center justify-between gap-2">
                <span class="pb-1 mx-2 md:p-0">Mental</span>
                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
                </NumberFieldRoot>
            </Label>
            <Label class="flex items-center justify-between gap-2">
                <span class="pb-1 mx-2 md:p-0">Caractère</span>
                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
                </NumberFieldRoot>
            </Label>
            <Button @click="emit('next')" :disabled="model.aspect === undefined">Enregistrer</Button>
        </div>
        <div class="flex flex-col flex-1 gap-4 mx-8 my-4">
        </div>
    </template>
</template>

<script setup lang="ts">
import type { Character, CharacterConfig } from '~/types/character';

const { config } = defineProps<{
    config: CharacterConfig,
}>();
const model = defineModel<Character>({ required: true });

const emit = defineEmits(['next']);
</script>