<!-- filter bar -->
<div class="top-margin15" style="margin-bottom:10px; padding: 10px; border-radius: 5px; border:1px solid #E1E1E1">
  <div style="display:inline-block">
    <input class="form-control" type="text" placeholder="variable name" ng-model="searchText"/>
  </div>

  <div class="btn-group" style="display: inline-block">
    <span class="btn"><i class="fa fa-search"></i></span>
    <span class="btn right-margin5" style="margin-left: 50px">PGN<i class="fa fa-sort-desc" style="margin-left:5px"></i></span>
    <span class="btn right-margin5" >SPN<i class="fa fa-sort-desc" style="margin-left:5px"></i></span>
  </div>

  <div ng-show='isProp' class="btn-group pull-right" style="display: inline-block">
    <a ng-click="addEditProp()" href="" class="btn btn-success btn-sm"><i class="fa fa-plus right-margin5"></i>SPN</a>
  </div>
</div>

<div class="panel panel-default">
<!-- 	<div class="panel-body"> -->
		<table class="table">
			<thead>
				<tr class="active">
					<th></th>
					<th>Variable Name</th>
					<th>PGN</th>
					<th>SPN</th>
					<th>Offset</th>
					<th>Scaling</th>
					<th>Units</th>
					<th ng-show="isProp">Edit</th>
					<th ng-show="isProp">Delete</th>
				</tr>
			</thead>
			<tr ng-repeat="spn in spnList | filter:{SPNNAME:searchText}" ng-show="isProp != undefined">
				<td>
					<a href="" ng-click="toggleVarSelection(spn)">
						<i ng-class="{'fa fa-lg':1, 'fa-check-square-o':selVars[spn.SPNNAME], 'fa-square-o': !selVars[spn.SPNNAME]}"></i>
					</a>
				</td>
				<td>{{spn.SPNNAME}}</td>
				<td>{{spn.PGNNAME}} - {{spn.PGNNUM}}</td>
				<td>{{spn.SPNNUM}}</td>
				<td>{{spn.OFFSET}}</td>
				<td>{{spn.SCALING}}</td>
				<td>{{spn.UNITS}}</td>
				<td ng-show="isProp">
					<a href="" ng-click="addEditProp(spn)">
						<i class="fa fa-pencil-square-o"></i>
					</a>
				</td>
				<td ng-show="isProp">
					<a href="" ng-click="deleteProp(spn.SPNNUM, spn.SPNNUM)" style="color:red">
						<i class="fa fa-remove"></i>
					</a>
				</td>
			</tr>
		</table>
<!-- 	</div>	 -->
</div>