<div class="form-group">
  <label class="control-label col-sm-2">
    Replaces
  </label>
  <div class="col-sm-10">
    <div class="input-group">
      <input type="text" ng-model="pendingCertificate.selectedReplaces" placeholder="Certificate123..."
             uib-typeahead="certificate.name for certificate in certificateService.findCertificatesByName($viewValue)" typeahead-loading="loadingCertificates"
             class="form-control input-md" typeahead-on-select="pendingCertificate.attachReplaces($item)"
             uib-tooltip="Lemur will mark any certificates being replaced as 'inactive'"
             uib-tooltip-trigger="focus" uib-tooltip-placement="top" typeahead-wait-ms="500">
          <span class="input-group-btn">
            <button ng-model="replaces.show" class="btn btn-md btn-default" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
              <span class="badge">{{ pendingCertificate.replaces.length || 0 }}</span>
            </button>
          </span>
    </div>
    <table class="table">
      <tr ng-repeat="replaces in pendingCertificate.replaces track by $index">
        <td><a class="btn btn-sm btn-info">{{ replaces.name }}</a></td>
        <td><span class="text-muted">{{ replaces.description }}</span></td>
        <td>
          <button type="button" ng-click="pendingCertificate.removeReplaces($index)" class="btn btn-danger btn-sm pull-right">Remove</button>
        </td>
      </tr>
    </table>
  </div>
</div>
