<template>
  <div class="entity-page">
    <Banner :static-data="fetchedData" :add="['entitites']" />

    <TemplateContainer size="l">
      <TwoColumnsLayout>
        <template #sidebar>
          <Block
            v-if="fetchedData.users.data"
            :title="$_tr('TEAMS.title')"
            title-tag="h3"
            class="mb-l"
          >
            <EntityTeams :users="fetchedData.users.data" class="mb-l" />
          </Block>

          <Block
            v-if="
              fetchedData.website ||
                fetchedData.facebook ||
                fetchedData.twitter ||
                fetchedData.linkedin ||
                fetchedData.instagram
            "
            :title="$_tc('LINKS.title', fetchedData.title)"
            title-tag="h3"
            class="mb-l"
          >
            <EntityLinks :fetched-data="fetchedData" />
          </Block>

          <EntityNews />
        </template>

        <template #main>
          <ParagraphListing
            v-if="fetchedData.content"
            :herited-data="fetchedData.content"
            :herited-options="{ template: true }"
          />
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

<script>
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 Block from '@inside-commons/components/lib/Block'

import ParagraphListing from '@inside-library/components/listing/ParagraphListing'

import EntityTeams from '../../components/entity/EntityTeams'
import EntityLinks from '../../components/entity/EntityLinks'
import EntityNews from '../../components/entity/EntityNews'

export default {
  name: 'EntityPage',
  $_i18nRootPath: 'customs.ENTITY',
  components: {
    Banner,
    TemplateContainer,
    TwoColumnsLayout,
    Block,
    ParagraphListing,
    EntityTeams,
    EntityLinks,
    EntityNews
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  }
}
</script>
