<template>
  <div class="more-actions">
    <a
      :class="{'more-actions__toggle--background': background}"
      class="more-actions__toggle"
      data-cy="toggle-more-actions-menu"
      @click="toggleMenu">
      <ellipses/>
    </a>
    <widget-popover
      class="more-actions__popover"
      v-if="showMenu"
      @hide-me="showMenu = false">
      <slot/>
    </widget-popover>
  </div>
</template>

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

  export default {
    props: {
      background: {
        type: Boolean,
        default: false
      }
    },

    components: {
      Ellipses,
      WidgetPopover,
    },
    data() {
      return {
        showMenu: false,
      };
    },

    methods: {
      toggleMenu: function () {
        this.showMenu = !this.showMenu;
      },
    },
  };
</script>

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

  .more-actions {
    svg {
      width: 30px;
      fill: $color-charcoal-dark;
      //margin-right: 15px;
    }

    &__toggle {
      background: white;
      display: flex;
      border-radius: 5px;
    }
  }
</style>
