<template>
  <div class="group-members-container">
    <Back
      :href="{ name: 'GroupPage', params: { slug: fetchedData.slug[0] } }"
      size="m"
    >
      {{ $_tr('back') }}
    </Back>

    <Banner
      :static-data="{ title: $_tc('title', [fetchedData.title]) }"
      size="m"
    />

    <TemplateContainer size="m">
      <Directory :uuid="fetchedData.uuid" content-type="spaces" />
    </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 Directory from '../../components/commons/GroupDirectory'

export default {
  name: 'GroupMembersContainer',
  $_i18nRootPath: 'customs.GROUPS',
  components: { Back, Banner, TemplateContainer, Directory },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  }
}
</script>
