<template>
  <div class="widget-layout-state">
    <template v-if="isLoading">
      <q-spinner-hourglass color="blue-grey" size="128px" />
      <div class="text-h2 text-blue-grey widget-layout-state__text">
        Немного подождите...
      </div>
    </template>
    <template v-if="!isLoading && isCoffeeTime">
      <q-icon name="la la-coffee" color="blue-grey" size="128px" />
      <div class="text-h2 text-blue-grey widget-layout-state__text">
        Кофе тайм
      </div>
    </template>
  </div>
</template>

<style scoped lang="sass">
.widget-layout-state
  padding-top: 274px
  text-align: center
  display: flex
  flex-direction: column
  width: 100%
  align-items: center

  &__text
    margin-top: 16px
    max-width: 350px
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { QIcon, QSpinnerHourglass } from 'quasar'

@Component({ components: { QSpinnerHourglass, QIcon } })
export default class WidgetLayoutState extends Vue {
  @Prop(Boolean)
  isCoffeeTime!: boolean

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