<template>
  <div class="position-relative vh-100 bg-white">
    <b-navbar variant="white" type="light" sticky class="shadow pr-0">
      <b-navbar-brand class="w-100">
        <b-row>
          <b-col class="pr-0">
            <b-button
              v-if="showBackIcon"
              variant="link"
              class="mr-2 pt-0 pl-1 pl-md-3"
              :to="{ name: 'TreeFileUpload' }"
            >
              <icon name="back-arrow" class="icon-size-2"></icon>
            </b-button>
            <span class="font-weight-bold font-size-5 font-size-md-4">{{ $t('TreeViewer.AppHeader') }}</span>
          </b-col>
          <b-col class="d-flex justify-content-end">
            <b-button v-if="showBackIcon" variant="link" class="pt-0 pr-0" @click="showLegend">
              <icon name="info-circle-icon" class="icon-size-2"></icon>
            </b-button>
          </b-col>
        </b-row>
      </b-navbar-brand>
    </b-navbar>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  computed: {
    showBackIcon() {
      return this.$store.state.route.meta.backIcon
    },
  },
  methods: {
    showLegend() {
      this.$bvModal.show('eshop-tree')
    },
  },
}
</script>
