<script lang="ts" setup>
defineProps<{
  notification: boolean
}>()

defineEmits(['update:notification', 'confirm', 'cancel'])
</script>

<template>
  <q-dialog
    :model-value="notification"
    @update:model-value="(v) => $emit('update:notification', v)"
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 400px">
      <q-card-section>
        <div class="text-h6">
          <q-icon
            name="error"
            color="warning"
            size="2.5rem"
          />เตือนพบไฟล์ชื่อซ้ำในระบบ
        </div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        หากดำเนินการต่อข้อมูลจะถูกเขียนทับ
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-primary">
        <q-space />
        <q-btn
          flat
          label="ยกเลิก"
          v-close-popup
          @click="() => $emit('cancel')"
        />
        <q-btn
          flat
          label="ดำเนินการต่อ"
          v-close-popup
          class="text-red"
          @click="() => $emit('confirm')"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
