<template>
  <MasterDetail>
    <template #master>
      <MasterTabs selectedTab="secrets" @change="tabSelected" />
    </template>
    <template #detail>
      <RouterView v-slot="{ Component, route }">
        <transition name="fade" :css="false">
          <component :is="Component" :key="route.path" />
        </transition>
      </RouterView>
    </template>
  </MasterDetail>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import MasterDetail from '@/views/layout/MasterDetail.vue'
import MasterTabs from '@/components/common/MasterTabs.vue'
import { useRouter, useRoute } from 'vue-router'
import { RouterView } from 'vue-router'

const router = useRouter()
const route = useRoute()

function tabSelected(tabName: string) {
  if (tabName !== 'secrets') {
    router.push({ name: tabName })
  }
}

const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
</script>
