<template>
  <section
    class="flex-1"
    aria-labelledby="votre-brief-label"
    data-status="done"
  >
    <h2 id="votre-brief-label">
      <span data-icon="votre-brief">{{ step.text }}</span>
    </h2>
    <div class="cards | flow">
      <article class="card">
        <hgroup class="order-last">
          <h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
        </hgroup>
        <div class="card__meta | flex">
          <time class="card__date | text-grey-700" datetime="2024-06-12">{{
            dayjs(step.modified).format("DD MMMM YYYY")
          }}</time>
        </div>
        <router-link :to="'/' + step.uri">
          <figure class="card__images" data-count="13">
            <img
              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
              alt=""
            />
            <img
              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
              alt=""
            />
            <img
              src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
              alt=""
            />
          </figure>
        </router-link>
      </article>
    </div>
  </section>
</template>

<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";

dayjs.locale("fr");

const { step } = defineProps({
  step: Object,
});
</script>
