<div class="modal-header">
  <h4 class="modal-title">Select a Drive</h4>
  <button tabindex="14" class="close" ng-click="modal.closeModal()">&times;</button>
</div>

<div class="modal-body">
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="drive in modal.getDrives() track by drive.device"
      ng-disabled="!modal.constraints.isDriveValid(drive, modal.state.getImage())"
      ng-dblclick="modal.selectDriveAndClose(drive)"
      ng-click="modal.toggleDrive(drive)">
        <img class="list-group-item-section" alt="Drive device type logo"
          ng-if="drive.icon"
          ng-src="../assets/{{drive.icon}}.svg"
          width="25"
          height="30">
        <div
          class="list-group-item-section list-group-item-section-expanded"
          tabindex="{{ 15 + $index }}"
          ng-keypress="modal.keyboardToggleDrive(drive, $event)">

          <h4 class="list-group-item-heading">{{ drive.description }}
            <span class="word-keep"
              ng-show="drive.size"> - {{ drive.size | closestUnit }}</span>
          </h4>
          <p class="list-group-item-text" ng-if="!drive.link">{{ drive.displayName }}</p>
          <p class="list-group-item-text" ng-if="drive.link">{{ drive.displayName }} - <b><a ng-click="modal.installMissingDrivers(drive)">{{ drive.linkCTA }}</a></b></p>

          <footer class="list-group-item-footer">

            <span class="label" ng-repeat="status in modal.getDriveStatuses(drive)"
              ng-class="{
                'label-warning': status.type === modal.constraints.COMPATIBILITY_STATUS_TYPES.WARNING,
                'label-danger': status.type === modal.constraints.COMPATIBILITY_STATUS_TYPES.ERROR
              }">{{ status.message }}</span>

          </footer>
          <progress ng-if="drive.progress" value="{{ drive.progress }}" max="100"></progress>
        </div>
        <span class="list-group-item-section tick tick--success"
          ng-show="modal.constraints.isDriveValid(drive, modal.state.getImage())"
          ng-disabled="!modal.state.isDriveSelected(drive.device)"></span>
    </li>
    <li class="list-group-item"
      ng-show="!modal.drives.hasAvailableDrives()">
      <div>
        <b>Connect a drive!</b>
        <div>No removable drive detected.</div>
      </div>
    </li>
  </ul>
</div>

<div class="modal-footer">
  <button class="button button-primary"
    tabindex="{{ 15 + modal.getDrives().length }}"
    ng-class="{
      'button-warning': modal.constraints.hasListDriveImageCompatibilityStatus(modal.state.getSelectedDrives(), modal.state.getImage())
    }"
    ng-click="modal.closeModal()"
    ng-disabled="!modal.state.hasDrive()">Continue</button>
</div>
