<template>
    <!-- notice dialogRef here -->
    <q-dialog ref="dialogRef">
        <q-card class="q-dialog-plugin">
            <q-card-section>
                <div class="dku-grand-title bs-title">
                    <q-icon name="mdi-delete-outline" /> {{ title }}
                </div>
            </q-card-section>
            <q-separator />
            <q-card-section>
                <div v-if="element">
                    <p class="bs-font-medium-2-normal">
                        You are about to remove the optimized product:                    </p>
                    <p>{{ element }}</p>
                </div>
            </q-card-section>
            <q-card-section>
                <!-- buttons example -->
                <q-card-actions align="right">
                    <BsButton
                        class="bs-font-medium-2-normal"
                        unelevated
                        dense
                        @click="onCancelClick"
                    >
                        Cancel</BsButton
                    >
                    <BsButton
                        class="bs-font-medium-2-normal"
                        unelevated
                        dense
                        textColor="primary"
                        @click="onOKClick"
                    >
                        Delete</BsButton
                    >
                </q-card-actions>
            </q-card-section>
        </q-card>
    </q-dialog>
</template>

<script lang="ts">
import { useDialogPluginComponent } from "quasar";

import { defineComponent } from "vue";

export default defineComponent({
    props: {
        element: Object,
        title: String
    },
    emits: [
        // REQUIRED; need to specify some events that your
        // component will emit through useDialogPluginComponent()
        ...useDialogPluginComponent.emits,
    ],
    setup() {
        // REQUIRED; must be called inside of setup()
        const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
            useDialogPluginComponent();

        return {
            dialogRef,
            onDialogHide,
            onOKClick: onDialogOK,
            onCancelClick: onDialogCancel,
        };
    },
});
</script>
<style scoped>
.bs-title {
    color: var(--greyscale-grey-lighten-1, #333);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
</style>
