<template>
  <JobsListingBlock
    :block-options="blockOptions"
    :extra-filters="extraFilters"
    :fractions="3"
    :pagination="false"
    class="mt-xxl"
  >
    <template #card="{ item }">
      <Card
        v-bind="item"
        :key="item.uuid"
        :scaffold-overrides="scaffoldCardOverrides"
      />
    </template>
  </JobsListingBlock>
</template>

<script>
import { markRaw } from 'vue'

import { BaseText } from 'inside-collection/atoms'
import Block from '@inside-commons/components/lib/Block'
import Card from '@inside-jobs/components/lib/Card'
import JobsListingBlock from '@inside-jobs/components/lib/JobsListingBlock'

export default {
  name: 'HomeJobsListing',
  $_i18nRootPath: 'customs.HOMEPAGE.JOBS_LISTING',
  components: { Block, Card, JobsListingBlock },
  computed: {
    extraFilters() {
      return [
        {
          limit: 3
        }
      ]
    },
    blockOptions() {
      return {
        title: this.$_tr('title'),
        titleTag: 'h3',
        titleOptions: { alignment: 'center' },
        link: { name: 'JobsPage' },
        linkLabel: this.$_tr('more')
      }
    }
  },
  methods: {
    scaffoldCardOverrides(data, { addItemBefore }) {
      addItemBefore('title', {
        id: 'job-details',
        class: 'job-details',
        tag: 'div',
        children: [
          {
            id: 'date',
            class: 'date',
            value: this.$_formatDate(data.published_at)
          },
          {
            id: 'business',
            class: 'business',
            tag: markRaw(BaseText),
            value: data.business.data[0].title
          }
        ]
      })
    }
  }
}
</script>
