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

    <q-tab-panels v-model="tab_value" animated>
      <q-tab-panel name="signal_source">
        <signal-source-tree />
      </q-tab-panel>
      <q-tab-panel name="polling">
        <polling-tree />
      </q-tab-panel>
    </q-tab-panels>
  </div>
  <slot />
</template>

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

export default defineComponent({
  name: "PageLeftToolBar",

  components: { SignalSourceTree, PollingTree },

  setup() {
    const tab_value = ref("signal_source");

    return { tab_value };
  },
});
</script>