<template>
  <div>
    <pure-header
      :homepage="homepage"
      :has-org-logo-slot="hasOrgLogoSlot()"
      :has-after-logo-slot="hasAfterLogoSlot"
      :page-name="pageName"
      :show-nav-buttons="showNavButtons"
      :show-fibermap-link="showFibermapLink"
      @logout="$emit('logout')"
    >
      <template v-if="hasOrgLogoSlot" #org-logo>
        <slot name="org-logo" />
      </template>
      <template v-if="hasAfterLogoSlot" #after-logo>
        <slot name="after-logo" />
      </template>
      <template #logout>
        <slot name="logout" />
      </template>
    </pure-header>
  </div>
</template>

<script>
import PureHeader from './PureHeader.vue';

export default {
  components: {
    PureHeader,
  },
  props: {
    pageName: {
      type: String,
      default: '',
    },
    logoutDropdownButtonText: {
      type: String,
      default: '',
    },
    showNavButtons: {
      type: Boolean,
      default: true,
    },
    showFibermapLink: {
      type: Boolean,
      default: true,
    },
    fibermapLink: {
      type: String,
    },
  },
  data() {
    return {
      homepage: '',
    };
  },
  computed: {
    hasAfterLogoSlot() {
      return Boolean(this.$slots['after-logo']);
    },
  },
  mounted() {
    this.homepage = this.fibermapLink || window.location.origin;
  },
  methods: {
    hasOrgLogoSlot() {
      return Boolean(this.$slots['org-logo']);
    },
  },
};
</script>
