<template>
  <div id="social-login">
    <b-row>
      <b-col class="social-login-text">
        <slot></slot>
      </b-col>
      <b-col>
        <b-row class="social-login-row">
          <b-col v-show="facebook">
            <a id="facebook-login" :href="constants.ciUrl+facebook" class="image">
              <img src="/images/facebook_icon.png" alt="Facebook">
            </a>
          </b-col>
          <b-col v-show="linkedin">
            <a id="linkedin-login" :href="constants.ciUrl+linkedin" class="image">
              <img src="/images/linkedin-icon.png" alt="LinkedLn">
            </a>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import C from '../../constants'

export default {
  name: 'Auth',
  components: {},
  props: {
    constants: {
      type: Object,
      default: function() {
        return C
      }
    },
    facebook: {
      type: String,
      default: function() {
        return ''
      }
    },
    linkedin: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      temp: null
    }
  }
}
</script>
