<template>
  <q-dialog ref="dlgRef" persistent>
    <q-card class="bg-dark text-grey-1 add-loc-card q-pa-sm">
      <q-toolbar>
        <q-avatar :icon="icon" color="secondary" text-color="black" />
        <q-toolbar-title>Command Control</q-toolbar-title>
      </q-toolbar>
      <q-card-section class="q-ml-lg">
        <div class="q-mb-sm">Are you sure you want to {{ name }} ? </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right">
        <q-btn flat label="OK" @click="onOkClick" />
        <q-btn flat label="Cancel" @click="onDialogCancel" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

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

defineProps({
  name: { type: String, required: true },
  icon: { type: String, required: true },
});

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef: dlgRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();

function onOkClick() {
  onDialogOK();
}
</script>
