<template>
  <div class="offer-page">
    <Back size="xl" :href="formattedLink">
      {{ $_tr('back.title') }}
    </Back>

    <TemplateContainer size="s" class="offer-container">
      <Full
        v-bind="fetchedData"
        :categories-config="m_categoriesConfig"
        :scaffold-overrides="m_fullOverrides"
        :bookmark-enabled="true"
        :printable="false"
      />

      <Link v-if="fetchedData.email_address" :href="mail" :inline="false">
        <Button type="secondary">{{ $_tr('button.title') }}</Button>
      </Link>
    </TemplateContainer>
  </div>
</template>

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

import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import Full from '@inside-news/components/lib/Full'
import Back from '@inside-commons/components/lib/Back'

import FullOverridesMixin from '../../mixins/offer-categories-overrides-mixin'

export default {
  name: 'OfferPage',
  $_i18nRootPath: 'customs.OFFERS.PAGE',
  components: {
    Full,
    Link,
    Button,
    Back,
    TemplateContainer
  },
  mixins: [FullOverridesMixin],
  props: {
    fetchedData: {
      type: Object
    }
  },
  data() {
    return {
      mail: `mailto:${this.fetchedData.email_address}`
    }
  },
  computed: {
    formattedLink() {
      return { name: 'OffersListingPage' }
    }
  },
  mounted() {
    this.$store.commit('setContentMainsActions', {
      edit: {
        uuid: this.fetchedData.uuid,
        contentType: this.fetchedData.content_type,
        admin: this.fetchedData.admin
      }
    })
  }
}
</script>

<style lang="scss">
.offer-page {
  .header .date-ui-container {
    margin-right: 0;
  }

  .categories {
    margin-left: var(--spacing-m);
  }

  .back-container {
    margin-bottom: var(--spacing-xxl);
  }

  .offer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
