<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">
        <target-selector
          disabled="main.shouldDriveStepBeDisabled()"
          show="!main.selection.hasDrive() && drive.shouldShowDrivesButton()"
          tooltip="drive.getDriveListLabel()"
          selection="main.selection"
          open-drive-selector="drive.openDriveSelector"
          reselect-drive="drive.reselectDrive"
          flashing="main.state.isFlashing()"
          constraints="main.constraints"
          targets="drive.getMemoizedSelectedDrives()"
        >
        </target-selector>
      </div>

    </div>
  </div>

  <div>
    <featured-project
      ng-if="main.state.isFlashing()"
      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 == 'verifying'"
          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 != null && main.state.getFlashState().percentage != 100">
          <span ng-bind="main.state.getFlashState().speed.toFixed(2) + ' MB/s'"></span>
          <span ng-if="main.state.getFlashState().eta != null">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>
