<template>
  <b-popover
    placement="left"
    triggers="focus"
    :show.sync="show"
    custom-class="popover-heigth-100"
    :target="`popover-option-${id}`"
  >
    <b-button
      id="popover-option-button"
      variant="popover"
      @click="
        () => {
          show = false;
          openModal();
        }
      "
    >
      <img
        src="@/assets/images/icon-settings-red.svg"
        class="icon-chevron icon-settings"
      />
      Настройки
    </b-button>
    <b-button
      id="popover-option-button"
      class="delete"
      variant="popover"
      @click="show = false"
    >
      <img
        src="@/assets/images/icon-clear-red.svg"
        class="icon-chevron icon-delete"
      />
      Удалить
    </b-button>
  </b-popover>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    openModal() {
      this.$bvModal.show(`edit-tome${this.id}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.popover-heigth-100 {
  max-width: 120px;
}

#popover-option-button {
  padding: 0 9px 0 10px;
  font-size: 12px;
  &:hover {
    color: $red-brand-primary;
    box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 25%) inset;
  }
  &:active {
    box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 50%) inset;
  }
  &.delete {
    padding: 0 26px 0 13px;
  }
}

.icon-settings {
  padding-right: 5px;
}

.icon-delete {
  padding-right: 10px;
}
</style>
