@()
@import helper._
@implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.f) }

@main("Clowder") {

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/dragdrop.css")">

<div class="page-header">
    <h1>Multimedia Advanced Search</h1>
  </div>


<div class="row">
      
        <div class="col-md-12">
			
	@form(action = routes.Files.upload, 'enctype -> "multipart/form-data", 'class -> "form-horizontal") {
	    <fieldset>
	      <legend>Select an Image and Search</legend>
	     <input type="file" id="query" name="File">
	    </fieldset>
        <div class="form-actions">
			<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
        </div>
	  }
	  
@*	  @form(action = routes.Files.uploadAjax, 'class -> "form-horizontal") { 
	  
	  <fieldset> *@
	      <legend> Drop an Image and Search </legend>
	      <br>
	      <div id="filedrag"> Drop Box</div>
	      <output id="list"></output>
@*    </fieldset> *@
	  <div class="form-actions">
		  <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
        </div>
	 @*  } *@
	  
   @form(action = routes.Search.searchbyURL(""), 'enctype -> "multipart/form-data", 'class -> "form-horizontal") {
	    <fieldset>
	      <br>
	 	    <label><h4>Paste your query image URL</h4></label>
    	<input type="text" placeholder="Paste your URL here" name="query">
	    <br>
	    <br>
	     <label><h4>Filter by</h4></label>	
	    <select id="tag" onchange="">
		<option value="invalid">--None--</option>
		<option value="">People</option>
		<option value="">Nature</option>
		<option value=""> Technology</option>
		<option value="">Healthcare</option>
		</select>
		</fieldset>	
		<br>
		<br>
	   <div style="text-align: center;">
		   <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
       </div>
                     
	  }
	  		
			   
 @form(action = routes.Files.upload, 'enctype -> "multipart/form-data", 'class -> "form-horizontal") {
	    <fieldset>
	   	<br>
		<div>
		<legend><h4>Choose your methods and there weights</h4></legend>	
		<label class="checkbox">
		 <input type="checkbox"> Color Histogram
		 <input type="text" placeholder="weight">
		 </label>
		 <label class="checkbox">
       	 <input type="checkbox"> Texture
       	 <input type="text" placeholder="weight">
     	 </label>
     	</div>
	   	<br>
	   	<br>
	   	<div>
	   	<legend><h4>Choose your methods and their weights</h4></legend>	
	   	<table class="table table-bordered">
	   	<thead>
    	<tr>
      	<th>Select</th>
     	 <th>Methods</th>
     	 <th>Weight</th>
    	</tr>
  		</thead>
  		<tbody>
    	<tr>
      	<td><label class="checkbox">
       	 <input type="checkbox"> 
       	 <label>
       	 </td>
      	<td>Color Histogram</td>
      	<td><input type="text" placeholder="weight"> </td>
   		 </tr>
   		 <tr>
      	<td><label class="checkbox">
       	 <input type="checkbox"> 
       	 <label>
       	 </td>
      	<td>Texture</td>
      	<td><input type="text" placeholder="weight"> </td>
   		 </tr>
  		</tbody>
	   	</table>
	   	</div>
	   	<br>
		 <label><h4>Keywords</h4></label>	
		<input type="text" placeholder="Type your keywords here">
		</fieldset>	
		<br>
		<br>
	   <div style="text-align: center;">
		   <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
       </div>
       
       <br>
       <br>
      <div>
       <h3> Sketch Your Image and Search</h3>
	</div>
	  }
	  	
	</div>
      
	</div>		
    <script src="@routes.Assets.at("javascripts/file-browser/views/dragdrop.js")" type="text/javascript"></script>
  
}