<h1 mat-dialog-title>{{ 'orgUnitPropertiesTitle' | translate }}</h1>
<div mat-dialog-content>
  <mat-tab-group dynamicHeight>
    <mat-tab label="{{ 'generalDataTab' | translate }}">
      <table mat-table [dataSource]="generalData" class="mat-elevation-z8 custom-table">
        <ng-container matColumnDef="property">
          <th mat-header-cell *matHeaderCellDef>{{ 'propertyHeader' | translate }}</th>
          <td mat-cell *matCellDef="let element" class="property-column"> {{ element.property }} </td>
        </ng-container>
        <ng-container matColumnDef="value">
          <th mat-header-cell *matHeaderCellDef>{{ 'valueHeader' | translate }}</th>
          <td mat-cell *matCellDef="let element">
            <ng-container *ngIf="isBoolean(element.value); else normalValue">
              <mat-icon [ngClass]="{'true-icon': element.value, 'false-icon': !element.value}">
                {{ element.value ? 'check_circle' : 'cancel' }}
              </mat-icon>
            </ng-container>
            <ng-template #normalValue>{{ element.value }}</ng-template>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </mat-tab>
    <mat-tab label="{{ 'classroomNetworkPropertiesTab' | translate }}">
      <table mat-table [dataSource]="networkData" class="mat-elevation-z8 custom-table">
        <ng-container matColumnDef="property">
          <th mat-header-cell *matHeaderCellDef>{{ 'propertyHeader' | translate }}</th>
          <td mat-cell *matCellDef="let element" class="property-column"> {{ element.property }} </td>
        </ng-container>
        <ng-container matColumnDef="value">
          <th mat-header-cell *matHeaderCellDef>{{ 'valueHeader' | translate }}</th>
          <td mat-cell *matCellDef="let element">
            <ng-container *ngIf="isBoolean(element.value); else normalValue">
              <mat-icon [ngClass]="{'true-icon': element.value, 'false-icon': !element.value}">
                {{ element.value ? 'check_circle' : 'cancel' }}
              </mat-icon>
            </ng-container>
            <ng-template #normalValue>{{ element.value }}</ng-template>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </mat-tab>
  </mat-tab-group>
</div>
<div mat-dialog-actions align="end">
  <button class="ordinary-button" style="margin: 1em;" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
</div>
