<template>
  <div class="pb-4">
    <h1 class="title">
      <b-icon :icon="icon_computed" v-if="icon_computed"/>
      <span>{{ title_computed }}</span>
    </h1>
    <h2 class="subtitle" v-html="subtitle_computed"></h2>
  </div>
</template>

<script>
export default {
  name: "LeanispTitle",
  props: ["icon", "title", "subtitle"],
  computed: {
    title_computed() {
      return this.title || this.$t('menu.'+this.$route.name+'.name') || "";
    },
    subtitle_computed() {
      return this.subtitle || this.$t('menu.'+this.$route.name+'.description') || "";
    },
    icon_computed() {
      return this.icon || this.meta.icon || "";
    },
    meta() {
      return (this.$route && this.$route.meta) || "";
    },
  },
};
</script>
