<div>
<div class="modal-header">
  <h5 class="modal-title">Import Classification Rules</h5>
</div>
<div class="modal-body">
  <form class="form">
    <div class="form-group form-row">
      <label class="col-sm-3 col-form-label">Group</label>
      <div class="col-sm-9">
        <p class="form-control-plaintext">{{group.name}}</p>
      </div>
    </div>
    <div class="form-group form-row">
      <label class="col-sm-3 col-form-label" for="importFile">Select file to import</label>
      <div class="col-sm-9">
        <div class="input-group">
          <span class="input-group-prepend">
              <button ng-click="openFileDialogue()" class="btn btn-secondary" type="button">Choose</button>
          </span>
          <input ng-click="openFileDialogue()" type="text" id="importFile" class="form-control" placeholder="Choose a file..." ng-model="fileToUpload.name">
          <span class="input-group-append">
             <button class="btn btn-secondary" type="button" ng-click="resetInput()">Reset</button>
          </span>
        </div>
      </div>
    </div>
    <div class="form-group form-row">
      <div class="col-sm-offset-3 col-sm-9">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="containsHeader"> Contains header
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="deleteExistingRules"> Delete existing rules
          </label>
        </div>
      </div>
    </div>
    <input id="fileToImport" type="file" style="visibility:hidden; display:none" onchange="angular.element(this).scope().setFile(this)">
  </form>
  <div class="alert alert-danger" ng-show="error">
    {{error}}
  </div>
  <div ng-show="failedRows.length > 0">
    <pagination model="pagination" position="bottom" on-change="navigateWithinErrors">
      <table class="table table-bordered table-striped">
        <tbody>
        <tr class="d-flex">
          <th class="col-md-1">Row Index</th>
          <th class="col-md-11">Error Message</th>
        </tr>

        <tr class="d-flex" ng-repeat="failedRow in failedRows">
          <td class="col-md-1">{{failedRow['index']}}</td>
          <td class="col-md-11">{{failedRow['message']}}</td>
        </tr>
        </tbody>
      </table>
    </pagination>
  </div>
</div>
<div class="modal-footer">
  <div style="display: inline" title="Please confirm deletion">
    <button type="button" class="btn btn-primary" ng-click="uploadFile()" ng-show="fileToUpload" title="Upload Rule">Upload</button>
  </div>
  <button type="button" class="btn btn-secondary" ng-click="$dismiss('cancelled by user')" >Cancel</button>
</div>
</div>