<template>
  <article class="card">
    <hgroup class="order-last">
      <h3 class="card__title | font-serif | text-lg">
        <router-link :to="uri" class="link-full">
          {{ pdf.label.length ? pdf.label : pdf.name.replace(".pdf", "") }}
        </router-link>
      </h3>
    </hgroup>

    <DateTime :date="pdf.modified" />

    <template v-if="hasImage">
      <figure
        v-if="pdf.cover"
        class="card__images pdf-cover"
        style="aspect-ratio: unset"
      >
        <img :src="pdf.cover" alt="" loading="lazy">
      </figure>
      <div v-else class="card__images" data-icon="document"></div>
    </template>

    <footer
      v-if="pdf.comments?.length > 0"
      class="order-last | text-sm text-primary font-medium"
    >
      <router-link :to="'/' + step.uri + '&comments=true'">
        {{ pdf.comments.length }} commentaire{{
          pdf.comments.length > 1 ? "s" : ""
        }}
      </router-link>
    </footer>
    <div class="btn btn--xs btn--dtl | mt-16" v-if="isDesignToLightStep(step)" data-icon="leaf" lang="en">Design to Light</div>
  </article>
</template>
<script setup>
import { useRoute } from "vue-router";
import DateTime from "./DateTime.vue";
import { computed } from "vue";
import { useDesignToLightStore } from "../../../stores/designToLight";

const { step, pdf, index } = defineProps({
  step: Object,
  pdf: Object,
  index: Number,
  hasImage: {
    default: true,
    type: Boolean,
  },
});

const { isDesignToLightStep } = useDesignToLightStore();

const route = useRoute();

const uri = computed(() => {
  const fileIndex =
    index ?? step.files.findIndex((file) => file.type === "document");
  return `${route.fullPath}?dialog=${step.slug}&fileIndex=${fileIndex}`;
});
</script>
