<!-- Spinner pendant le chargement -->
<div *ngIf="loading" class="flex justify-center items-center h-64">
  <div
    class="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"
  ></div>
</div>

<!-- Timeline -->
<div
  *ngIf="!loading && pins.length > 0"
  class="relative mx-auto max-w-3xl py-10 px-4"
>
  <div
    class="absolute h-full left-1/2 transform -translate-x-1/2 border-l-2 border-blue-500"
  ></div>

  <div
    *ngFor="let pin of pins; let i = index"
    class="mb-12 flex justify-between items-center w-full"
  >
    <!-- Si pair, carte à droite, point à gauche -->
    <div
      class="w-5/12"
      [ngClass]="{ 'order-1': i % 2 === 0, 'order-2': i % 2 !== 0 }"
    ></div>

    <div
      class="z-20 flex items-center bg-blue-600 shadow-lg w-10 h-10 rounded-full"
      [ngClass]="{ 'order-2': i % 2 === 0, 'order-1': i % 2 !== 0 }"
    >
      <span class="text-white font-semibold mx-auto">{{ i + 1 }}</span>
    </div>

    <!-- Content card -->
    <div
      class="bg-white dark:bg-gray-800 rounded-xl shadow-xl px-6 py-5 w-5/12 transition-all duration-300 hover:scale-[1.02]"
      [ngClass]="{
        'order-3': i % 2 === 0,
        'order-0': i % 2 !== 0,
        'text-right': i % 2 !== 0
      }"
    >
      <div class="text-sm text-gray-400 mb-1">
        {{ pin.date ? (pin.date | date : "dd/MM/yyyy") : "Date inconnue" }}
      </div>
      <div class="text-lg font-bold text-gray-900 dark:text-white mb-1">
        {{ pin.title || "Titre inconnu" }}
      </div>
      <div class="text-gray-700 dark:text-gray-300 mb-3">
        {{ pin.description || "Aucune description" }}
      </div>

      <ng-container *ngIf="imageUrls[i] && imageUrls[i].length > 0">
        <img
          [src]="imageUrls[i][0]"
          alt="image"
          class="rounded-lg mx-auto max-h-40 object-cover shadow"
        />
      </ng-container>
      <ng-container *ngIf="!imageUrls[i] || imageUrls[i].length === 0">
        <div class="text-gray-400 italic text-center">Aucune image</div>
      </ng-container>
    </div>
  </div>
</div>

<!-- Message si vide -->
<div
  *ngIf="!loading && pins.length === 0"
  class="text-center text-gray-500 py-12 text-lg"
>
  Aucun souvenir à afficher pour le moment.
</div>
