<template>
  <div class="widget-footer">
    <a @click="showMenu = !showMenu" class="widget-footer__more-link">
      <ellipses></ellipses>
    </a>
    <widget-popover :entity="entity"
                    @delete="onDelete"
                    @hide-me="showMenu = false"
                    @edit="onEdit"
                    :id="id"
                    v-if="showMenu"></widget-popover>
  </div>
</template>

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

  export default {
    props: ['on-delete', 'on-edit', 'id', 'entity'],

    components: {
      Ellipses,
      WidgetPopover
    },

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

<style scoped lang="scss">
  @import "@/styles/_variables.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;

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

    &__more-link {
      cursor: pointer;
    }

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