<div class="row"><div class="col-md-12"><h4>Manage Application Variables</h4><p class="text-muted"><small>JBI Component Application Variables are properties that can be used in one or more Application Configurations. Click Add Variable to create a new property and set its type and value. Edit the value of one or more Application Variables and click Save to save changes.</small></p></div></div><div class="row"><div class="col-md-12"><div class="portlet box blue-madison"><div class="portlet-title"><div class="caption"><i class="fa fa-cogs"></i> Application Variables &nbsp; <span class="badge badge-info">{{variables.length}}</span></div><div class="actions"><button class="btn btn-sm btn-default" ng-click="addApplicationVariable()" ng-disabled="component.state == 'SHUTDOWN' || !component.supportApplicationVariables" tooltip="Create application variable"><i class="fa fa-plus"></i> Add</button></div></div><div class="portlet-body"><table class="table table-condensed table-striped table-responsive table-hover" ng-show="variables.length > 0"><thead><tr><th><input type="checkbox" ng-model="checkboxes.checked"><th ng-click="predicate = 'name'; reverse=!reverse">Name<th ng-click="predicate = 'type'; reverse=!reverse">Type<th ng-click="predicate = 'value'; reverse=!reverse">Value<tbody><tr ng-repeat="variable in variables | filter:filter | orderBy:predicate:reverse"><td><input type="checkbox" ng-model="checkboxes.items[variable.name]"><td>{{variable.name}}<td>{{variable.type}}<td><input type="text" ng-model="variable.value" class="form-control"></table><div class="clearfix" ng-show="variables.length > 0"><div class="pull-right"><button class="btn btn-danger btn-sm" ng-click="deleteApplicationVariables()" ng-disabled="component.state == 'SHUTDOWN'">Delete</button> <button class="btn btn-primary btn-sm" ng-click="saveApplicationVariables()" ng-disabled="component.state == 'SHUTDOWN'">Save</button></div></div><section ng-show="component.state === 'SHUTDOWN' && component.supportApplicationVariables === true"><div class="alert alert-info"><h5><i class="fa fa-ban"></i> Unable to manage application variables while <strong>{{component.name}}</strong> is in shutdown state !</h5></div></section><section ng-show="component.supportApplicationVariables === false"><div class="alert alert-info"><h5><i class="fa fa-ban"></i> <strong>{{component.name}}</strong> does not support application variables.</h5></div></section></div></div></div></div>