<template>
  <li
    :key="doc.url"
    class="grid grid-cols-document-list-item border-b border-b-gray-500 py-3 grid-areas-document-list-item"
  >
    <h3 class="grid-in-title">
      {{ doc.name }}
    </h3>
    <h4 class="grid-in-subtitle">{{ subtitle }}</h4>
    <div class="flex items-center justify-end gap-x-4 grid-in-icons">
      <a v-if="canDelete" class="flex cursor-pointer" @click="emit('delete')">
        <it-icon-delete class="h-8 w-8" />
      </a>

      <a download :href="doc.url" class="flex">
        <it-icon-download class="h-8 w-8" />
      </a>
    </div>
  </li>
</template>

<script setup lang="ts">
defineProps<{
  doc: {
    url: string;
    name: string;
  };
  canDelete: boolean;
  subtitle: string;
}>();

const emit = defineEmits(["delete"]);
</script>
