<template>
  <div>
    <Back
      :href="{
        name: 'ClubsListingPage'
      }"
      size="l"
    >
      {{ $_tr('back') }}
    </Back>

    <Banner
      :static-data="fetchedData[0]"
      :add="['clubs', 'clubs_documents', 'clubs_news', 'clubs_folders']"
    />

    <TemplateContainer size="l" class="main-content">
      <TwoColumnsLayout>
        <template #sidebar>
          <ClubsPresentation
            v-if="fetchedData[0].body"
            :presentation="fetchedData[0].body"
          />

          <ClubsMembers
            v-if="fetchedData[0].users.data.length"
            :users="fetchedData[0].users.data"
          />
        </template>

        <template #main>
          <ClubsMissions
            v-if="fetchedData[0].content"
            :missions="fetchedData[0].content"
          />

          <TwoColumnsLayout
            :separator="false"
            columns-template="1fr 1fr"
            class="mt-xxl"
          >
            <template #left>
              <ClubsDocuments />
            </template>

            <template #right>
              <ClubsNews />
            </template>
          </TwoColumnsLayout>
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

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

import ClubsPresentation from '../../components/clubs/ClubsPresentation'
import ClubsMembers from '../../components/clubs/ClubsMembers'
import ClubsMissions from '../../components/clubs/ClubsMissions'
import ClubsDocuments from '../../components/clubs/ClubsDocuments'
import ClubsNews from '../../components/clubs/ClubsNews'

export default {
  name: 'ClubsPage',
  $_i18nRootPath: 'customs.CLUBS_PAGE',
  components: {
    Back,
    Banner,
    TemplateContainer,
    TwoColumnsLayout,
    ClubsPresentation,
    ClubsMembers,
    ClubsMissions,
    ClubsDocuments,
    ClubsNews
  },
  props: {
    fetchedData: {
      type: Array
    }
  }
}
</script>
