<script setup lang="ts">
import { unifySlug } from '~/shared/general.util';
import type { Feature } from '~/types/character';

definePageMeta({
    guestsGoesTo: '/user/login',
    rights: ['admin', 'editor'],
});

const id = unifySlug(useRouter().currentRoute.value.params.id);
const { add } = useToast();
const homebrew = ref<Feature>({
    id: id === 'new' ? -1 : parseInt(id, 10),
    list: [],
});

if(id !== 'new')
{
    const _homebrew = await useRequestFetch()(`/api/homebrew/${id}`);

    if(!_homebrew) throw new Error('Donnée de personnalisation introuvable');

    homebrew.value = Object.assign(homebrew.value, _homebrew);
}

function save(force: boolean)
{

}
</script>

<template>
<Head>
        <Title>d[any] - Edition de {{ homebrew.name || 'nouvelle personnalisation' }}</Title>
    </Head>
    <div  class="flex flex-col gap-8 align-center">
        <div class="flex flex-row gap-4 align-center justify-center">
            <div class="flex flex-row gap-4 align-center justify-center">
                <Label class="flex items-center justify-between flex-row gap-2">
                    <span class="pb-1 mx-2 md:p-0">Titre</span>
                    <input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50
                    bg-light-20 dark:bg-dark-20 outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
                    border border-light-35 dark:border-dark-35 hover:border-light-50 dark:hover:border-dark-50 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20"
                        type="text" v-model="homebrew.name">
                </Label>
            </div>
            <div  class="self-center">
                <Tooltip side="right" message="Ctrl+S"><Button @click="() => save(true)">Enregistrer</Button></Tooltip>
            </div> 
        </div>
        <div class="flex flex-1 flex-col min-w-[800px] w-[75vw] max-w-[1200px]">
            <div class="m-2 overflow-auto">
                
            </div>
        </div>
    </div>
</template>