<template>
  <div class="homepage-container">
    <HomeHeroModule class="mb-xl" />

    <FlashNews class="mb-xl" />

    <TemplateContainer size="l">
      <CtaBlocksListing :grid-gap="$_theme('spacingL')" class="mb-xl" />
    </TemplateContainer>

    <HomeNewsListing class="mb-xl" />

    <TemplateContainer size="l">
      <div class="container mt-xxl">
        <BirthdaysWidget
          :border="true"
          :show-block-if-no-data="true"
          direction="column"
        />

        <ShortcutsListing
          :background="true"
          :background-color="$_theme('colorLight')"
        />

        <HomeBlockImage />
      </div>
    </TemplateContainer>
  </div>
</template>

<script>
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import Hero from '@inside-commons/components/lib/Hero'
import CtaBlocksListing from '@inside-commons/components/lib/CtaBlocksListing'
import FlashNews from '@inside-commons/components/lib/FlashNews'

import BirthdaysWidget from '@inside-birthdays/components/lib/WidgetBirthdaysContainer'
import ShortcutsListing from '@inside-users/components/lib/ShortcutsListing'

import HomeHeroModule from '../components/home/HomeHeroModule'
import HomeNewsListing from '../components/home/HomeNewsListing'
import HomeBlockImage from '../components/home/HomeBlockImage'

export default {
  name: 'HomePage',
  components: {
    TemplateContainer,
    Hero,
    FlashNews,
    CtaBlocksListing,
    BirthdaysWidget,
    ShortcutsListing,
    HomeHeroModule,
    HomeNewsListing,
    HomeBlockImage
  },
  beforeMount() {
    this.$store.commit('setContentMainsActions', {
      add: ['news', 'events', 'documents']
    })
  }
}
</script>

<style lang="scss" scoped>
.homepage-container {
  .container {
    display: flex;
    gap: var(--spacing-l);

    .widget-birthdays-container {
      width: 32%;
    }

    & > div {
      width: 33.3%;
    }

    @include mobile {
      flex-direction: column;

      .widget-birthdays-container {
        width: 100%;
      }

      & > div {
        width: 100%;
      }
    }
  }
}
</style>
