<template>
  <b-container :class="['c-templates-full', 'p-0', classes, currentContainerClass]" fluid>
    <slot name="header">
      <component v-if="currentHeader !== null && showHeader" :is="currentHeader" />
    </slot>
    <div :class="currentSubContainerClass" class="third-party-app-route-view">
      <router-view class="route-view" />
    </div>
    <slot name="footer">
      <component v-if="currentFooter !== null && showFooter" :is="currentFooter" />
    </slot>
  </b-container>
</template>
<script>
import SlotPropsSetter from '@/elements/common/mixins/slot-props-setter'
/**
 * Base Layout
 * This template displays a full screen view with the header on the top
 * and the content in a display:flex
 */
export default {
  name: 'BaseLayout',
  props: {
    header: {
      type: String,
    },
    classes: {
      type: [String, Array],
    },
    containerClass: {
      type: [String, Array],
    },
    subContainerClass: {
      type: [String, Array],
    },
    showHeader: {
      type: Boolean,
      default: false,
    },
    showFooter: {
      type: Boolean,
      default: false,
    },
  },
  mixins: [SlotPropsSetter],
  data() {
    return {
      currentHeader: null,
      currentFooter: null,
      currentContainerClass: null,
      currentSubContainerClass: null,
    }
  },
  mounted() {
    this.setSlotProp('containerClass', 'currentContainerClass')
    this.setSlotProp('subContainerClass', 'currentSubContainerClass')
    this.setSlotProp('header', 'currentHeader')
    this.setSlotProp('footer', 'currentFooter')
  },
}
</script>
<style scoped>
.c-templates-full {
  min-height: 100vh;
}

.route-view {
  flex: 1;
  padding: 0px !important;
}
</style>
