<template>
  <v-dialog :model-value="modelValue" max-width="460" @update:model-value="$emit('cancel')">
    <v-card>
      <v-card-title>Merge tags</v-card-title>
      <v-card-text v-if="collision">
        <p>
          Merge <strong>{{ collision.sourceName }}</strong> into
          <strong>{{ collision.target.name }}</strong>? This moves
          <strong>{{ collision.sourceImageCount }}</strong>
          image(s) onto <strong>{{ collision.target.name }}</strong>.
        </p>
        <p class="mt-2">
          <template v-if="collision.willAlias">
            “{{ collision.sourceName }}” will be kept as an alias of
            “{{ collision.target.name }}” — the tagger may still predict it.
          </template>
          <template v-else>
            “{{ collision.sourceName }}” will be permanently deleted.
          </template>
        </p>
        <p class="mt-2 text-medium-emphasis">This can't be undone.</p>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="$emit('cancel')">Cancel</v-btn>
        <v-btn color="accent" variant="flat" @click="$emit('confirm')">
          Merge
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
defineProps({
  modelValue: { type: Boolean, default: false },
  collision: { type: Object, default: null }
})
defineEmits(['confirm', 'cancel'])
</script>
