<template>
    <ul v-if="documents.length" class="flex flex-col gap-2">
        <li
            v-for="doc in documents"
            :key="doc.id"
            class="flex items-center justify-between rounded border border-neutral-200 px-3 py-2"
        >
            <a
                :href="downloadUrl(doc.id)"
                target="_blank"
                rel="noopener"
                class="flex items-center gap-2 text-sm text-blue-700 hover:underline"
            >
                <Icon name="mdi:file-document-outline" />
                {{ doc.originalName }}
            </a>
            <MalioButtonIcon
                v-if="canManage"
                icon="mdi:delete-outline"
                variant="ghost"
                :aria-label="$t('common.delete')"
                @click="$emit('delete', doc.id)"
            />
        </li>
    </ul>
    <p v-else class="text-sm text-neutral-400">
        {{ $t('directory.documents.empty') }}
    </p>
</template>

<script setup lang="ts">
import type { ReportDocument } from '~/modules/directory/services/dto/report-document'
import { useReportDocumentService } from '~/modules/directory/services/report-documents'

defineProps<{ documents: ReportDocument[], canManage: boolean }>()
defineEmits<{ delete: [id: number] }>()

const { getDownloadUrl } = useReportDocumentService()
function downloadUrl(id: number): string {
    return getDownloadUrl(id)
}
</script>
