<template>
  <div>
    <q-tabs
      v-model="tab_value"
      dense
      class="text-grey"
      active-color="primary"
      indicator-color="primary"
      align="justify"
      narrow-indicator
    >
      <q-tab name="mode" :label="$t('mode')" />
      <q-tab name="plan" :label="$t('plan')" />
    </q-tabs>
    <q-separator />

    <q-tab-panels v-model="tab_value" animated>
      <q-tab-panel name="mode">
        <mode-tree />
      </q-tab-panel>

      <q-tab-panel name="plan">
        <div class="text-h6">Alarms</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import ModeTree from "src/components/ModeTree.vue";

export default defineComponent({
  name: "PageRightToolBar",

  components: { ModeTree },

  setup() {
    let tab_value = ref("mode");
    return { tab_value };
  },
});
</script>
