<div class="main-container">
  <ng-template [ngIf]="inactiveUsers">
    <div class="mat-h2 heading" style="display: flex; justify-content: space-between;">
      <div class="text">Profily ke schválení</div>
      <div class="buttons">
        <button mat-button color="primary" (click)="onApproveAll();">Schválit vše</button>
        <button mat-button color="warn" (click)="onRejectAll();">Zamítnout vše</button>
      </div>
    </div>
    <mat-accordion multi="true">
      <mat-expansion-panel *ngFor="let inactiveUser of inactiveUsers"> 
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ inactiveUser.firstName }} {{ inactiveUser.lastName }}
          </mat-panel-title>
          <mat-panel-description>
            {{ inactiveUser.email }}
          </mat-panel-description>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent>
            <ng-container *ngIf="inactiveUser.company">
                <h5>Firma/instituce</h5>
                {{ inactiveUser.company }}
              </ng-container>
              <ng-container *ngIf="inactiveUser.position">
                <h5>Pozice ve firmě/instituci</h5>
                {{ inactiveUser.position }}
              </ng-container>
        </ng-template>   
        <mat-action-row>
          <button mat-button mat-raised-button color="primary" (click)="onApprove(inactiveUser);">Schválit</button>
          <button mat-button mat-raised-button color="warn" (click)="onReject(inactiveUser);">Zamítnout</button>
        </mat-action-row> 
      </mat-expansion-panel>
    </mat-accordion>
  </ng-template>
  <ng-template [ngIf]="users">
    <div class="mat-h2 heading">Aktivní profily</div>
    <mat-accordion *ngIf="users" multi="true">
      <mat-expansion-panel *ngFor="let user of users"> 
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ user.firstName }} {{ user.lastName }}
          </mat-panel-title>
          <mat-panel-description>
            {{ user.email }}
          </mat-panel-description>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent>
          <h5>Role</h5>
          {{ user.role.label }}
          <ng-container *ngIf="user.company">
            <h5>Firma/instituce</h5>
            {{ user.company }}
          </ng-container>
          <ng-container *ngIf="user.position">
            <h5>Pozice ve firmě/instituci</h5>
            {{ user.position }}
          </ng-container>
        </ng-template>
        <mat-action-row *ngIf="user.id !== loggedUser.id">
          <button mat-button mat-stroked-button color="primary" routerLink="/profile/{{user.id}}">Upravit</button>
          <button mat-button mat-stroked-button color="warn" (click)="onDelete(user.id);">Smazat</button>
        </mat-action-row> 
      </mat-expansion-panel>
    </mat-accordion>
  </ng-template>
</div>

  