<template>
    <div class="container-fluid">
        <div class="row main-container">
            <div class="col-6 single-tab" :class="tabTogglerLink" @click="onShareByLink()">
                <div class="ml-2">
                    <svg class="icon-square-40">
                        <use xlink:href="/assets/img/mads-common-icons.svg#link-ellipse-small" />
                    </svg>
                </div>
                <div class="ml-3">
                    <div class="share-by-heading text-common-style">Share by link</div>
                </div>
            </div>
            <div class="col-6 single-tab" :class="tabTogglerCockpit" @click="onShareByCockpit()">
                <div class="ml-2">
                    <svg class="icon-square-40">
                        <use xlink:href="/assets/img/mads-common-icons.svg#cockpit-ellipse-small" />
                    </svg>
                </div>
                <div class="ml-3">
                    <div class="share-by-heading text-common-style">Share in Cockpit</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default ({
  data () {
    return {
      tabToggleLink: true,
      tabToggleCockpit: false
    }
  },
  methods: {
    onShareByLink () {
      this.tabToggleLink = true
      this.tabToggleCockpit = false
      this.$emit('on-share-by-link')
    },
    onShareByCockpit () {
      this.tabToggleLink = false
      this.tabToggleCockpit = true
      this.$emit('on-share-by-cockpit')
    }
  },
  computed: {
    tabTogglerLink () {
      return this.tabToggleLink ? 'active' : 'disabled'
    },
    tabTogglerCockpit () {
      return this.tabToggleCockpit ? 'active' : 'disabled'
    }
  }
})
</script>

<style lang="scss" scoped>
.main-container {
    margin: 0;
    .active {
        background: #e7f3fb;
    }
    .disabled {
        opacity: 0.4;
    }
    .single-tab {
        display: flex;
        align-items: center;
        height: 59px;
        cursor: pointer;
        .icon-square-40 {
            height: 40px;
            width: 40px;
        }
    }
}
</style>
