<!-- Upload progress/cancel/error/success header -->
<div *ngIf="isUploading && !error" class="upload-progress-cancel">
  <div class="progress" i18n-title title="Total uploaded">
    <div
      class="progress-bar" role="progressbar"
      [style]="{ width: uploadPercents + '%' }" [attr.aria-valuenow]="uploadPercents" aria-valuemin="0" [attr.aria-valuemax]="100"
    >
      <span *ngIf="uploadPercents === 100 && uploaded === false" i18n>Processing…</span>
      <span *ngIf="uploadPercents !== 100 || uploaded">{{ uploadPercents }}%</span>
    </div>
  </div>

  <input
    *ngIf="uploaded === false"
    type="button" class="peertube-button grey-button ms-1" i18n-value="Cancel ongoing upload" value="Cancel" (click)="cancel.emit()"
  />
</div>

<div *ngIf="error && enableRetryAfterError" class="upload-progress-retry">
  <div class="progress">
    <div class="progress-bar red" role="progressbar" [style]="{ width: '100%' }" [attr.aria-valuenow]="100" aria-valuemin="0" [attr.aria-valuemax]="100">
      <span>{{ error }}</span>
    </div>
  </div>

  <input type="button" class="peertube-button grey-button ms-1" i18n-value="Retry failed upload" value="Retry" (click)="retry.emit()" />
  <input type="button" class="peertube-button grey-button ms-1" i18n-value="Cancel ongoing upload" value="Cancel" (click)="cancel.emit()" />
</div>

<div *ngIf="error && !enableRetryAfterError" class="alert alert-danger">
  <div i18n>Sorry, but something went wrong</div>
  {{ error }}
</div>
