<template>
  <div class="faq-page">
    <Banner :add="['jobs']" page="faq" />

    <TemplateContainer size="l">
      <ParagraphListing
        :heritedData="content"
        :heritedOptions="{ template: true }"
      />

      <ExperienceCTAButtons class="mt-xxl" />
    </TemplateContainer>
  </div>
</template>

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

import ParagraphListing from '@inside-library/components/listing/ParagraphListing'

import ExperienceCTAButtons from '../../components/experiences/ExperienceCTAButtons'

import { http } from '@inside-library/helpers/Http'

export default {
  name: 'FaqPage',
  components: {
    Banner,
    TemplateContainer,
    ParagraphListing,
    ExperienceCTAButtons
  },
  data() {
    return {
      content: null
    }
  },
  async beforeMount() {
    this.content = await this.getFaqContent()
  },
  methods: {
    async getFaqContent() {
      try {
        const { data } = await http.get('content/custom', {
          fields: ['content'],
          filters: {
            'custom_slug:eq': 'faq',
            'status:eq': 1
          }
        })
        return data[0].content
      } catch (err) {
        throw new Error(err)
      }
    }
  }
}
</script>
