hunk.code_window: 'use strict'
   const settings = require('../models/settings')
   const utils = require('../../../shared/utils')
   /**
    * @summary Make the progress status subtitle string
    *
    * @param {Object} state - flashing metadata
  
hunk.labels: keep keep keep keep add keep keep keep keep keep
hunk.after_edit: const units = require('../../../shared/units')
  
hunk.file_path: lib/gui/app/modules/progress-status.js
hunk.type: add
file: <div class="page-main row around-xs">
    <div class="col-xs" ng-controller="ImageSelectionController as image">
      <div class="box text-center relative" os-dropzone="image.selectImageByPath($file)">
  
        <div class="center-block">
          <svg-icon contents="[ main.selection.getImageLogo() ]" paths="[ '../../assets/image.svg' ]"></svg-icon>
        </div>
  
        <div class="space-vertical-large">
          <image-selector
            has-image="main.selection.hasImage()"
            open-image-selector="image.openImageSelector"
            main-supported-extensions="image.mainSupportedExtensions"
            extra-supported-extensions="image.extraSupportedExtensions"
            show-selected-image-details="main.showSelectedImageDetails"
            image-name="main.selection.getImageName()"
            image-basename="image.getImageBasename()"
            reselect-image="image.reselectImage"
            flashing="main.state.isFlashing()"
            image-size="main.selection.getImageSize()"
          >
          </image-selector>
        </div>
      </div>
    </div>
  
    <div class="col-xs" ng-controller="DriveSelectionController as drive">
      <div class="box text-center relative">
        <div class="step-border-left" ng-disabled="main.shouldDriveStepBeDisabled()" ng-hide="main.state.isFlashing() && main.isWebviewShowing"></div>
        <div class="step-border-right" ng-disabled="main.shouldFlashStepBeDisabled()" ng-hide="main.state.isFlashing() && main.isWebviewShowing"></div>
  
        <div class="center-block">
          <svg-icon paths="[ '../../assets/drive.svg' ]"
            disabled="main.shouldDriveStepBeDisabled()"></svg-icon>
        </div>
  
        <div class="space-vertical-large">
          <div ng-if="!main.selection.hasDrive() && drive.shouldShowDrivesButton()">
  
            <div>
              <button class="button button-primary button-brick"
                tabindex="{{ main.selection.hasDrive() ? -1 : 2 }}"
                ng-disabled="main.shouldDriveStepBeDisabled()"
                ng-click="drive.openDriveSelector()">Select drive</button>
            </div>
  
          </div>
          <div ng-if="main.selection.hasDrive() || !drive.shouldShowDrivesButton()">
  
            <div class="step-selection-text"
              ng-class="{
                'text-disabled': main.shouldDriveStepBeDisabled()
              }">
              <span class="step-drive step-name"
                ng-class="{
                  'text-warning': !main.selection.getSelectedDevices().length
                }"
                uib-tooltip="{{ drive.getDriveListLabel() }}">
                <!-- middleEllipsis errors on undefined, therefore fallback to empty string -->
                {{ drive.getDrivesTitle() | middleEllipsis:20 }}
              </span>
              <span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"
                uib-tooltip="{{ main.constraints.getListDriveImageCompatibilityStatuses(main.selection.getSelectedDrives(), main.selection.getImage())[0].message }}"
                ng-show="main.constraints.hasListDriveImageCompatibilityStatus(main.selection.getSelectedDrives(), main.selection.getImage())"></span>
              <button class="button button-link step-footer"
                tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"
                ng-hide="main.state.isFlashing() || !drive.shouldShowDrivesButton()"
                ng-click="drive.reselectDrive()">Change</button>
              <span
                ng-if="main.selection.getSelectedDevices().length <= 1"
                ng-class="{
                  'step-fill': !drive.shouldShowDrivesButton()
                }"
                class="step-drive step-size">
                {{ drive.getDrivesSubtitle() }}
              </span>
            </div>
          </div>
          <div ng-if="main.selection.getSelectedDevices().length > 1"
            ng-class="{
              'step-fill': !drive.shouldShowDrivesButton()
            }"
            class="step-drive step-list">
            <div ng-repeat="driveObj in drive.getMemoizedSelectedDrives()"
              uib-tooltip="{{ driveObj.description }} ({{ driveObj.displayName }})">
              {{ driveObj.description | middleEllipsis:14 }}
            </div>
          </div>
        </div>
      </div>
    </div>
  
    <div>
      <featured-project
        ng-class="{
          'fp-visible': main.state.isFlashing() && main.isWebviewShowing
        }"
        on-webview-show="main.setWebviewShowing"
      ></featured-project>
    </div>
  
    <div>
      <reduced-flashing-infos
        image-logo="main.selection.getImageLogo()"
        image-name="main.selection.getImageName() || main.getImageBasename() | middleEllipsis:16"
        image-size="main.selection.getImageSize() | closestUnit"
        drive-title="main.getDrivesTitle() | middleEllipsis:16"
        should-show="main.state.isFlashing() && main.isWebviewShowing"
      ></reduced-flashing-infos>
    </div>
  
    <div class="col-xs" ng-controller="FlashController as flash">
      <div class="box text-center">
        <div class="center-block">
          <svg-icon paths="[ '../../assets/flash.svg' ]"
            disabled="main.shouldFlashStepBeDisabled()"></svg-icon>
        </div>
  
        <div class="space-vertical-large">
          <progress-button
            tabindex="3"
            striped="main.state.getFlashState().type == 'check'"
            active = "main.state.isFlashing()"
            percentage="main.state.getFlashState().percentage"
            label="flash.getProgressButtonLabel()"
            disabled="!!main.state.getLastFlashErrorCode() || main.shouldFlashStepBeDisabled()"
            callback="flash.flashImageToDrive" >
          </progress-button>
  
          <button class="button button-link button-abort-write"
            ng-if="main.state.isFlashing()"
            ng-click="flash.cancelFlash()">
            <span class="glyphicon glyphicon-remove-sign"></span>
          </button>
  
          <p class="step-footer step-footer-split" ng-if="main.state.getFlashState().speed && main.state.getFlashState().percentage != 100">
            <span ng-bind="main.state.getFlashState().speed.toFixed(2) + ' MB/s'"></span>
            <span>ETA: {{ main.state.getFlashState().eta | secondsToDate | amDateFormat:'m[m]ss[s]' }}</span>
          </p>
  
          <div class="target-status-wrap" ng-if="main.state.getFlashState().failed">
            <div class="target-status-line target-status-failed">
              <span class="target-status-dot"></span>
              <span class="target-status-quantity">{{ main.state.getFlashState().failed }}</span>
              <span class="target-status-message">{{
                main.progressMessage.failed(main.state.getFlashState().failed)
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  