<template>
  <div class="more-options">
    <a
      class="more-options__more-link"
      data-cy="more-options-link"
      @click.stop="showMenu = !showMenu">
      <ellipses class="more-options__ellipses"/>
    </a>
    <widget-popover
      class="more-options__popover"
      v-if="showMenu"
      @hide-me="showMenu = false">
      <slot/>
    </widget-popover>
  </div>
</template>

<script>
  import WidgetPopover from '@/components/ui/WidgetPopover';
  import Ellipses from '@/components/icons/Ellipses.vue';

  export default {
    components: {
      WidgetPopover,
      Ellipses
    },

    data() {
      return {
        showMenu: false
      };
    }
  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

  .more-options {
    display: flex;
    justify-content: flex-end;

    &__ellipses {
      width: 30px;
      height: 30px;
      fill: $color-charcoal-dark;
      margin-top: -7px;
    }

    &__more-link {
      background-color: rgba($color-white, 0.9);
      width: 35px;
      height: 15px;
      border-radius: 15px;
      display: flex;
      justify-content: center;
    }

    &__popover {
      min-width: 200px;
      @include popover-defaults();
    }
  }
</style>
