<div class="row">
	<div class="col-xs-12 col-sm-12 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
		<form>
			<div class="input-group">
				<input type="text" class="form-control" id="apiSearch" ng-model="textApiSearch" placeholder="Search..."/>
				<span class="input-group-btn">
					<button type="submit" class="btn btn-default" ng-click="searchApis(textApiSearch)">Search</button>
				</span>
			</div>
		</form>
	</div>
</div>
<br /><br />
<div class="row">
	<div class="col-xs-12 col-sm-12 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
		<p><b>Or browse using:</b>
			<ul>
				<li ng-repeat="f in repoBrowseFields">
					<a href="javascript:void(0)" ng-click="browseRepoField(f)">{{f.label}}</a>
				</li>
			</ul>		
		</p>
	</div>
</div>

<div id="showRepoBrowseData" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">{{repoBrowseData.label}}</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12 col-md-offset-8 col-md-4">
						<input type="text" class="form-control input-sm" ng-model="filterBrowseData" placeholder="Filter..." />
					</div>
				</div>
				<div class="well small" style="margin-top: 10px">
					<table class="table table-condensed table-striped">
						<thead>
							<tr>
								<th>
									<a href="javascript:void(0)" ng-click="sortType = 'term'; sortReverse = !sortReverse">
										Name
			            				<span ng-show="sortType == 'term' && !sortReverse" class="small glyphicon glyphicon-chevron-down"></span>
			            				<span ng-show="sortType == 'term' && sortReverse" class="small glyphicon glyphicon-chevron-up"></span>
          							</a>
								</th>
								<th class="text-right">
									<a href="javascript:void(0)" ng-click="sortType = 'total'; sortReverse = !sortReverse">
										# datasources
										<span ng-show="sortType == 'total' && !sortReverse" class="small glyphicon glyphicon-chevron-down"></span>
				            			<span ng-show="sortType == 'total' && sortReverse" class="small glyphicon glyphicon-chevron-up"></span>
          							</a>
								</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="row in repoBrowseData.data | orderBy:sortType:sortReverse | filter:filterBrowseData">
								<td><a href="javascript:void(0)" ng-click="browseApis(repoBrowseData.id,row.term)">{{row.term}}</a></td>
								<td class="text-right">{{row.total}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

