<div class="row around-xs">
  <div class="col-xs">
    <div class="box text-center" os-dropzone="app.selectImage($file)">
      <svg-icon class="center-block" path="../../../assets/image.svg"></svg-icon>
      <span class="icon-caption">ELEGIR IMAGEN .ISO</span>
      <span class="badge space-top-medium">1</span>

      <div class="space-vertical-large">
        <div ng-hide="app.selection.hasImage()">
          <button class="btn btn-primary btn-brick" ng-click="app.openImageSelector()">Elegir imagen</button>

          <p class="step-footer">
            Descarg&aacute; la imagen de Huayra<br />desde el
            <button class="btn-link" os-open-external="http://huayra.conectarigualdad.gob.ar/iso-sistema">sitio oficial</button>
          </p>
        </div>
        <div ng-if="app.selection.hasImage()">
          <div ng-bind="app.selection.getImagePath() | basename | middleEllipses:25"></div>

          <button class="btn btn-link step-tooltip"
            ng-click="app.tooltipModal.show({
              title: 'Ruta completa de la imagen',
              message: app.selection.getImagePath()
            })">Mostrar la ruta</button>

          <button class="btn btn-link step-footer"
            ng-click="app.reselectImage()"
            ng-hide="app.writer.isFlashing()">Cambiar</button>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs">
    <div class="box text-center relative">
      <div class="step-border-left" ng-disabled="!app.selection.hasImage()"></div>
      <div class="step-border-right" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"></div>

      <svg-icon class="center-block"
        path="../../../assets/drive.svg"
        ng-disabled="!app.selection.hasImage()"></svg-icon>
      <span class="icon-caption"
        ng-disabled="!app.selection.hasImage()">ELEGIR UNIDAD</span>

      <span class="badge space-top-medium" ng-disabled="!app.selection.hasImage()">2</span>

      <div class="space-vertical-large">
        <div ng-hide="app.selection.hasDrive()">

          <div ng-show="app.drives.hasAvailableDrives() || !app.selection.hasImage()">
            <button class="btn btn-primary btn-brick"
              ng-disabled="!app.selection.hasImage()"
              ng-click="app.openDriveSelector()">Elegir unidad</button>
          </div>

          <div ng-hide="app.drives.hasAvailableDrives() || !app.selection.hasImage()">
            <button class="btn btn-danger btn-brick">Conectar unidad</button>
          </div>

        </div>
        <div ng-show="app.selection.hasDrive()">
          <div>{{ app.selection.getDrive().name }} - {{ app.selection.getDrive().size | gigabyte | number:1 }} GB</div>
          <button class="btn btn-link step-footer"
            ng-click="app.reselectDrive()"
            ng-hide="app.writer.isFlashing()">Cambiar</button>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs">
    <div class="box text-center">
      <svg-icon class="center-block"
        path="../../../assets/flash.svg"
        ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"></svg-icon>
      <span class="icon-caption"
        ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">CLONAR</span>

      <span class="badge space-top-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</span>

      <div class="space-vertical-large">
        <progress-button class="btn-brick"
          percentage="app.writer.state.percentage"
          striped="{{ app.writer.state.type == 'check' }}"
          ng-attr-active="{{ app.writer.isFlashing() }}"
          ng-show="app.wasLastFlashSuccessful()"
          ng-click="app.flash(app.selection.getImagePath(), app.selection.getDrive())"
          ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">
            <span ng-show="app.writer.state.percentage == 100 && app.writer.isFlashing()">Terminando...</span>
            <span ng-show="app.writer.state.percentage == 0 && !app.writer.isFlashing()">Clonar!</span>
            <span ng-show="app.writer.state.percentage == 0 && app.writer.isFlashing() && !app.writer.state.speed">Comenzando...</span>
            <span ng-show="app.writer.state.speed && app.writer.state.percentage != 100 && app.writer.state.type != 'check'"
              ng-bind="app.writer.state.percentage + '% '"></span>
            <span ng-show="app.writer.state.speed && app.writer.state.percentage != 100 && app.writer.state.type == 'check'"
              ng-bind="app.writer.state.percentage + '% Validating...'"></span>
        </progress-button>

        <div class="alert-ribbon alert-warning" ng-class="{ 'alert-ribbon--open': !app.wasLastFlashSuccessful() }">
          <span class="glyphicon glyphicon-warning-sign"></span>
          <span ng-show="app.settings.get('validateWriteOnSuccess')">
            Su unidad parece inv&aacute;lida.<br>Por favor inserte otra e <button class="btn btn-link" ng-click="app.restartAfterFailure()">intente nuevamente</button>
          </span>
          <span ng-hide="app.settings.get('validateWriteOnSuccess')">
            Upa! algo parece estar mal. Clic <button class="btn btn-link" ng-click="app.restartAfterFailure()">ac&aacute;</button> para reintentar
          </span>
        </div>

        <button class="btn btn-warning btn-brick" ng-hide="app.wasLastFlashSuccessful()" ng-click="app.restartAfterFailure()">
          <span class="glyphicon glyphicon-repeat"></span> Reintentar
        </button>

        <p class="step-footer step-footer-split" ng-show="app.writer.state.speed && app.writer.state.percentage != 100">
          <span>ETA: {{ app.writer.state.eta | secondsToDate | amDateFormat:'m[m]ss[s]' }}</span>
          <span ng-bind="app.writer.state.speed.toFixed(2) + ' MB/s'"></span>
        </p>
      </div>
    </div>
  </div>
</div>
