<template>
    <div class="confirmation">
        <div class="d-flex align-items-center gap-x-2">
            <button :disabled="loading" class="btn btn-success rounded-pill confirmation--btn" @click="cancel">Cancel</button>
            <button :disabled="loading" class="btn btn-danger rounded-pill confirmation--btn" @click="confirm">
                <app-pre-loader v-if="loading" spinnerClass="spinner-border-sm" />
                <span v-else>{{ $t('delete') }}</span>
            </button>
        </div>
    </div>
</template>

<script>
export default {
    props: ['loading'],
    methods: {
        confirm(){
            this.$emit('confirm')
        },
        cancel(){
            this.$emit('cancel')
        },
    }
}
</script>

<style scoped lang="scss">
.confirmation{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.95);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    &--btn{
        height: 40px;
        width: 100px;
    }
}
</style>