<div class="title" (click)="initializeMapWithURLs()">
  Forum articole publice
</div>
<!--<button (click)="initializeMapWithURLs()">TEST</button>-->
<div class="articles">
  <ng-container *ngFor="let article of publicArticles">
    <div class="article">
      <div class="article-thumb-container">
        <img
          src="{{getUrl(article.id)}}"
          alt="thumbnail"
          class="article-thumbnail"
        />
        <p *ngIf="!article.photos">No image</p>
      </div>
      <div class="article-description">
        <p class="article-name">{{ article.title }}</p>
        <p class="article-location">Locatie: {{ article.location }}</p>
        <div class="fav-btn">
          <button mat-button color="primary" (click)="openArticleDetails(article.id)">Detalii</button>
          <button mat-icon-button color="warn">
            <img class="heart-logo" src="{{heartLogoForArticle(article.id)}}" (click)="addToFav(article.id)" alt="">
          </button>
        </div>
      </div>
      <!-- Add section  with chatbot - right bottom area of the page (placeholder for the moment) -->
    </div>
  </ng-container>
  <p-toast position="top-right"></p-toast>
  <!--  <script>-->
  <!--    targetElement.addEventListener('scroll', (event) => {-->
  <!--      // handle the scroll event-->
  <!--      console.log("scroll");-->
  <!--      initializeMapWithURLs();-->
  <!--    });-->
  <!--  </script>-->
</div>