<template>
  <div class="career_containter">
    <div class="career-item" v-for="(directory, index) in directories" :key="index" @click="view_link(directory)">
      <p class="career-title">
        {{ directory.title_text }}
      </p>
      <p>{{ directory.summary_text }}</p>
    </div>
  </div>
</template>
<script>
import { ContentApi } from '@/utils/index'
export default {
  name: 'Career',
  components: {},
  computed: {},
  mounted() {
    this.retrieve_directories()
  },
  methods: {
    retrieve_directories() {
      ContentApi.retrieve_career_directories(window.location.host)
        .then((response) => {
          this.directories = response.data
        })
        .catch((error) => {
          this.mnx_backendErrorHandler(error)
        })
    },
    view_link(directory) {
      if (directory.content_id)
        this.mnx_navToPdfContentViewer(directory.content_id)
      else if (directory.content_link)
        this.mnx_navToLinkContentViewer(btoa(directory.content_link))
    }
  },
  data() {
    return {
      directories: null
    }
  }
}
</script>
<style scoped lang="scss">
.career_containter {
  @extend .container;
  max-width: 1000px;

  .career-item {
    cursor: pointer;
    box-shadow: 0px 0px 24px 0px #d4d3e380;
    padding: 32px;
    color: #18181a;
    font-size: 14px;
    background-color: white;
    margin-bottom: 32px;
    text-align: left;

    p {
      margin: 0;
    }

    .career-title {
      font-size: 32px;
      margin-bottom: 10px;
    }
  }
}
</style>
