<div class="d-flex">
  <span mat-dialog-title class="dialog-title">{{'UPLOAD_NEW_VERSION_FILE' | translate}}
    <app-page-help-text code="UPLOAD_NEW_VERSION"></app-page-help-text>
  </span>
  <button mat-icon-button class="close-button ms-auto" (click)="closeDialog()">
    <mat-icon class="close-icon" color="warn">close</mat-icon>
  </button>
</div>

<div mat-dialog-content>
  <form [formGroup]="documentForm">
    <div class="col-md-12">
      <label>{{'DOCUMENT_UPLOAD' | translate}}</label>
      <input class="form-control" #file (change)="upload(file.files)" type="file">
      <div class="text-danger" *ngIf="documentForm.get('url').touched  && documentForm.get('url').errors?.['required']">
        {{'DOCUMENT_IS_REQUIRED' | translate}}
      </div>
    </div>
    <div class="col-md-12">
      <mat-progress-bar *ngIf="showProgress" mode="determinate" [value]="progress"></mat-progress-bar>
    </div>
    <div class="m-t-10 col-md-12 m-b-2">
      <button [disabled]="!isFileUpload" class="btn btn-success btn-sm m-r-10" (click)="SaveDocument()" cdkFocusInitial>
        <i-feather name="save" class="small-icon"></i-feather>
        {{'SAVE' | translate}}</button>
      <button type="button" class="btn btn-danger btn-sm" (click)="closeDialog()">
        <i-feather name="x-circle" class="small-icon"></i-feather>
        {{'CANCEL' | translate}}</button>
    </div>
  </form>
</div>