<template>
  <div class="home-page">
    <Heromodule class="mb-xxl" />

    <TemplateContainer>
      <Block
        :title="$_tr('news.title')"
        :title-options="{ alignment: 'center' }"
        title-tag="h2"
      >
        <FeaturedNewsWithData />
      </Block>

      <Block
        :link="{ name: 'NewsListingPage' }"
        :link-label="$_tr('news.link')"
        class="mt-xxl"
      >
        <NewsListing />
      </Block>

      <HrUi />

      <div class="events-video-block">
        <EventsListing />

        <Video />
      </div>

      <Socials />
    </TemplateContainer>
  </div>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import HrUi from '@inside-library/components/ui/HrUi'

import Heromodule from '../components/home/Heromodule'
import FeaturedNews from '../components/home/FeaturedNews'
import NewsListing from '../components/home/NewsListing'
import Socials from '../components/home/SocialsHomepage'
import Video from '../components/home/VideoHomepage'
import EventsListing from '../components/home/EventsListing'

import { fetchFeaturedNews } from '../fetch'

import { withFetch } from 'inside-collection/hocs'

export default {
  name: 'HomePage',
  $_i18nRootPath: 'customs.HOME_PAGE',
  components: {
    Heromodule,
    Block,
    TemplateContainer,
    HrUi,
    NewsListing,
    Socials,
    Video,
    EventsListing,
    FeaturedNewsWithData: withFetch(FeaturedNews, { size: 'xl' })(
      fetchFeaturedNews
    )
  },
  mounted() {
    this.$store.commit('setContentMainsActions', {
      add: ['news', 'pages', 'events']
    })
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.home-page {
  .events-video-block {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: repeat(2, 1fr);

    @include mobile {
      grid-template-columns: 1fr;
    }
  }
}
</style>
