<div [formGroup]="form" class="fl-margin-top">
  <div *ngFor="let fileInputNr of fileInputs" layoutDirection="row">
    <input type="file" id="fileInputId{{fileInputNr}}" (change)="fileInputChanged($event, fileInputNr)"
           #actualFileInputs class="hide">
    <mat-form-field>
      <mat-label i18n>No file chosen</mat-label>
      <input (click)="selectFile(fileInputNr)" matInput formControlName="{{'file' + fileInputNr}}" id="{{'file' + fileInputNr}}"
             type="text" placeholder="No file chosen" i18n-placeholder readonly>
      <a (click)="selectFile(fileInputNr)"
         id="fileInputBtn{{fileInputNr}}" matSuffix mat-icon-button aria-label="attach_file"
         i18n-aria-label [attr.fl-tooltip]="maxSizeReadable ? maxSizeReadable : ''">
        <mat-icon>attach_file_add</mat-icon>
      </a>
      <a (click)="removeSelection(fileInputNr)" matSuffix mat-icon-button aria-label="Clear"
         i18n-aria-label [attr.fl-tooltip]="removeAttachmentTooltip">
        <mat-icon>close</mat-icon>
      </a>
    </mat-form-field>
  </div>
  <a *ngIf="multipleFileSelectors" mat-raised-button (click)="addMoreAtt()">
    <mat-icon class="icon-in-raised-button">add</mat-icon>
  </a>
</div>
