<!--<link-->
<!--  rel="stylesheet"-->
<!--  href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"-->
<!--  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"-->
<!--  crossorigin="anonymous"-->
<!--/>-->
<div class="details bg-super-light">
  <div class="back-button">
    <button mat-raised-button color="warn" (click) = "goBack()">Inapoi</button>
  </div>
  <div class="article-description bg-text">
    <div class="article-title "> {{ getArticleTitle() }} </div>
  </div>
  <div class="article-content ">
    <div class="details-content">
      <div class="article-images">
        <div id="articleImagesCarousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner"  role="listbox">
            <img src="{{ fetch()}}"
                 alt="thumbnail"
                 class="article-thumbnail">
          </div>
        </div>
      </div>
      <div class="article-descriere">
        {{article.description}}
        <div class="article-contact">
          <h2  >Informatii de contact</h2>
          <h3 class="text-left"> Email : {{ article.email }}   </h3>
          <h3 class="text-left"> Telefon: {{ article.phone }} </h3>
          <h3 class="text-left"> Status: {{ article.status }} </h3>
          <h3 class="text-left"> Locatie: {{ article.location }} </h3>
          <h2 *ngIf="!isOwner" class="text-left">Contacteaza detinatorul</h2>
          <div *ngIf="!isOwner" class="article-actions">
            <input type="text" class="form-control" [(ngModel)]="message"  placeholder="Mesajul tau">
            <button class="btn btn-primary" (click) = "sendMessage(article.id)">Trimite</button>
          </div>
<!--          TODO implement article update page (maybe in a modal)-->
<!--          https://www.primefaces.org/primeng/dialog-->
<!--          TODO function for deleting an article-->
          <button  *ngIf="isOwner" class="btn btn-primary" (click) = "fetch()" > Modifica articol </button>
          <div class="messages-counter text-left">
            <h3>Mesaje pentru acest articol: {{ messagesForArticle.length }}</h3>
          </div>
          <p-toast position="top-right"></p-toast>
        </div>
      </div>
    </div>
    </div>
  </div>