﻿<script setup>
import { ref } from 'vue';
import HTMLContentEditor from "@/views/contents/HTMLContentEditor.vue";
import QuickyContentEditor from "@/views/contents/QuickyContentEditor.vue";

const showQuickyEditor = ref(true);
const showHtmlEditor = ref(false);

const toggleQuickyEditor = () => {
  showQuickyEditor.value = true;
  showHtmlEditor.value = false;
};

const toggleHtmlEditor = () => {
  showHtmlEditor.value = true;
  showQuickyEditor.value = false;
};
</script>

<template>
  <div class="editor-buttons flex flex-column items-center rounded-2xl mt-2">
    <div class="mb-4 text-xl uppercase">Éditeurs de contenu</div>
  
    <div class="flex flex-row space-x-4">
      
      <v-btn
          :variant="showQuickyEditor ? 'elevated' : 'plain'"
          @click="toggleQuickyEditor"
      >
        Quicky
      </v-btn>

      <v-btn
          :variant="showHtmlEditor ? 'elevated' : 'plain'"
          @click="toggleHtmlEditor"
      >
        Article
      </v-btn>
    </div>
  </div>

  <div class="flex flex-row">
    <div>
      <div v-if="showQuickyEditor" class="mt-16">
        <quicky-content-editor />
      </div>

      <div v-if="showHtmlEditor" class="mt-16">
        <HTMLContentEditor />
      </div>
    </div>
  </div>
</template>

<style scoped>
.editor-buttons {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 245px; 
  width: calc(100% - 250px); 
  background-color: white;
  z-index: 2;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
}

button {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f5f5f5;
  cursor: pointer;
  margin: 0 0.5rem;
}

button:hover {
  background-color: #e0e0e0;
}
</style>
