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

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

  export default {
    components: {
      WidgetPopover,
      Ellipses
    },

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

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .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 {
      width: 180px;
      @include popover-defaults();
    }
  }
</style>
