<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">
  	<textarea class="form-control" id="xqueryInput" ng-model="query"></textarea>	
  </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>

