<template>
  <div>
    <Banner
      :static-data="{ ...fetchedData, introduction }"
      :add="['visit_report']"
      :edition-enabled="editionEnabled"
    />

    <TemplateContainer>
      <TwoColumnsLayout>
        <template #sidebar>
          <SpaceCollaborators
            :franchised="fetchedData.franchised.data"
            :collaborators="fetchedData.collaborators.data"
          />

          <SpaceForms />
        </template>

        <template #main>
          <SpaceVisitReportListing />

          <SpaceGed />
        </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 SpaceCollaborators from '../../components/spaces/SpaceCollaborators'
import SpaceForms from '../../components/spaces/SpaceForms'
import SpaceGed from '../../components/spaces/SpaceGed'
import SpaceVisitReportListing from '../../components/spaces/SpaceVisitReportListing'

import { isEditionRole } from '../../helpers/index'

export default {
  name: 'SpacePage',
  components: {
    Banner,
    TemplateContainer,
    TwoColumnsLayout,
    SpaceCollaborators,
    SpaceForms,
    SpaceGed,
    SpaceVisitReportListing
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      introduction: this.fetchedData.description
    }
  },
  computed: {
    editionEnabled() {
      return isEditionRole()
    }
  }
}
</script>
