<template>
  <Banner
    :static-data="data"
    :background-color="$_theme('colorSecondary')"
    :extra-fields="['introduction']"
    :back="{
      href: { name: 'ExperiencesPage' },
      title: $_tr('back')
    }"
    introduction-key="subtitle"
  >
    <template #footer>
      <BaseText :dark-mode="true" :style="{ 'text-align': 'center' }">
        {{ infos }}
      </BaseText>
    </template>
  </Banner>
</template>

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

import { BaseText } from 'inside-collection/atoms'

export default {
  name: 'ExperienceHeader',
  components: { Banner, BaseText },
  $_i18nRootPath: 'customs.EXPERIENCE_PAGE.HEADER',
  computed: {
    data() {
      return this.getCheckedData(this.heritedData, 0)
    },
    infos() {
      const publishedAt = this.$_formatDate(this.data.published_at)
      const updatedAt = this.$_formatDate(this.data.updated_at)
      return this.$_tc('infos', [publishedAt, updatedAt])
    }
  }
}
</script>
