<template>
  <component :is="getParentTemplate" :title="getTitle">
    <template slot="3rdParty-eshop">
      <slot />
    </template>
    <div class="login-landing-form-wrapper d-flex flex-column ">
      <b-container class="login-landing-form justify-content-start" :class="formClass">
        <!-- We need this div because LogoLanding aligns the div to center -->
        <div v-if="showLogo" class="ibs-logo">
          <img :src="ibsLogo" />
        </div>
        <b-row>
          <div class="login-title w-100">
            <b-link v-if="showBack" class="login-back-button">
              <icon
                name="login-back"
                class="icon-size-4 mt-1 mr-2 float-left fa-mouse-pointer"
                @mousedown.native="onBack"
              />
            </b-link>
            <span :class="titleClass">
              {{ !$helpers.isEmpty(title) ? title : $t('Login.LoginForm.Welcome.Title') }}
            </span>
          </div>
          <div v-if="!$helpers.isEmpty(text)" class="login-text" :class="textClass" v-html="text" />
        </b-row>
        <slot />
      </b-container>
      <div class="login-form-footer h-auto container">
        <b-container>
          <slot name="footer"></slot>
        </b-container>
      </div>
    </div>
  </component>
</template>
<script>
import CustomLoginTemplate from '@@/app/login/components/template/customLoginTemplate'
import LogoLanding from '../../../_global/components/landing/LogoLanding'
import EvoLanding from '@/app/login/_global/components/landing/EvoLanding'
import IBSLogo from '@/assets/img/img-ibslogo.png'

export default {
  name: 'FormTemplate',
  components: {
    LogoLanding,
    CustomLoginTemplate,
    EvoLanding,
  },
  props: {
    title: {
      type: String,
    },
    text: {
      type: String,
    },
    formClass: {
      type: [String, Object, Array],
      default: () => [],
    },
    showBack: {
      type: Boolean,
      default: true,
    },
    namespace: {
      type: String,
      default: 'eshop',
    },
    showLogo: {
      type: Boolean,
      default: true,
    },
    titleClass: {
      type: [Array, String],
      default: '',
    },
    textClass: {
      type: [Array, String],
      default: '',
    },
  },
  data: () => ({
    ibsLogo: IBSLogo,
  }),
  methods: {
    onBack() {
      this.$emit('onBack', true)
      this.$router.replace({ name: 'Login' })
    },
  },
  computed: {
    getParentTemplate() {
      return (
        (this.namespace === 'eshop' && 'logo-landing') ||
        (this.namespace === 'evo' && 'evo-landing') ||
        (this.namespace === '3rdParty-eshop' && 'custom-login-template') ||
        ''
      )
    },
    getTitle() {
      if (this.namespace === 'eshop') {
        return this.$t('Login.Landing.Title')
      } else {
        return ''
      }
    },
  },
}
</script>
