<template>
  <div class="job-page-container">
    <Banner
      :static-data="fetchedData"
      :back="{
        href: { name: 'JobSpacePage' },
        title: $_tc('back', fetchedData.title)
      }"
      :add="['job_pages_categories', 'job_pages']"
      image-key="image"
      introduction-key="description"
    />

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

<script>
import { getPagesCategoriesFilters } from '../../helpers'
import { spacePagesFilters } from '../../constants'

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

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