<template>
  <itf-confirm-popover :cancel-caption="cancelCaption" :confirm-class="confirmClass" :confirm-caption="deleteCaption" @confirm="$emit('delete')">
    <template #activator="{ on }">
      <slot name="activator" :on="on" :loading="loading">
        <itf-button
          icon
          :disabled="loading || disabled"
          :loading="loading"
          v-on="on"
          @click.stop.prevent
        >
          <itf-icon name="trash" />
        </itf-button>
      </slot>
    </template>
    <slot>{{$t('components.popover.areYouSureToDeleteThis')}}</slot>
  </itf-confirm-popover>
</template>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';
import itfConfirmPopover from './ConfirmPopover';

export default @Component({
  components: {
    itfIcon,
    itfButton,
    itfConfirmPopover
  }
})
class itfDeletePopover extends Vue {
  @Prop(Boolean) loading;
  @Prop({ type: Boolean, default: false }) disabled;
  @Prop({ type: String, default: 'text-danger' }) confirmClass;
  @Prop({ type: String, default () { return this.$t('components.popover.noKeepIt'); } }) cancelCaption;
  @Prop({ type: String, default () { return this.$t('components.popover.yesDelete'); } }) deleteCaption;
}
</script>
