<div class="admin-experts-list">
  <p-table class="admin-table" [value]="experts" [lazy]="true" (onLazyLoad)="getExpertList($event)" [paginator]="true"
           [rows]="10" [totalRecords]="totalRecords" [loading]="loading">
    <ng-template pTemplate="header" let-columns>
      <tr class="list-row list-row__header">
        <th class="list-item">{{ 'AdminExpertList.Address' | translate }}</th>
        <th class="list-item">{{ 'AdminExpertList.Email' | translate }}</th>
        <th class="list-item">{{ 'AdminExpertList.FullName' | translate }}</th>
        <th class="list-item">{{ 'AdminExpertList.About' | translate }}</th>
        <th class="list-item">{{ 'AdminExpertList.IsAvailable' | translate }}</th>
        <th class="list-item">{{ 'AdminExpertList.IsInHouse' | translate }}</th>
        <th class="list-item">{{ 'AdminExpertList.Categories' | translate }}</th>
        <th class="list-item">{{ 'AdminExpertList.Actions' | translate }}</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr class="list-row">
        <td class="list-item" *ngFor="let col of ['address', 'email']">
          {{rowData[col]}}
        </td>
        <td class="list-item">
          {{(rowData.firstName||'') + ' ' + (rowData.secondName||'')}}
        </td>
        <td class="list-item" *ngFor="let col of ['about', 'isAvailable', 'isInHouse']">
          {{rowData[col]}}
        </td>
        <td class="list-item">
          <div *ngFor="let area of rowData.areas">
            {{area.name}}
          </div>
        </td>
        <td>
          <span (click)="showExpertEditDialog(rowData)" class="edit-icon"
                title="{{ 'AdminExpertList.Edit' | translate }}"></span>
          <span (click)="deleteExpertAsync(rowData.address)" class="delete-icon"
                title="{{ 'AdminExpertList.Delete' | translate }}">
          </span>
        </td>
      </tr>
    </ng-template>
    <ng-template pTemplate="summary" let-rowData>
      <div style="float: left;">
        <button class="main-btn" type="button" (click)="showDialogToCreateNewExpert()">{{ 'AdminExpertList.CreateNew' | translate }}
        </button>
      </div>
    </ng-template>
  </p-table>
</div>
