<template>
  <div v-if="company || activityDomain" class="job-header">
    <div v-if="company" class="company">
      <Title tag="h5">
        {{ $_tr('company') }}
      </Title>

      <BaseText>
        {{ company }}
      </BaseText>
    </div>

    <div v-if="activityDomain" class="domain">
      <Title tag="h5">
        {{ $_tr('domain') }}
      </Title>

      <BaseText>
        {{ activityDomain }}
      </BaseText>
    </div>

    <div v-if="region || city" class="location">
      <Title tag="h5">
        {{ $_tr('location') }}
      </Title>

      <BaseText v-if="region">
        {{ region }}
      </BaseText>

      <BaseText v-if="city">
        {{ city }}
      </BaseText>
    </div>
  </div>
</template>

<script>
import { Title, BaseText } from 'inside-collection/atoms'

export default {
  name: 'JobHeader',
  $_i18nRootPath: 'customs.JOBS.MODAL',
  components: { Title, BaseText },
  props: {
    company: { type: String },
    activityDomain: { type: String },
    region: { type: String },
    city: { type: String }
  }
}
</script>
