<template>
  <div class="homepage-container">
    <HomeHero />

    <TemplateContainer size="l">
      <TwoColumnsLayout
        :separator="false"
        columns-template="1fr 2fr"
        mobile-direction="reverse"
        class="mt-xxl"
      >
        <template #sidebar>
          <HomeToolsListing />

          <HomeEventsListing />
        </template>

        <template #main>
          <HomeNewsSlider />

          <HomeNewsListing />
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

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

import HomeHero from '../components/homepage/HomeHero'
import HomeEventsListing from '../components/homepage/HomeEventsListing'
import HomeToolsListing from '../components/homepage/HomeToolsListing'
import HomeNewsSlider from '../components/homepage/HomeNewsSlider'
import HomeNewsListing from '../components/homepage/HomeNewsListing'

export default {
  name: 'HomePage',
  $_i18nRootPath: 'customs.HOMEPAGE',
  components: {
    TemplateContainer,
    HomeHero,
    TwoColumnsLayout,
    HomeEventsListing,
    HomeToolsListing,
    HomeNewsSlider,
    HomeNewsListing
  }
}
</script>
