<template>
  <div class="widget-layout">
    <slot name="bar"></slot>
    <widget-layout-state
      v-if="isLoading || isCoffeeTime"
      :is-loading="isLoading"
      :is-coffee-time="isCoffeeTime"
    />
    <template v-else>
      <keep-alive>
        <router-view />
      </keep-alive>
    </template>
  </div>
</template>

<style scoped lang="sass">
.widget-layout
  display: flex
  position: relative
  height: 100vh
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import WidgetLayoutState from '@/widgets/base/components/widget-layout/WidgetLayoutState.vue'

@Component({
  components: { WidgetLayoutState },
})
export default class WidgetLayout extends Vue {
  @Prop(Boolean)
  isLoading!: boolean

  @Prop(Boolean)
  isCoffeeTime!: boolean
}
</script>
