<script setup>
import { Head, Link } from '@inertiajs/vue3';
import Layout from '@/Layouts/Layout.vue';
import Editor from '@/Components/Editor/Editor.vue';
import { onMounted, ref } from 'vue';

const editable = ref(false);
const editor = ref(null);
const edit = () => {
    editable.value = !editable.value;
    if(editor.value) editor.value.editable(editable.value);
}

onMounted(() => {
    edit();
})
</script>

<template>
    <Head title="Home"/>
    <Layout :footer="false">
        <template #content>
            <div class="relative w-full h-screen laptop:px-[13.5%]">
                <button @click="edit" class="flex items-center bg-white absolute top-0 left-0 m-4 p-1 rounded shadow">
                    <img :src="editable ? '/icons/cancel.svg' : '/icons/modify.svg'" class="h-7">
                    <p class="ml-2 text-gray-700">{{ editable ? "Prévisualiser" : "Editer" }}</p>
                </button>
                <Editor @update="(data) => {}" ref="editor"/>
            </div>
        </template>
    </Layout>
</template>