<div class="ui-file-upload">
  <digi-form-label
    class="ui-file-upload__label"
    [afFor]="uiId"
    [afLabel]="uiLabel"
    [afRequired]="uiRequired"
    [afDescription]="uiLabelDescription"
    [afAnnounceIfOptional]="uiAnnounceIfOptional"
  ></digi-form-label>
  <digi-button
    *ngIf="uiMultiple || files.length < 1"
    af-variation="secondary"
    [afAriaLabel]="uploadBtnAriaLabel"
    (afOnClick)="fileInput.click()"
  >
    {{ uiUploadBtnText }}
    <ui-icon [uiType]="iconType.PAPERCLIP" slot="icon"></ui-icon>
    <input
      #fileInput
      (change)="onUploadFileHandler($event)"
      [id]="uiId"
      class="ui-file-upload__input"
      [attr.multiple]="uiMultiple"
      type="file"
      [attr.accept]="uiAccept"
      [attr.name]="uiName"
      [attr.required]="uiRequired"
    />
  </digi-button>
  <digi-form-validation-message class="ui-file-upload__validation-message" *ngIf="uiInvalid" af-variation="error">
    {{ this.uiInvalidMessage }}
  </digi-form-validation-message>
  <p class="ui-file-upload__status-message" #statusMessage aria-live="polite"></p>
  <dl *ngIf="files.length" class="ui-file-upload__file-row-container">
    <dt>
      <h2 class="msfa__a11y-sr-only">Uppladdade filer</h2>
    </dt>
    <dd *ngFor="let file of files" class="ui-file-upload__file-row">
      <p class="ui-file-upload__file-name">{{ file.name }}</p>
      <digi-button
        (afOnClick)="onRemoveFileHandler(file['id'])"
        class="ui-file-upload__file-row-btn"
        [afAriaLabel]="'Ta bort ' + file.name"
        af-size="s"
        af-variation="secondary"
      >
        <ui-icon size="m" class="ui-file-upload__icon-remove" [icon]="iconType.X" slot="icon"></ui-icon>
        Ta bort
      </digi-button>
    </dd>
  </dl>
</div>
