<template>
  <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="200" :modal-height="260">
    <template #modalHeader>
      <h3 class="modal-title">GM tools</h3>
    </template>
    <template #modalBody>
      <div class="content">
        <button class="btn-cyan w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
        <button class="btn-cyan w-full" type="button">Player manager</button>
        <button class="btn-cyan w-full" type="button">Item manager</button>
        <button class="btn-cyan w-full" type="button">NPC manager</button>
      </div>
    </template>
  </Modal>
</template>
<script setup lang="ts">
import Modal from '@/components/utilities/Modal.vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'

const zoneEditorStore = useZoneEditorStore()
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 15px;
  height: calc(100% - 30px);
}
</style>
