<!-- Duplicates List Modal -->
<div v-if="showDuplicatesModal && duplicatesModalData" @click.self="showDuplicatesModal = false" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
    <div class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-sm">
        <div class="p-5">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2.5">
                    <div class="flex items-center justify-center h-9 w-9 rounded-full bg-amber-100 dark:bg-amber-900/50">
                        <i class="fas fa-copy text-amber-500 dark:text-amber-400"></i>
                    </div>
                    <h3 class="text-base font-semibold text-[var(--text-primary)]">
                        ${ duplicatesModalData.total_copies } ${ t('upload.copies') || 'copies' }
                    </h3>
                </div>
                <button @click="showDuplicatesModal = false" class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="space-y-1">
                <button v-for="copy in duplicatesModalData.copies" :key="copy.id"
                        @click="navigateToDuplicate(copy.id)"
                        class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors"
                        :class="copy.is_self
                            ? 'bg-[var(--bg-accent-light)] border border-[var(--border-focus)]'
                            : 'hover:bg-[var(--bg-tertiary)]'">
                    <i class="fas fa-file-audio text-sm flex-shrink-0"
                       :class="copy.is_self ? 'text-[var(--text-accent)]' : 'text-[var(--text-muted)]'"></i>
                    <div class="min-w-0 flex-1">
                        <div class="text-sm font-medium truncate"
                             :class="copy.is_self ? 'text-[var(--text-accent)]' : 'text-[var(--text-primary)]'">
                            ${ copy.title }
                            <span v-if="copy.is_self" class="text-xs font-normal text-[var(--text-muted)] ml-1">(current)</span>
                        </div>
                        <div class="text-xs text-[var(--text-muted)]">${ copy.created_at }</div>
                    </div>
                    <i v-if="!copy.is_self" class="fas fa-chevron-right text-xs text-[var(--text-muted)]"></i>
                </button>
            </div>
        </div>
    </div>
</div>
