<script setup lang="ts">
import { ref, defineProps } from 'vue';

defineProps({
  tabs: Array,
  title: String,
});
const tab = ref(null);

const back = () => {
  window.history.back();
}
</script>

<template>
  <v-app-bar
    :collapse="false"
    :collapse-on-scroll="true"
    absolute
    color="blue accent-4"
    dark
    scroll-target="#scrolling-techniques-6"
  >
    <v-btn icon @click="back()">
      <v-icon>mdi-arrow-left</v-icon>
    </v-btn>
    <v-toolbar-title>{{ title }}</v-toolbar-title>
    <template v-if="tabs?.length" v-slot:extension>
      <v-tabs align-with-title v-model="tab">
        <slot name="tabs">
          <v-tab v-for="tab of tabs" :value="tab.name.toLowerCase().replaceAll(' ', '-')">{{ tab.name }}</v-tab>
        </slot>
      </v-tabs>
    </template>
  </v-app-bar>
  <v-main>
    <slot :tab="tab"/>
  </v-main>
</template>
