D-Net

<form>

<div class="container-fluid">

<div class="row">

  <div class="col-md-12"><label for="xqueryInput" class="control-label">CQL Query</label></div> 

</div>

<div class="row">

  <div class="col-md-12"><input type="text" class="form-control" id="xqueryInput" ng-model="query" /> </div>

</div>

<div class="row">

	<div class="col-md-4"><label for="xqueryInput" class="control-label">Metadata Format:</label></div>

	<div class="col-md-4"><label for="xqueryInput" class="control-label">Backend:</label></div>

	<div class="col-md-4"><label for="xqueryInput" class="control-label">Index::</label></div>

</div>

<div class="row">

  <div class="col-md-4">

  <select class="form-control" ng-model="selectedMdref"  ng-change="metadataFormatSelected({{item.layout}})" ng-options="(item.format +'-' + item.layout + '-' + item.interpretation) for item in mdFormats" >

		<option value="" selected="selected">--Select Metadata Format--</option>				

	</select>

	</div>

	<div class="col-md-4">

	<select class="form-control" ng-model="selectedbackend" ng-change="backendSelected()" ng-options="item for item in backends">		

		<option value="" selected="selected">--Select Backend--</option>		

	</select>

	</div>

	<div class="col-md-4">

	<select class="form-control" ng-model="selectedIndex" ng-options="item.id for item in indices" >

			<option  value="" selected="selected" >--ALL --</option>			

		</select>

	</div>	

</div>

<div class="row" style="padding-top: 10px">

<div class ="col-md-6">

	<table class="table table-striped table-bordered">

	<thead>

      <tr>

         <th width="80%">Browse Field</th>

         <th width="20%">delete</th>         

      </tr>

   </thead>

   <tbody>

   	<tr ng-repeat="item in addedBrowseFields">

   		<td>{{item}}</td>

   		<td><a href="" ng-click="deleteBrowseField(item)" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></a></td>

   	</tr>   	   

   </tbody>

	</table>

</div>

</div>

<div class="row" style="padding-top: 10px">

<div class="col-md-4">

   		<select class="form-control" ng-model="selectedBrowser" ng-options="item for item in browseFields">

   			<option value="" selected="selected">--- Add Field --</option>			

		</select> </td>

</div>

<div class="col-md-1">

		<a href="" ng-click="browseFieldAdded()" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></a>

</div>

</div>

<div class="row" style="padding-top: 10px">

	<div class="col-md-4">

		<input type="submit" class="btn btn-info" ng-click="startBrowse()" value="Browse" >

	</div>

</div>

</div>

</form>

<div class="container-fluid" style="padding-top: 10px">

	<div class="row" ng-show="error">

		<div class="panel panel-default" >

			<div class="panel-heading">

				<a class="accordion-toggle" data-toggle="collapse" data-target="#collapse_error"><b>Error:</b> <i>{{error.message}}</i></a>

			</div>

			<div id="collapse_error" class="panel-collapse collapse in">

				<div class="panel-body">

					<pre>{{error.stacktrace}}</pre>

				</div>			

			</div>

		</div>

	</div>

	<div class="row" ng-repeat="item in browseResult">

		<div class ="col-md-6">

			<div class="panel panel-default"  >

				<div class="panel-heading">

					<a class="accordion-toggle" data-toggle="collapse" data-target="#collapse_{{$index}}"><b>{{item.label}} :</b></a>

				</div>

				<div id="collapse_{{$index}}" class="panel-collapse collapse in">

					<table class="table">						

							<tbody>

								<tr ng-repeat="value in item.values">						

									<td>{{value.value}}</td>

									<td class="text-right">{{value.size}}</td>

								</tr>

							</tbody>

					</table>

				</div>

			</div>

		</div>

	</div>

</div>