<template>
  <flex-1-1 class="logo-landing">
    <b-container slot="left" :style="{ backgroundImage: `url('${loginBg}')` }">
      <b-row>
        <b-col />
      </b-row>
      <b-row class="download-title d-none d-lg-flex pb-2" align-v="end">
        <label> {{ title }} </label>
      </b-row>
      <b-row class="login-download-image d-none d-lg-flex w-100 align-items-start">
        <b-col cols="4" class="login-download-store">
          <b-row class="ibs-mobile-qr">
            <img :src="iBSMobileQR" />
          </b-row>
        </b-col>
      </b-row>
      <b-row class="footer">
        <b-col>{{ $t('Copyright', { year: new Date().getFullYear() }) }}</b-col>
      </b-row>
    </b-container>
    <div slot="right" class="logo-landing-content">
      <slot />
    </div>
  </flex-1-1>
</template>
<script>
import LoginBg from '@/assets/img/img-loginhub.png'
import IBSMobileQR from '@/assets/img/iBS-MobileQR.png'

export default {
  name: 'LogoLanding',
  props: ['title'],
  data() {
    return {
      loginBg: LoginBg,
      iBSMobileQR: IBSMobileQR,
    }
  },
}
</script>
