<div class="access-message" *ngIf="!isAdmin()">
  <p-messages severity="error" class="message">
    <ng-template pTemplate class="message">
      <div class="ml-2 text-center ">Nu ai acces la aceasta pagina :(</div>
    </ng-template>
  </p-messages>
</div>
<div class="container" *ngIf="isAdmin()">
  <div class="title">
    Administrare
  </div>
  <header class="jumbotron">
    <br/>
    <mat-tab-group mat-align-tabs="center">
      <mat-tab label="Utilizatori">
        <app-users></app-users>
      </mat-tab>
      <mat-tab label="Cereri">
        <div class="titlu-cereri">
          <h2 class="text-center"> Articole in asteptare </h2>
        </div>
        <button class="btn btn-success" (click)="acceptAll()">
          Accepta toate
        </button>
        <button class="btn btn-danger" (click)="declineAll()">
          Refuza toate
        </button>
        <div class="pending-articles" style="min-height: 400px">
          <mat-list>
            <mat-list-item *ngFor="let article of pendingArticles" class="list-item-content">
              <div class="article-details">
                <button type="button" class="btn btn-primary">
                  [{{article.id}}]
                </button>
                - {{ article.title }}
              </div>
              <div class="article-actions">
                <button class="btn btn-success" (click)="approveArticle(article.id)"> Accept</button>
                <button class="btn btn-danger" (click)="declineArticle(article.id)"> Refuza</button>
                <button class="btn btn-warning" (click)="getArticleDetails(article.id)"> Detalii</button>
              </div>
            </mat-list-item>
          </mat-list>
        </div>
      </mat-tab>
      <mat-tab label="Cereri Respinse">
        <div class="titlu-cereri">
          <h2 class="text-center"> Cereri respinse </h2>
        </div>
        <div class="rejected-articles" style="min-height: 400px">
          <mat-list>
            <mat-list-item *ngFor="let article of declinedArticles">
              <div class="article-details">Id articol: {{ article.id }}</div>
              <div class="article-actions">
                <button
                  class="btn btn-success"
                  (click)="approveArticle(article.id)"
                >
                  Accept
                </button>
                <button
                  class="btn btn-danger"
                  (click)="pendArticle(article.id)">
                  Pune in asteptare
                </button>
              </div>
            </mat-list-item>
          </mat-list>
        </div>
      </mat-tab>
    </mat-tab-group>
  </header>
</div>