<div class="row">
	<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
		<span style="font-size: 16px"><b>Results of query</b>: <i>{{currentApiSelectionValue}}</i></span>
	</div>
	<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
		<form class="form-inline pull-right" role="form">
			<div class="form-group">
				<label class="sr-only" for="apiFilter">Filter...</label>
  				<input type="text" class="form-control input-sm" id="apiFilter" ng-model="filterApis" placeholder="Filter..." />
  			</div>
			<button ng-click="updateApis(true)" class="btn btn-sm btn-default" type="button"><span class="glyphicon glyphicon-refresh"></span></button>
			<button ng-click="go('#')" class="btn btn-sm btn-default" type="button">back</button>
		</form>
	</div>
</div>
	
<div class="row" style="margin-top: 20px">
	<div class="col-xs-12">
		<table class="table table-condensed table-striped">
			<thead>
				<tr>
					<th class="col-xs-7">
						<a href="javascript:void(0)" ng-click="sortType = 'repoName'; sortReverse = !sortReverse">
							Datasource Api
            				<span ng-show="sortType == 'repoName' && !sortReverse" class="small glyphicon glyphicon-chevron-down"></span>
            				<span ng-show="sortType == 'repoName' && sortReverse" class="small glyphicon glyphicon-chevron-up"></span>
          				</a>
						
					</th>				
					<th class="col-xs-1 text-center">
						<a href="javascript:void(0)" ng-click="sortType = 'repoCountry'; sortReverse = !sortReverse">
							Country
            				<span ng-show="sortType == 'repoCountry' && !sortReverse" class="small glyphicon glyphicon-chevron-down"></span>
            				<span ng-show="sortType == 'repoCountry' && sortReverse" class="small glyphicon glyphicon-chevron-up"></span>
          				</a>
          			</th>
					<th class="col-xs-1 text-center">
						<a href="javascript:void(0)" ng-click="sortType = 'repoPrefix'; sortReverse = !sortReverse">
							Namespace Prefix
            				<span ng-show="sortType == 'repoPrefix' && !sortReverse" class="small glyphicon glyphicon-chevron-down"></span>
            				<span ng-show="sortType == 'repoPrefix' && sortReverse" class="small glyphicon glyphicon-chevron-up"></span>
          				</a>
          			</th>
					<th class="col-xs-1 text-center">
						<a href="javascript:void(0)" ng-click="sortType = 'protocol'; sortReverse = !sortReverse">
							Protocol
            				<span ng-show="sortType == 'protocol' && !sortReverse" class="small glyphicon glyphicon-chevron-down"></span>
            				<span ng-show="sortType == 'protocol' && sortReverse" class="small glyphicon glyphicon-chevron-up"></span>
          				</a>
          			</th>
					<th class="col-xs-1 text-center">
						<a href="javascript:void(0)" ng-click="sortType = 'aggrDate'; sortReverse = !sortReverse">
							Last Aggregation Date
            				<span ng-show="sortType == 'aggrDate' && !sortReverse" class="small glyphicon glyphicon-chevron-down"></span>
            				<span ng-show="sortType == 'aggrDate' && sortReverse" class="small glyphicon glyphicon-chevron-up"></span>
          				</a>
          			</th>
					<th class="col-xs-1 text-right">
						<a href="javascript:void(0)" ng-click="sortType = 'aggrTotal'; sortReverse = !sortReverse">
							Total
            				<span ng-show="sortType == 'aggrTotal' && !sortReverse" class="small glyphicon glyphicon-chevron-down"></span>
            				<span ng-show="sortType == 'aggrTotal' && sortReverse" class="small glyphicon glyphicon-chevron-up"></span>
          				</a>
          			</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="api in apis | orderBy:sortType:sortReverse | filter:filterApis">
					<td>
						<span class="label" ng-class="{'label-danger': !api.active, 'label-success': api.active}" style="width: 100px; display: inline-block; padding: 3px;">
							{{api.compliance}}
						</span> 
						<a href="#/api/{{api.repoId}}/{{api.id}}/ALL/ALL" ng-hide="m.deleting">
							{{api.repoName}} ({{api.id.substr(api.id.lastIndexOf('::') + 2)}})
						</a>
					</td>
					<td class="text-center"><img ng-src="../resources/img/flags/{{api.repoCountry}}.gif" /> {{api.repoCountry}}</td>
					<td class="text-center">{{api.repoPrefix}}</td>
					<td class="text-center">{{api.protocol}}</td>
					<td class="text-center">					
						<span ng-show="api.aggrDate">{{api.aggrDate | date:'yyyy-MM-dd HH:mm:ss'}}</span>
						<span ng-hide="api.aggrDate"><i>not yet available</i></span>
					</td>
					<td class="text-right" ng-class="{'text-success' : api.aggrTotal > 0, 'text-danger' : api.aggrTotal == 0}">{{api.aggrTotal}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>


