<template>
  <TemplateContainer
    v-if="brandInfos"
    size="l"
    class="homepage-template-container"
  >
    <TwoColumnsLayout columns-template="4fr 3fr" :separator="false">
      <template #main>
        <SearchesBlock
          :background-image="
            $_getContentImage(brandInfos.sop_block_bg_image, 'banner-page')
          "
        />

        <DownloadEbook
          :image="$_getContentImage(brandInfos.banner_image, 'thumbnail')"
          :brand-uuid="brandInfos.uuid"
        />

        <SopFoldersListing />
      </template>

      <template #sidebar>
        <MyBrand />
      </template>
    </TwoColumnsLayout>
  </TemplateContainer>
</template>

<script>
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import TwoColumnsLayout from '@inside-commons/components/lib/TwoColumnsLayout'

import SearchesBlock from '../components/home-page/SearchesBlock'
import DownloadEbook from '../components/home-page/DownloadEbook'
import SopFoldersListing from '../components/home-page/SopFoldersListing'
import MyBrand from '../components/home-page/MyBrand'

import BrandsMixin from '../mixins/brands'

export default {
  name: 'HomePage',
  components: {
    TemplateContainer,
    TwoColumnsLayout,
    SearchesBlock,
    DownloadEbook,
    SopFoldersListing,
    MyBrand
  },
  mixins: [BrandsMixin],
  data() {
    return {
      brandInfos: null
    }
  },
  async beforeMount() {
    this.brandInfos = await this.getCurrentBrand()

    this.$store.commit('setContentMainsActions', {
      add: ['documents', 'folders', 'rops', 'sops']
    })
  }
}
</script>

<style lang="scss">
.homepage-template-container {
  margin-top: var(--spacing-l);
}
</style>
