import Vue from 'vue'
import MobilePage from '@/plugins/mobile-page'

Vue.use(MobilePage, {
  appendClasses: 'd-flex justify-content-between',
  // Vue component to override the template
  headerTemplate: {
    template: `
      <mobile-page-header-template slot-scope="{title}" class="d-flex justify-content-between">
        {{$t(title)}}
        <div slot="backButton">
          <icon name="eshop-back"></icon>
        </div>
        <div slot="closeButton">
          <icon name="eshop-close"></icon>
        </div>
      </mobile-page-header-template>
    `,
  },
  footerTemplate: {
    template: `
      <mobile-page-footer-template slot-scope="{title}" class="d-flex justify-content-center">
        <b-btn variant="primary">
          {{$t(title)}}        
        </b-btn>
      </mobile-page-footer-template>
    `,
  },
})
