<div class="articles-main">
  <div class=" title" (click)="initializeFirebaseData()">
    <h1 class="text-white "> Articolele tale </h1>
  </div>
  <div class="new-article">
    <button
      (click)="newArticle()"
      mat-raised-button
      color="primary"
      class="new-article"
    >Articol nou
    </button>
  </div>

  <div class="message" *ngIf="!haveArticle()" style="margin-bottom: 25em">
    <p-messages severity="info">
      <ng-template pTemplate>
        <div class="ml-2 text-center">Nu ai niciun articol momentan :( </div>
      </ng-template>
    </p-messages>
  </div>


  <mat-tab-group mat-align-tabs="center" style="min-height: 400px" *ngIf="haveArticle()">
    <mat-tab label="Articole active: {{ acceptedArticles !== undefined ? acceptedArticles.length: 0}}" >
      <div class="articles bg-light">
        <div class="articles">
          <ng-container *ngFor="let article of acceptedArticles">
            <div class="article" (click)="articleDetails(article.id, 'true')">
              <div class="article-photo">
                <img
                  src="{{getUrl(article.id)}}"
                  alt="image"
                  class="article-image"
                />
              </div>
              <div class="article-details">
                <div class="article-title">{{ article.title }}</div>
                <div class="article-location">
                  <b>Locatie :</b>{{ article.location }}
                </div>
                <div class="article-description"><b>Descriere :</b>{{ article.description }}</div>
                <div class="article-status"><b> Status: </b> Acceptat</div>
              </div>
            </div>
          </ng-container>
        </div>
      </div>
    </mat-tab>
    <mat-tab label="Favorite: {{ favoriteArticles !== undefined ? favoriteArticles.length: 0 }}">
      <div class="articles">
        <ng-container *ngFor="let article of favoriteArticles">
          <div class="article" (click)="articleDetails(article.id,'false')">
            <div class="article-photo">
              <img
                src="{{getUrl(article.id)}}"
                alt="image"
                class="article-image"
              />
            </div>
            <div class="article-details">
              <div class="article-title">{{ article.title }}</div>
              <div class="article-location">
                <b>Locatie :</b>{{ article.location }}
              </div>
              <div class="article-description">{{ article.description }}</div>
              <div class="article-status">Status: In asteptare</div>
            </div>
          </div>
        </ng-container>
      </div>
    </mat-tab>
    <mat-tab  label="In Procesare: {{ pendingArticles !== undefined ?  pendingArticles.length : 0}}">
      <div class="articles">
        <ng-container *ngFor="let article of pendingArticles">
          <div class="article" (click)="articleDetails(article.id, 'true')">
            <div class="article-photo">
              <img
                src="{{getUrl(article.id)}}"
                alt="placeholder"
                class="article-image"
              />
            </div>
            <div class="article-details">
              <div class="article-title">{{ article.title }}</div>
              <div class="article-location">
                <b>Locatie :</b>{{ article.location }}
              </div>
              <div class="article-description">{{ article.description }}</div>
              <div class="article-status">Status: In asteptare</div>
            </div>
          </div>
        </ng-container>
      </div>
    </mat-tab>
  </mat-tab-group>
</div>