<div>
<!-- Alejandro Galue (agalue@opennms.org) -->

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

<div class="modal-body">
  <form name="intfForm">
    <div class="form-group">
      <label class="col-form-label" for="ipAddress">IP Address</label>
      <input class="form-control" type="text" id="ipAddress" name="ipAddress" placeholder="A valid IPv4 or IPv6 address" ng-model="requisitionInterface.ipAddress" required valid-ip-address
             ng-class="{ 'is-invalid' : intfForm.ipAddress.$invalid }">
      <p ng-show="intfForm.ipAddress.$invalid" class="invalid-feedback">A valid IPv4 or IPv6 address is required, and must be unique within the node.</p>
    </div>
    <div class="form-group">
      <label class="col-form-label" for="descr">Description</label>
      <input class="form-control" type="text" id="descr" name="descr" placeholder="Description [optional]" ng-model="requisitionInterface.description">
    </div>
    <div class="form-group">
      <label class="col-form-label" for="snmpPrimary">SNMP Primary</label>
      <input class="form-control" type="text" id="snmpPrimary" name="snmpPrimary" placeholder="SNMP Primary Flag (choose one from the list)"
             ng-model="requisitionInterface.snmpPrimary" typeahead-editable="false" typeahead-min-length="0"
             uib-typeahead="a.id as a.title for a in getSnmpPrimaryValues(requisitionInterface.ipAddress) | filter:$viewValue" required
             ng-class="{ 'is-invalid' : intfForm.snmpPrimary.$invalid }">
      <p ng-show="intfForm.snmpPrimary.$invalid" class="invalid-feedback">A valid SNMP Primary Flag is required, only one primary interface is allowed within the node.</p>
    </div>
    <label ng-show="requisitionInterface.services.length > 0">Services</label>
    <ng-form name="serviceForm" ng-repeat="service in requisitionInterface.services">
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text">
              <i class="fas fa-pencil"></i>
            </div>
          </div>
          <input class="form-control" type="text" name="serviceName" placeholder="Service Name (choose one from the list or type a custom text for a new one)"
                 ng-model="service.name" typeahead-editable="true" typeahead-min-length="0"
                 uib-typeahead="service for service in getAvailableServices() | filter:$viewValue | orderBy:'toString()'" required valid-service
                 ng-class="{ 'is-invalid' : serviceForm.serviceName.$invalid }">
          <span class="input-group-append">
            <button class="btn btn-secondary" type="button" ng-click="removeService($index)">
              <i class="fas fa-trash-can"></i>
            </button>
          </span>
          <p ng-show="serviceForm.serviceName.$invalid" class="invalid-feedback">Service name is required and should be unique on the interface.</p>
        </div>
      </div>
    </ng-form>
  </form>
</div>

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" id="add-service" ng-click="addService()" ng-disabled="intfForm.$invalid">Add Service</button>
  <button type="button" class="btn btn-primary" id="save-interface" ng-click="save()" ng-disabled="intfForm.$invalid">Save</button>
  <button type="button" class="btn btn-secondary" id="cancel-interface" ng-click="cancel()">Cancel</button>
</div>

</div>
