<template>
    <Modal :isModalOpen="true" :modal-width="800" :modal-height="650">
        <template #modalHeader>
            <h3 class="modal-title">GM Panel</h3>
            <div class="gm-selector">
                <button class="btn-cyan" @click="toggle = 'asset-manager'">Asset Manager</button>
                <button class="btn-cyan" >Button 2</button>
                <button class="btn-cyan" >Button 3</button>
            </div>
        </template>
        <template #modalBody>
            

            <div class="panel-body">
                <AssetManager v-if="toggle == 'asset-manager'" />
            </div>
        </template>
    </Modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Modal from '@/components/utilities/Modal.vue'
import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue'

let toggle = ref('asset-manager');

</script>

<style lang="scss">
@import '@/assets/scss/main';

.gm-selector {
    display: flex;
    gap: 5px;
    align-self: end;

    button {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: none;
        padding: 6px 15px;
        min-width: 100px;
    }
}

</style>