@(section_id: UUID, preview: models.Preview)(implicit user: Option[models.User])

@import _root_.util.SearchResult

@main("Search Results") {

<script src="@routes.Assets.at("javascripts/spin.min.js")" type="text/javascript"></script>

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

<div data-spy="affix" data-offset-top="0" class="col-md-4">
<div class="row">
  <div class="col-md-4">
		<h2>Query</h2> 
		</div>
		</div>
<div class="row">
  <div class="col-md-8">
		<img src="@api.routes.Previews.download(preview.id)"
					  		class="img-thumbnail"></img>
  </div>
</div>
</div>

<div id="descriptors"></div>

<script>

$(document).ready(function() {		

	// Send AJAX request to get similar sections
	var objSearch = jsRoutes.api.Search.searchMultimediaIndex('@section_id')
	var request = $.ajax({
		url: objSearch.url,
	  	type: 'GET',
	  	dataType: "json"
	});

	// Start spinner wheel
	var spinner = new Spinner().spin($("#descriptors")[0]);

	// Process response
	request.done(function (response, textStatus, jqXHR){

		// Stop spinner wheel
		spinner.stop();

		// Iterate through each feature descriptor
		for (var descriptor in response) {

			// Display descriptor name
			$("#descriptors").append(
				"<div class='row'>" +
					"<div id='" + descriptor + "' class='col-md-4 col-md-offset-4'>" +
						"<h2>" + descriptor + "</h2>" + 
					"</div>" +
				"</div>");

			// Iterate through each section in a feature descriptor
			for (var section in response[descriptor]) {

				// Copy relevant values to local variables
				var section_id = response[descriptor][section]["section_id"];
				var preview_id = response[descriptor][section]["preview_id"];
				var distance = Number(response[descriptor][section]["distance"]).toFixed(4); // Truncating distance to four decimal places				

				// Display section details
				$("#" + descriptor).append(
					"<div class='row'>" + 
						"<div class='col-md-12'>" +
							"<a href='" + jsRoutes.controllers.Files.fileBySection(section_id).url + " '>" +							
				  				"<img src='" + jsRoutes.api.Previews.download(preview_id).url + "' class='img-thumbnail'></img>" +
				    		"</a>" + 
				  			"<p>Distance: " + distance.toString() + "</p>" +
						"</div>" + 
					"</div>");
			}
		}
	});
});

</script>
}