<template>
    <div>
        <div class="d-flex justify-content-center mt-3">
            <div class="share-by-heading text-common-style">Share your dashboard by</div>
        </div>
        <div class="d-flex justify-content-center mt-3">
            <div class="popup-rectangle d-flex align-items-center" @click="shareByLink()">
                <div class="ml-3">
                    <svg class="icon-square">
                        <use xlink:href="/assets/img/mads-common-icons.svg#link-ellipse" />
                    </svg>
                </div>
                <div class="ml-3">
                    <div class="share-by-heading text-common-style">Share by link</div>
                    <div
                        class="share-by-sub-heading"
                    >Share the dashboard link with password protection</div>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-center mt-3">
            <div class="popup-rectangle d-flex align-items-center" @click="shareByCockpit()">
                <div class="ml-3">
                    <svg class="icon-square">
                        <use xlink:href="/assets/img/mads-common-icons.svg#cockpit-ellipse" />
                    </svg>
                </div>
                <div class="ml-3">
                    <div class="share-by-heading text-common-style">Share in Cockpit</div>
                    <div
                        class="share-by-sub-heading"
                    >Access the cockpit platform and review dashboard</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    shareByLink () {
      this.$emit('share-by-link')
    },
    shareByCockpit () {
      this.$emit('share-by-cockpit')
    }
  }
}
</script>

<style lang="scss">
.share-by-heading {
    font-weight: 700;
    color: #212429;
  }
  .share-by-sub-heading {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 24px;
    color: #495057;
  }
  .icon-square {
    height: 50px;
    width: 50px;
  }
  .text-common-style {
    font-size: 12px;
    line-height: 24px;
  }
  .popup-rectangle {
    width: 381px;
    height: 84px;
    background: #ffffff;
    border: 1px solid #acb5bd;
    border-radius: 8px;
    &:hover {
      background: #f8f9fa;
      cursor: pointer;
    }
  }
</style>
