<script setup>
import Modal from '@/components/Modal.vue';
const showLayerSettingListModal = ref(null);
const showLayerSettingSaveModal = ref(null);

function openLayerSettingList() {
  showLayerSettingListModal.value = {
    component: 'viewer/LayerSettingList',
    title: 'Chọn thiết lập layer',
    width: '400px',
    height: 'auto',
  };
}

function openLayerSettingSave() {
  showLayerSettingSaveModal.value = {
    component: 'viewer/LayerSettingSave',
    title: 'Lưu thiết lập layer',
    width: '400px',
    height: 'auto',
  };
}
</script>
<template>
  <div class="is-flex is-gap-1">
    <button 
      class="button is-small p-2 is-white" 
      title="Mở thiết lập"
      @click="openLayerSettingList"
    >
      <SvgIcon v-bind="{ name: 'folder.svg', type: 'primary', size: 20 }" />
    </button>
    <button 
      class="button is-small p-2 is-white" 
      title="Lưu thiết lập"
      @click="openLayerSettingSave"
    >
      <SvgIcon v-bind="{ name: 'save.svg', type: 'primary', size: 20 }" />
    </button>
  </div>
  <Modal 
    v-bind="showLayerSettingListModal"
    v-if="showLayerSettingListModal"
    @close="showLayerSettingListModal = null"
  />
  <Modal 
    v-bind="showLayerSettingSaveModal"
    v-if="showLayerSettingSaveModal"
    @close="showLayerSettingSaveModal = null"
  />
</template>
<style>
#layerSettingSFCContainer {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 75px;
  height: 50px;
  z-index: 1;

  display: flex;
  padding: 0.5rem;
  align-items: center;
} 
</style>