front/src/app/components/share-modal/share-modal.component.html

<div id="share-modal-{{ pinId }}">
  <!-- Fond assombri -->
  <div
    class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
    [ngClass]="{
      'opacity-0 pointer-events-none': !isShareModalOpen,
      'opacity-100': isShareModalOpen
    }"
    (click)="closeShareModal()"
    id="share-modal-background-{{ pinId }}"
  ></div>

  <!-- Main modal -->
  <div
    id="share-modal-{{ pinId }}"
    tabindex="-1"
    aria-hidden="true"
    [ngClass]="{
      'opacity-0 scale-50 pointer-events-none': !isShareModalOpen,
      'opacity-100 scale-100': isShareModalOpen
    }"
    class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out overflow-y-auto"
  >
    <div class="relative p-4 w-full max-w-md max-h-full">
      <!-- Modal content -->
      <div
        class="relative bg-white rounded-lg shadow dark:bg-gray-700 transition-transform duration-300 ease-in-out my-8"
      >
        <!-- Modal header -->
        <div
          class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"
        >
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
            Partager ce souvenir
          </h3>
          <button
            type="button"
            (click)="closeShareModal()"
            class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
          >
            <svg
              class="w-3 h-3"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 14 14"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
              />
            </svg>
            <span class="sr-only">Fermer la modal</span>
          </button>
        </div>

        <!-- Modal body -->
        <div class="p-4 md:p-5 space-y-4">
          <!-- Options de partage -->
          <div class="flex flex-col space-y-4">
            <div class="p-4">
              <input
                type="text"
                id="search-friends"
                class="w-full p-2 mb-2 border rounded-lg dark:bg-gray-700 dark:text-white"
                placeholder="Rechercher un ami..."
                [(ngModel)]="searchTerm"
                (ngModelChange)="onSearchTermChange($event)"
              />

              <div *ngIf="listUser" class="text-gray-500 text-sm">
                <div
                  *ngFor="let user of listUser"
                  class="friend flex items-center justify-between space-x-3 pt-10"
                >
                  <div class="friend flex items-center space-x-3">
                    <img
                      class="w-10 h-10 rounded-full"
                      src="/avatar.png"
                      alt="Friend 2"
                    />
                    <span class="text-gray-900 dark:text-white">{{
                      user.username
                    }}</span>
                  </div>
                  <button
                    *ngIf="!user.isShared"
                    (click)="sharePin(user.friend_user_id)"
                    class="p-2 bg-green-500 text-white rounded-full hover:bg-green-600 transition-colors"
                  >
                    <svg
                      class="w-6 h-6 text-white"
                      aria-hidden="true"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-width="2"
                        d="M7.926 10.898 15 7.727m-7.074 5.39L15 16.29M8 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm12 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm0-11a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"
                      />
                    </svg>
                  </button>
                  <button
                    *ngIf="user.isShared"
                    (click)="unsharePin(user.friend_user_id)"
                    class="p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
                  >
                    <svg
                      class="w-6 h-6"
                      aria-hidden="true"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <path
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z"
                      />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>