<template>
  <b-container class="p-0" :class="['c-templates-header-fluid', currentContainerClass]" fluid>
    <b-row class="text-center m-0">
      <slot name="header">
        <component v-if="currentHeader !== null" :is="currentHeader" />
      </slot>
    </b-row>
    <slot>
      <router-view class="route-view" :class="{ contentClass: true }" />
    </slot>
    <b-row class="text-center m-0">
      <slot name="footer">
        <component v-if="currentFooter !== null" :is="currentFooter" />
      </slot>
    </b-row>
  </b-container>
</template>
<script>
import SlotPropsSetter from '../../common/mixins/slot-props-setter'
export default {
  name: 'HeaderFluid',
  props: {
    header: {},
    footer: {},
    containerClass: {},
    contentClass: { type: String, default: 'content' },
  },
  mixins: [SlotPropsSetter],
  data() {
    return {
      currentHeader: null,
      currentFooter: null,
      currentContainerClass: null,
    }
  },
  mounted() {
    this.setSlotProp('containerClass', 'currentContainerClass')
    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>
