<template>
  <div class="itf-editable-button">
    <slot></slot>
    <itf-button v-if="canEdit" secondary icon small class="itf-editable-button__button" @click="$emit('click')">
      <itf-icon name="pen" />
    </itf-button>
  </div>
</template>
<style lang="scss" scoped>
.itf-editable-button {
  position: relative;

  &__button {
    position: absolute !important;
    right: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
  &:hover &__button {
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
  }
}
</style>
<script>
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';

export default @Component({
  components: {
    itfIcon,
    itfButton,
  }
})
class EditButton extends Vue {
  @Prop({ type: Boolean, default: true }) canEdit;
}
</script>
