<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <form name="addVarForm" role="form" ng-submit="saveParameters(); $hide()" novalidate>
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title"><i class="fa fa-lg fa-exclamation-circle"></i>&nbsp;Advanced device parameters</h4>
        </div>
        <div class="modal-body">
          <div class="form-group" ng-repeat="variable in selections.device.varData">
            <div ng-if="variable.name !== 'username' && variable.name !== 'password' && variable.name !== 'device_port'">
              <label for="{{variable.name}}"><span ng-if="variable.required" style="color:red;">*</span> {{variable.caption}} <span ng-if="variable.required">(required)</span>:</label>
              <input class="form-control" ng-if="variable.type === 'text'" type="text" name="{{variable.name}}" ng-model="selections.device.newVarData[variable.name]" ng-required="variable.required" ng-readonly="variable.readonly">
              <input class="form-control" ng-if="variable.type === 'password'" type="password" name="{{variable.name}}" ng-model="selections.device.newVarData[variable.name]" ng-required="variable.required" ng-readonly="variable.readonly">
              <textarea class="form-control" ng-if="variable.type === 'textarea'" ng-style="{'height':variable.height ? (variable.height * 20 + 10) + 'px' : 'auto'}" name="{{variable.name}}" ng-model="selections.device.newVarData[variable.name]" ng-required="variable.required" ng-readonly="variable.readonly"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary" ng-disabled="addVarForm.$invalid">Save</button>
          <button type="button" class="btn btn-danger" ng-click="$event.stopPropagation();$hide()">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>