<template>
  <div class="space-pages-page-container">
    <Banner
      :static-data="fetchedData"
      :back="{
        href: { name: 'SpacePage' },
        title: $_tc('back', [fetchedData.title])
      }"
      :add="['pages_categories', 'spaces_pages']"
    />

    <TemplateContainer>
      <GroupByWithTabs
        :categories-filters="getPagesCategoriesFilters($route.params.slug)"
        :page-filters="spacePagesFilters"
        categories-content-type="pages_categories"
        page-content-type="spaces_pages"
        space-content-type="spaces"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import GroupByWithTabs from '@inside-layouts/components/lib/GroupByWithTabs'

import { getPagesCategoriesFilters } from '../../helpers'

import { spacePagesFilters } from '../../constants'

export default {
  name: 'SpacePagesListing',
  $_i18nRootPath: 'customs.SPACES',
  components: { Banner, TemplateContainer, GroupByWithTabs },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      spacePagesFilters
    }
  },
  methods: {
    getPagesCategoriesFilters
  }
}
</script>
