<template>
  <b-row>
    <b-col class="d-flex justify-content-start text-nowrap" md="5">
      <span class="breadcrum-space mr-2 akkurat-bold">{{ currentPage.name }}</span> |
      <router-link to="/">
        <font-awesome-icon icon="home" class="mx-1"/>
      </router-link>
      <div v-for="page in getPageHistory" :key="page.name">
        >
        <router-link :to="page.path">
          <span class="mx-1 akkurat-light-regular page-name">{{ page.name }}</span>
        </router-link>
      </div>
    </b-col>
    <b-col md="7">
      <div class="breadcrum-space mr-2 text-right akkurat-light-italic gray-color">
        {{ currentPage.description }}
      </div>
    </b-col>
  </b-row>
</template>

<script>
export default {
  name: 'custom-breadcrumbers',
  methods: {
    routerName() {
      console.log('router name', this.$router.history.current);
    },
  },
  computed: {
    currentPage() {
      const campaign = this.$store.state.campaign.current;
      var campaign_name = "";
if(campaign !=null){
  campaign_name = campaign.name;
}

      const page = this.$router.history.current.matched[0];
      return {
        name: page.name,
        description: (page.meta.description != null)?  page.meta.description.replace("{{CAMPAIGN}}",campaign_name) : "",
      };
    },
    getPageHistory() {
      const { matched } = this.$router.history.current;
      const pages = [];
      matched.forEach((page) => {
        pages.push({
          name: page.name,
          path: page.path,
          description: page.meta.description,
        });
      });
      return pages;
    },
  },
};
</script>

<style scoped lang="scss">
.breadcrumb-spac {
  font-size: 0.75rem;
}

.page-name {
  letter-spacing: 0.35px;
  color: #FF9B64;
  font-size: 14px;
}

.gray-color {
  letter-spacing: 0.35px;
  color: #3E3E3E;
  font-size: 14px;
}
</style>
