<template>
  <div>
    <slot name="links">
      <b-navbar toggleable="md" class="p-0">
        <b-navbar-toggle target="nav-collapse" class="text-left p-3 rounded-0 w-100 bg-primary d-flex d-md-none">
          <icon name="bars" class="text-white" />
          <span class="ml-3 text-white">{{ menuTitle }}</span>
        </b-navbar-toggle>
        <b-collapse id="nav-collapse" class="w-100" is-nav>
          <b-navbar-nav>
            <b-nav-item
              :class="{ 'd-none active': routeMatched(link.url) }"
              class="d-md-inline-block rounded-top"
              v-for="(link, index) in links"
              :key="`inks-${index}`"
              :to="link.url"
            >
              <router-link class="nav-link p-0 text-capitalize" :to="link.url">
                {{ link.title }}
              </router-link>
            </b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </slot>
    <span class="d-block d-md-none mb-2" />
    <div class="dashboard-panel-element rounded-0">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'TabsTemplate',
  props: {
    links: { type: Array, required: true },
    menuTitle: { type: String, default: '' },
  },
  methods: {
    routeMatched(link) {
      return (
        this.$route.matched.find(route => {
          if (link.hasOwnProperty('name')) {
            return route.name === link.name
          } else {
            return new RegExp(route.regex).test(link)
          }
        }) !== undefined
      )
    },
  },
}
</script>
