<template>
  <div class="enrol-header-wrapper px-0">
    <div class="enrol-header-inner">
      <div class="enrol-header-left">
        <div class="enrol-action-back">
          <b-btn @click="exitEnrolment" class="bg-transparent border-0">
            <icon name="back-arrow" />
          </b-btn>
        </div>
        <div>
          <b-img
            center
            class="pr-3"
            :src="companyLogo"
            :class="$appSettings.evo.enable ? 'icon-size-4' : 'icon-size-3'"
          />
        </div>
        <div class="enrol-text">
          {{ $t('Enrolment.OnlineMemberApplication.Title') }}
        </div>
      </div>
      <div class="enrol-header-right">
        <div class="enrol-action-home">
          <b-btn
            variant="reset"
            @click="exitEnrolment"
            class="d-none d-lg-flex align-items-center justify-content-center p-2"
          >
            <icon name="enrolment-home" />
          </b-btn>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ENROLMENT_COMPLETE, ENROLMENT_START } from '@/config/url-prefix'

export default {
  name: 'EnrolmentHeader',
  data() {
    return {
      companyLogo: this.$const.constImage.COMPANY_LOGO,
    }
  },
  methods: {
    exitEnrolment() {
      ;[ENROLMENT_COMPLETE, ENROLMENT_START].includes(this.$route.path)
        ? this.$router.push({ name: 'Login' })
        : this.$router.push({ name: 'Enrolment', query: this.$route.query })
    },
  },
}
</script>
