<template>
  <div class="jobs-page">
    <Banner
      :static-data="fetchedData"
      :add="['domains', 'domains_page', 'jobs_page']"
      :back="{
        href: {
          name: 'SpacePage',
          params: { slug: $route.params.slug }
        },
        title: $_tr('back')
      }"
    />

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

      <component-listing
        v-if="fetchedData.data.data.length"
        :id="listingId"
        :static-data="fetchedData.data.data"
        :pagination="false"
        class="mt-l"
      >
        <template #default="{ item }">
          <Link :href="link(item.slug[0])" :inline="false">
            <CardImage
              :image="$_getContentImage(item.image, 'image-card')"
              :title="item.title"
            />
          </Link>
        </template>
      </component-listing>
    </TemplateContainer>
  </div>
</template>

<script>
import { Link, CardImage } from 'inside-collection/components'

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

import Random from '@inside-library/helpers/GenerateID'
import ParagraphListing from '@inside-library/components/listing/ParagraphListing'

export default {
  name: 'JobsPage',
  $_i18nRootPath: 'customs.SPACE.jobs',
  components: {
    Link,
    CardImage,
    Banner,
    TemplateContainer,
    ParagraphListing
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      listingId: `pageListing${Random.ID()}`
    }
  },
  computed: {
    back() {
      return {
        href: {
          name: 'SpacePage',
          params: { slug: this.$route.params.slug }
        },
        title: this.$_tr('back')
      }
    }
  },
  methods: {
    link(slug) {
      return {
        name: 'DomainPage',
        params: {
          slug: this.$route.params.slug,
          jobs: this.$route.params.jobs,
          domain: slug
        }
      }
    }
  }
}
</script>
