<template>
  <div class="widget-footer">
    <a @click="toggleMenu"
        class="widget-footer__more-link">
      <ellipses></ellipses>
    </a>
    <widget-popover v-if="showMenu"
                    @hide-me="showMenu = false">
      <slot :hide="toggleMenu"></slot>
    </widget-popover>
  </div>
</template>

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

  export default {

    components: {
      Ellipses,
      WidgetPopover
    },

    data() {
      return {
        showMenu: false
      }
    },

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

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

  .widget-footer {
    background-color: $color-grey--lighter;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
    border-bottom-left-radius: $default-border-radius;
    border-bottom-right-radius: $default-border-radius;
    visibility: hidden;

    @include desktop {
      visibility: visible;
    }

    /*
     * For IE10+
     */
    -ms-grid-row: 2;

    &__more-link {
      cursor: pointer;
    }

    svg {
      width: 30px;
      fill: $color-darkgrey-1;
      margin-right: 15px;
    }
  }
</style>
