<div>

<div class="modal-header">
  <h3 class="modal-title">Detector</h3>
</div>

<div class="modal-body">
  <form name="detectorForm">
    <div class="form-group">
      <label class="col-form-label" for="name">Name</label>
      <input class="form-control" type="text" id="name" name="name" placeholder="Detector Name" ng-model="detector.name" required
             ng-class="{ 'is-invalid' : detectorForm.name.$invalid }">
      <p ng-show="detectorForm.name.$invalid" class="invalid-feedback">A non empty name is required.</p>
    </div>
    <div class="form-group">
      <label class="col-form-label" for="clazz">Class</label>
      <input class="form-control" type="text" id="clazz" name="clazz" placeholder="Implementation Class (choose one from the list)"
             ng-model="detector.class" typeahead-min-length="0" typeahead-editable="false" typeahead-on-select="updateAvailableParameters($item)"
             uib-typeahead="detector.class as detector.name for detector in availableDetectors | filter:$viewValue" required
             ng-class="{ 'is-invalid' : detectorForm.clazz.$invalid }">
      <p ng-show="detectorForm.clazz.$invalid" class="invalid-feedback">A valid class name is required.</p>
    </div>
    <ng-form name="paramForm" ng-repeat="parameter in detector.parameter">
      <div class="form-group">
        <input class="form-control" type="text" name="paramName" ng-if="!parameter.key" placeholder="Parameter Name (choose one from the list)"
               ng-model="parameter.key" typeahead-min-length="0" typeahead-editable="false"
               uib-typeahead="param.key as param.key for param in getAvailableParameters() | filter:$viewValue" required
               ng-class="{ 'is-invalid' : paramForm.paramName.$invalid }">
        <p ng-show="paramForm.paramName.$invalid" class="invalid-feedback">Parameter name is required.</p>
      </div>
      <div class="form-group">
        <label ng-if="parameter.key" class="col-form-label">{{parameter.key}}</label>
        <div class="input-group">
          <input class="form-control" type="text" name="paramValue" placeholder="Parameter Value" ng-model="parameter.value" required
                 ng-class="{ 'is-invalid' : paramForm.paramValue.$invalid }">
          <div class="input-group-append">
            <button type="button" class="btn btn-secondary" ng-click="removeParameter($index)">
              <span class="fas fa-trash-can"></span>
            </button>
          </div>
          <p ng-show="paramForm.paramValue.$invalid" class="invalid-feedback">Parameter value is required.</p>
        </div>
      </div>
    </ng-form>
  </form>
</div>

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" id="add-detector-parameter" ng-click="addParameter()" ng-disabled="detectorForm.clazz.$invalid || getAvailableParameters().length == 0">Add Parameter</button>
  <button type="button" class="btn btn-primary" id="save-detector" ng-click="save()" ng-disabled="detectorForm.$invalid">Save</button>
  <button type="button" class="btn btn-secondary" id="cancel-detector" ng-click="cancel()">Cancel</button>
</div>

</div>
