front/src/app/components/pin-detail/pin-detail.component.html

<!-- Conteneur principal -->
<div class="min-h-[90vh] px-4 py-4 overflow-y-auto" id="pin-detail-container">
  <!-- .pin-detail agit comme conteneur vertical -->
  <div class="pin-detail">
    <div class="card-pin-detail" *ngIf="pin">
      <!-- Bouton retour à gauche -->
      <div class="mb-6">
        <button
          (click)="goBack()"
          class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition"
        >
          ← Retour à la carte
        </button>
      </div>

      <!-- Titre -->
      <h2 class="text-3xl font-semibold mb-4 text-gray-800 text-center">
        {{ pin.title }}
      </h2>

      <!-- Carousel -->
      <div
        *ngIf="pin.files.length > 0; else noImagesPlaceholder"
        class="relative mt-2 mb-4 overflow-hidden rounded-lg carousel-flex"
        [ngClass]="{ 'h-32 sm:h-40 md:h-52 lg:h-60': false }"
      >
        <!-- Images -->
        <div
          *ngFor="let imageId of pin.files; let index = index"
          [class]="
            'absolute inset-0 transition-opacity duration-700 ease-in-out w-full h-full' +
            (index === currentIndex ? ' opacity-100' : ' opacity-0')
          "
        >
          <div
            class="relative w-full h-full overflow-hidden rounded-lg flex items-center justify-center"
          >
            <img
              [src]="imageUrls[index]"
              [hidden]="!imagesLoaded"
              class="object-contain mx-auto w-full h-full max-w-[80vw] max-h-[80vh]"
            />
            <div
              *ngIf="!imagesLoaded"
              class="w-full h-full bg-gray-200 flex items-center justify-center"
            >
              <span class="text-gray-500">Loading image...</span>
            </div>
          </div>
        </div>

        <!-- Contrôles gauche/droite -->
        <ng-container *ngIf="pin.files.length > 1">
          <!-- Précédent -->
          <button
            type="button"
            class="absolute top-1/2 left-2 z-30 -translate-y-1/2 flex items-center justify-center px-2 cursor-pointer group focus:outline-none"
            (click)="prevSlide()"
          >
            <span
              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-black/30 group-hover:bg-black/50"
            >
              <svg class="w-4 h-4 text-white" viewBox="0 0 6 10" fill="none">
                <path
                  d="M5 1 1 5l4 4"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </span>
          </button>

          <!-- Suivant -->
          <button
            type="button"
            class="absolute top-1/2 right-2 z-30 -translate-y-1/2 flex items-center justify-center px-2 cursor-pointer group focus:outline-none"
            (click)="nextSlide()"
          >
            <span
              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-black/30 group-hover:bg-black/50"
            >
              <svg class="w-4 h-4 text-white" viewBox="0 0 6 10" fill="none">
                <path
                  d="M1 9l4-4-4-4"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </span>
          </button>
        </ng-container>
      </div>

      <!-- Fallback si pas d'image -->
      <ng-template #noImagesPlaceholder>
        <div
          class="relative mt-2 overflow-hidden rounded-lg flex items-center justify-center bg-gray-200"
          [ngClass]="{ 'h-32 sm:h-40 md:h-52 lg:h-60': true }"
        >
          <span class="text-gray-500">No images available</span>
        </div>
      </ng-template>

      <!-- Adresse -->
      <p class="text-sm text-gray-500 mb-2">📍 {{ pin.complete_address }}</p>

      <!-- Date -->
      <p class="text-sm text-gray-500 mb-6" *ngIf="pin.date">
        📅 {{ pin.date | date : "longDate" }}
      </p>

      <!-- Description -->
      <div
        #desc
        class="text-lg mb-4 text-justify transition-all duration-300"
        [ngClass]="{
          'max-h-[4.5rem] overflow-hidden whitespace-normal':
            !expandedDescription,
          'max-h-36 overflow-y-auto whitespace-normal': expandedDescription
        }"
        style="line-height: 1.5rem; word-break: break-word"
      >
        {{ pin.description || "Aucune description" }}
      </div>

      <!-- Voir plus / moins -->
      <div *ngIf="showToggleButton" class="text-right mb-6">
        <button
          (click)="toggleDescription()"
          class="text-blue-600 font-semibold hover:underline"
        >
          {{ expandedDescription ? "Voir moins" : "Voir plus" }}
        </button>
      </div>

      <!-- Section utilisateur / partage -->
      <div class="mt-8 border-t border-gray-200 pt-4 text-sm text-gray-600">
        <div class="mb-2">
          <span class="font-medium text-gray-700">
            {{ username === username_session ? "Créé par : " : "Partagé par : " }}
          </span>
          <span>{{ username }}</span>
        </div>

        <div *ngIf="sharedUsers.length > 0" class="mt-2">
          <span class="font-medium text-gray-700 block mb-1"
            >Partagé avec :</span
          >
          <div class="flex flex-wrap gap-2">
            <span
              *ngFor="let user of sharedUsers"
              class="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full shadow-sm"
            >
              {{ user.username }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>