<div class="create-client-container">
  <h1 mat-dialog-title i18n="@@add-client-dialog-title">Añadir multiples clientes</h1>
  <div class="inputs-container">
    <div class="mat-dialog-content" [ngClass]="{'loading': loading}">

      <form class="client-form grid-form" *ngIf="!loading">
        <mat-form-field class="form-field">
          <mat-label>{{ 'organizationalUnitLabel' | translate }}</mat-label>
          <mat-select (selectionChange)="setOrganizationalUnit($event)" [value]="organizationalUnit">
            <mat-select-trigger>
              {{ getSelectedParentName() }}
            </mat-select-trigger>
            <mat-option *ngFor="let unit of parentUnitsWithPaths" [value]="unit.id">
              <div class="unit-name">{{ unit.name }}</div>
              <div style="font-size: smaller; color: gray;">{{ unit.path }}</div>
            </mat-option>
          </mat-select>
        </mat-form-field>
      </form>

      <div>
        <div class="upload-container">
          <button class="action-button" (click)="fileInput.click()">Subir fichero</button>
          <input #fileInput type="file" (change)="onFileUpload($event)" accept="*" hidden>
          <p>o añadelos manualmente:</p>
          <div *ngIf="showTextarea">
            <textarea #textarea matInput
              placeholder="Ejemplo: host bbaa-it1-11 { hardware ethernet a0:48:1c:8a:f1:5b; fixed-address 172.17.69.11; };"
              rows="20" cols="100"></textarea>
            <button class="action-button" style="margin-top: 0.5em;"
              (click)="onTextarea(textarea.value)">Previsualizar</button>
          </div>
        </div>

        <h4 *ngIf="uploadedClients.length > 0">Clientes importados:</h4>
        <div *ngIf="uploadedClients.length > 0" class="scrollable-table">
          <table mat-table [dataSource]="uploadedClients" class="mat-elevation-z8" *ngIf="uploadedClients.length > 0">
            <ng-container matColumnDef="name">
              <th mat-header-cell *matHeaderCellDef> Nombre </th>
              <td mat-cell *matCellDef="let client"> {{ client.name }} </td>
            </ng-container>

            <ng-container matColumnDef="ip">
              <th mat-header-cell *matHeaderCellDef> IP </th>
              <td mat-cell *matCellDef="let client"> {{ client.ip }} </td>
            </ng-container>

            <ng-container matColumnDef="mac">
              <th mat-header-cell *matHeaderCellDef> Mac </th>
              <td mat-cell *matCellDef="let client"> {{ client.mac }} </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div mat-dialog-actions class="action-container">
    <button class="ordinary-button" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
    <button class="submit-button" [disabled]="!organizationalUnit" (click)="onSubmit()">{{ 'saveButton' | translate
      }}</button>
  </div>
</div>