<template>
  <b-container :class="['c-templates-full', 'd-flex', 'flex-column', 'p-0', classes, currentContainerClass]" fluid>
    <b-row class="text-center px-4">
      <slot name="header">
        <component v-if="currentHeader !== null" :is="currentHeader" />
      </slot>
    </b-row>
    <router-view class="route-view" />
  </b-container>
</template>
<script>
import SlotPropsSetter from '../../common/mixins/slot-props-setter'
/**
 * Header Flex
 * This template displays a full screen view with the header on the top
 * and the content in a display:flex
 */
export default {
  name: 'HeaderFlex',
  props: ['header', 'classes', 'containerClass'],
  mixins: [SlotPropsSetter],
  data() {
    return {
      currentHeader: null,
      currentContainerClass: null,
    }
  },
  mounted() {
    this.setSlotProp('containerClass', 'currentContainerClass')
    this.setSlotProp('header', 'currentHeader')
  },
}
</script>
<style scoped>
.c-templates-full {
  min-height: 100vh;
}

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