@(file: models.File, id: String, comments: List[Comment],
		previews : Map[models.File, List[(java.lang.String, String, String, String, java.lang.String, String, Long, String)]],
		sections: List[models.Section], beingProcessed: Boolean, datasets: List[models.Dataset], folders: List[Folder],
		mds: List[models.Metadata],
		rdfExported: Boolean,
		extractionsStatus: Map[String, ExtractionGroup], outputFormats: Option[List[String]], spaceId: Option[String], access:String,
		folderHierarchy: List[Folder], spaces:List[ProjectSpace], allDatasets: List[Dataset],
		view_count: Int, view_date: java.util.Date)(implicit user: Option[models.User], request: RequestHeader)

@import helper._
@import play.api.Play.current
@import api.Permission
@import _root_.util.FileUtils
@import _root_.util.Formatters._

@implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.f) }


	@* (pv.id.toString, p.id, p.path, p.main, api.routes.Previews.download(pv.id).toString, pv.contentType, pv.length) *@
@showPreview(id: String, p: (java.lang.String, String, String, String, java.lang.String, String, Long, String), filename: String, contentType: String) = {
	<script>
		Configuration.tab = "#previewer_@id";
		Configuration.url = "@p._5";
		Configuration.fileid = "@p._1";
		Configuration.previewer = "@routes.Assets.at(p._3)";
		if("@p._2" === "Thumbnail"){
			Configuration.fileType = "@p._6";
			Configuration.fileSize = @p._7;
		}
		else if("@p._2" === "X3d"){
			Configuration.annotationsEditPath = "@api.routes.Previews.editAnnotation(UUID(p._1))";
			Configuration.annotationsListPath = "@api.routes.Previews.listAnnotations(UUID(p._1))";
			Configuration.annotationsAttachPath = "@api.routes.Previews.attachAnnotation(UUID(p._1))";
			Configuration.wasPTM = "@(filename.endsWith(".ptm") || contentType.contains("ptmimages"))";
			Configuration.calledFrom = "file";
		}
		else if("@p._2" === "Oni"){			
		}
		else if("@p._2" === "Video"){
			Configuration.fileType = "@p._6";
		}
		else if("@p._2" === "Video presentation"){
			Configuration.authenticatedFileModify = false;
			@if(user.isDefined) {
	     	 	@if(user.get.id.equals(file.author.id)){
					Configuration.authenticatedFileModify = true;
	     	 	}
			}			
		}
		else if("@p._2" === "External resource"){
			Configuration.authenticatedFileModify = false;
			@if(user.isDefined) {
	     	 	@if(user.get.id.equals(file.author.id)){
					Configuration.authenticatedFileModify = true;
	     	 	}
			}			
		}
	</script>
	<script type="text/javascript" src="@(routes.Assets.at(p._3) + "/" + p._4)"></script>
}

@main("File") {
	<script src="@routes.Assets.at("javascripts/errorRedirect.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/updateLicenseInfo.js")" language="javascript"></script>
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
	<script src="@routes.Assets.at("javascripts/previews.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/popcorn-complete.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/galleria-1.2.9.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/fileListProcess.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/deleteUtils.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/sectionsListProcess.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/files/datasets.js")" type="text/javascript"></script>

	<script>
			var spaceId = "@spaceId";
			var isPageLoaded = false;
			var isx3dActive = false;
			var Configuration = {};
			Configuration.id  = "@file.id";
			Configuration.authenticated = @user.isDefined;
			Configuration.ptmAppletPath = "@(routes.Assets.at("plugins") + "/" + "envlib.jar")";
			Configuration.expressInstallPath = "@(routes.Assets.at("plugins") + "/" + "expressInstall.swf")";
			Configuration.iipZoomPath = "@(routes.Assets.at("plugins") + "/" + "IIPZoom.swf")";
			Configuration.jsPath = "@(routes.Assets.at("javascripts"))";
			Configuration.imagesPath = "@(routes.Assets.at("images"))";
			Configuration.appContext = "@play.api.Play.configuration.getString("application.context").getOrElse("")";
			var cur_description;
			function updateFileDescription() {
				cur_description = $('#ds_description').html().trim();
				$('<div class="edit_desc"> </div>').insertAfter($('#ds_description'));
				$('.edit_desc').append('<textarea id = "desc_input" class="form-control"/>');
				$('.edit_desc').append('<button id = "update_desc" class= "btn btn-sm btn-primary btn-margins" onclick = "saveDescription()"> <span class="glyphicon glyphicon-send"> </span> Save </button>');
				$('.edit_desc').append('<button id="cancel_desc" class="btn btn-sm edit-tab btn-default btn-margins" onclick="cancelDescription()"> <span class="glyphicon glyphicon-remove"></span> Cancel </button>');
				if(cur_description.indexOf("Add a description") != 0) {
					$('#desc_input').val(htmlDecode(cur_description.replace(new RegExp("<br>", "g"), "\n")));
				}
				$('#ds_description').text("");
				$('#edit-description').css("display", "none");
				$('#edit-description').addClass("hiddencomplete");
			}

			function cancelDescription() {
				$('#ds_description').html(cur_description);
				$('.edit_desc').remove();
				$('#ds_description').css("display", "inline");
				$('#edit-description').removeClass("inline");
				$('#edit-description').css("display", "");
				$('#aboutdesc').mouseleave();
			}

			function saveDescription() {
				var description = $('#desc_input').val();
				var encDescription = htmlEncode(description);
				jsonData = JSON.stringify({"description": encDescription});

				var request = jsRoutes.api.Files.updateDescription("@file.id").ajax({
					data: jsonData,
					type: 'PUT',
					contentType: "application/json"
				});

				request.done(function(response, textStatus,jqXHR) {
					$('#ds_description').html(urlify(htmlEncode(description).replace(/\n/g, "<br>")));
					$('.edit_desc').remove();
					$('#ds_description').css("display", "inline");
					$('#edit-description').removeClass("inline");
					$('#edit-description').css("display", "");
					$('#aboutdesc').mouseleave();
					notify("File description updated successfully", "success", false, 2000 );
				});

				request.fail(function(jqXHR, textStatus, errorThrown) {
					console.error("The following error occurred: " + textStatus, errorThrown);
					var errMsg = " You must be logged in to update the information about a collection.";
					if(!checkErrorAndRedirect(jqXHR, errMsg)) {
						notify("The collection information was not updated due to: " + errorThrown, "error");
					}
				});

			}

			function urlify(text) {
				var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@@#\/%?=~_|!:,.;]*[-A-Z0-9+&@@#\/%=~_|])/ig;
				return text.replace(urlRegex, function(url) {
					return '<a href="' + url + '">' + url + '</a>';
				})
			}
	</script>
	<script>
			window.onload = function() {
				isPageLoaded = true;
			}
	</script>

	<div class="row">
		<div class="col-md-8 col-sm-8 col-lg-8">
			<div class="row">
				<ol class="breadcrumb">
					@if(spaces.length == 1 ) {
							<li><span class="glyphicon glyphicon-hdd"></span> <a href="@routes.Spaces.getSpace(spaces.head.id)" title="@spaces.head.name"> @Html(ellipsize(spaces.head.name, 18))</a></li>

					} else {
						@if(spaces.length > 1) {
							<li>
							<span class="dropdown">
								<button class="btn-link dropdown-toggle" type="button" id="dropdown_space_list" data-toggle="dropdown"
								aria-haspopup="true" aria-expanded="true">
									<span class="glyphicon glyphicon-hdd"></span> <span class="caret"></span>
								</button>
								<ul class="dropdown-menu" arialanelledby="dropdown_space_list">
									@spaces.map{ s =>
										<li><a href="@routes.Spaces.getSpace(s.id)" title="s.name"><span class="glyphicon glyphicon-hdd"></span> @Html(ellipsize(s.name, 18))</a></li>
									}
								</ul>

							</span>
							</li>
						} else {
							<li><span class="glyphicon glyphicon-user"></span> <a href = "@routes.Profile.viewProfileUUID(file.author.id)"> @file.author.fullName</a></li>
						}
					}
					@if(allDatasets.length == 1 ) {
						@allDatasets.map { ds =>
						<li> <span class="glyphicon glyphicon-briefcase"></span> <a href="@routes.Datasets.dataset(ds.id)" title="@ds.name"> @Html(ellipsize(ds.name, 18))</a></li>
						}
					}
					@folderHierarchy.map { fd =>
						<li><span class="glyphicon glyphicon-folder-close"></span> <a href="@routes.Datasets.dataset(allDatasets(0).id)#folderId=@fd.id" title="@fd.displayName">@Html(ellipsize(fd.displayName, 18))</a></li>
					}
					<li><span class="glyphicon glyphicon-file"></span> <span title="@file.filename">@Html(ellipsize(file.filename, 18))</span></li>

				</ol>
				<div id="file-name-div" class="file-title-div col-xs-12">
					<div id="prf-file-name" class="text-left inline">
						<h1 id="file-name-title" class="inline"> <span class="glyphicon glyphicon-file"></span> @Html(file.filename)</h1>
						@if(Permission.checkPermission(Permission.EditFile, ResourceRef(ResourceRef.file, file.id))) {
							<div id="h-edit-file" class="hiddencomplete">
								<a id ="edit-file" href="javascript:updateFileName()" title="Click to edit file name.">
									<span class ="glyphicon glyphicon-edit" aria-hidden ="true"></span>
								</a>
							</div>
						}
					</div>
				</div>
			</div>
			<div class="row bottom-padding">
				<div class="col-md-12 box-white-space" id="aboutdesc">
					<p id ="ds_description" class="inline">@if(file.description.length > 0) { @Html(file.description) } else {
						@if(Permission.checkPermission(Permission.EditFile, ResourceRef(ResourceRef.file, file.id))){
							Add a description
						}
					}</p>
					@if(Permission.checkPermission(Permission.EditFile, ResourceRef(ResourceRef.file, file.id))) {
						<a id="edit-description" class="hiddencomplete" href="javascript:updateFileDescription()" title="Click to edit description">
							<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
						</a>
					}
				</div>
			</div>
			@for((f, pvs) <- previews) {
				<div class="row" id="filePrevContainer_@(f.id.toString)" data-previewsCount="@(pvs.length)" data-filename="@f.filename">
					<div class="col-md-12">
							<!--
		    	First check if there is only one previewer, and if the value of the URL for it is "null". If so
		    	that means there was no preview generated and the file is not allowed to be used due to the license
		    	that is on the file.
		    	 -->
						@if(pvs.length == 1 && pvs(0)._5 == "null") {
							<h4>No previews currently available for this file</h4>
						} else {
							<div class="tabbable">
								<ul class="nav nav-pills" id="myTab_@(f.id.toString)">
								@for(i <- pvs.indices) {
										<!-- Use preview.title as tab title if defined; otherwise use previewer name. -->
									@if(pvs(i)._8 != "") {
										<li class=""><a href="#previewer_@(f.id.toString)_@i" data-toggle="tab">@pvs(i)._8</a></li>
									} else {
										<li class=""><a href="#previewer_@(f.id.toString)_@i" data-toggle="tab">@pvs(i)._2</a></li>
									}
								}
								</ul>
								<div class="tab-content"  id="previewsContent_@(f.id.toString)">
									@for(i <- pvs.indices) {
										<div class="tab-pane previewDiv" id="previewer_@(f.id.toString)_@i" data-previewId="@(pvs(i)._1)" data-previewerId="@(pvs(i)._2)"></div>
										@showPreview(f.id.toString + "_" + i, pvs(i), f.filename, f.contentType)

									}
									<script type="text/javascript">
											$(function () {
												$('#myTab_@(f.id.toString) a:first').tab('show');
											})
									</script>
								</div>
							</div>
						}
					</div>
				</div>
				@if(pvs.length <= 1) {
					<script>
							$('#myTab_@(f.id.toString)').attr('style', 'display:none;');
					</script>
				}

				<div class="row bottom-padding">
					<div class="col-md-12">
						<hr/>
						<div class="btn-group" role="group" aria-label="...">
							@if( Permission.checkPermission(Permission.DownloadFiles, ResourceRef(ResourceRef.file, file.id))) {
								<button id="downloadButton" type="button" onclick="return downloadFile();" class="btn btn-link" title="Download and enjoy this file."> <span class="glyphicon glyphicon-save"></span>
									Download </button>
							} else {
									<!-- if 'disabled' title is not visible -->
								<button type="button" class="btn btn-link disabled" title="You don't have permission to download this file."> <span class="glyphicon glyphicon-save"></span>
									Download </button>
							}
							<!--  If outputFormats list is not empty, display downloadAs drop-down button with the list of available formats -->
							@if(!outputFormats.isEmpty){
								<div class="btn-group" role="group">
									<button id="downloadAsButton" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-download-alt"></span> </button>
									<ul class="dropdown-menu" role="menu">
									@outputFormats.get.map { outputFrmt =>
										<li id="doc" onclick="return downloadFileAs('@routes.Files.downloadAsFormat(UUID(id), outputFrmt)'  );" > <a href="#">@outputFrmt</a> </li>
									}
									</ul>
								</div> <!-- end of class button-group -->
								} <!-- end of    if(!outputFormats.isEmpty)-->
						</div> <!-- end of class btn-group -->
					@if(user.isDefined) {
						<!-- If user can delete, the button is enabled, otherwise the button is present but disabled to provide consistent UE. -->
						@if(user.get.id.equals(file.author.id) || Permission.checkPermission(Permission.DeleteFile, ResourceRef(ResourceRef.file, file.id))){
							<span>
							@if(datasets.length > 0) {
								<button id="deleteButton" onclick="confirmDeleteResource('file','file','@(file.id)','@(file.filename.replace("'","&#39;"))', true, '@(routes.Datasets.dataset(datasets.head.id))')" class="btn btn-link" title="Delete the file">
									<span class="glyphicon glyphicon-trash"></span> Delete</button>
							} else {
								@if(folders.length > 0) {
									<button id="deleteButton" onclick="confirmDeleteResource('file','file','@(file.id)','@(file.filename.replace("'","&#39;"))', true, '@(routes.Datasets.dataset(folders.head.parentDatasetId))#folderId=@folders.head.id')" class="btn btn-link" title="Delete the file">
									<span class="glyphicon glyphicon-trash"></span> Delete</button>
								}
							}

							</span>
						} else {
							<span class="align-right" title="No permission to delete the file">
								<button disabled class="btn btn-link"><span class="glyphicon glyphicon-trash"></span> Delete</button>
							</span>
						}

						@if(!file.followers.contains(user.get.id)) {
							<button id="followButton"
							class="btn btn-link followButton"
							objectId="@file.id"
							objectName="@file.filename"
							objectType="file"><span class="glyphicon glyphicon-star"></span> Follow
							</button>
						} else {
							<button id="followButton"
							class="btn btn-link followButton"
							objectId="@file.id"
							objectName="@file.filename"
							objectType="file"><span class="glyphicon glyphicon-star-empty"></span> Unfollow
							</button>
						}
                        @if(Permission.checkPermission(Permission.EditFile, ResourceRef(ResourceRef.file, file.id))
                                && play.api.Play.current.plugin[services.RabbitmqPlugin].isDefined) {
                            <a href="@routes.Extractors.submitFileExtraction(UUID(id))" class="btn btn-link" >
                                <span class="glyphicon glyphicon-send"></span>
                                Submit for extraction
                            </a>
                        }
						<a href="@routes.FileLinks.share(UUID(id))" class="btn btn-link" >
							<span class="glyphicon glyphicon-send"></span>
							Share
						</a>
					}
					<hr/>
					</div>
				</div>

				<div id="recommendPanel" class="panel panel-default" style="display : none;">
					<div class="panel-heading">
						<h4 class="panel-title">
							<a data-parent="#accordion"
							href="#collapseThree"
							aria-expanded="true"
							style="float:left;">
                      Also follow these?
							</a>
							<a style="float:right;" href="javascript:$('#recommendPanel').slideToggle('slow');">x</a>
							<div style="clear : both;"></div>
						</h4>
					</div>
					<div id="collapseThree" class="panel-collapse collapse in" aria-expanded="true">
						<div id="recommendDiv" class="panel-body">
                  </div>
					</div>
				</div>

					<!-- sections -->
				@if(sections.size > 0) {
					<div class="row">
						<div class="col-md-12">
							<h4>Sections</h4>
							<div class="galleriaHelp">Click on icon at bottom-right of gallery to toggle sections gallery fullscreen view</div>
							<div id="galleria" style="float:left;clear:none;width:100%;height:400px;">
							</div>
							<script type="text/javascript">
									$(document).ready(function() {
										window["currGalleriaWidth"]= $("#galleria").css("width").replace("px","");
										$(window).resize(function(){
											newWidth = $("#galleria").css("width").replace("px","");
											if(newWidth != window["currGalleriaWidth"]){
												$("#galleria").css("height", Math.round(parseInt($("#galleria").css("height").replace("px",""))*parseInt(newWidth)/parseFloat(window["currGalleriaWidth"]))+"px" );
												window["currGalleriaWidth"]=newWidth;
											}
										});
									});
							</script>
						</div>
					</div>
					<div class="row" style="padding-top: 10px">
						<div class="col-md-12">
							<table class="table" id="scrollTableGalleria">
								<thead>
									<tr>
										<th class="galleriaOrder">#</th>
										<th class="galleriaTheThumbnail">Thumbnail</th>
										<th class="galleriaPosition">Position</th>
										<th class="galleriaDescr">Description</th>
										<th class="galleriaFindSimilar">Find</th>
									</tr>
								</thead>
								<tbody>
								@sections.map { s =>
									<tr>
										<td class="galleriaOrder">@(if (s.order > 0) s.order else "")</td>
										<td class="galleriaTheThumbnail">
										@if(s.preview.isDefined || s.thumbnail_id.isDefined) {
											@if(s.thumbnail_id.isDefined){
												<img src="@(routes.Files.thumbnail(UUID(s.thumbnail_id.get)))"
											} else {
												<img src="@api.routes.Previews.download(s.preview.get.id)"
												}
											class="img-polaroid" style="max-width: 100%;"
											@if(s.startTime.isDefined) {
												data-title="Shot" data-description="Starts at @s.startTime seconds."
											} else {
												@if(s.area.isDefined) {
													data-title="Area" data-description="@s.area.toString"
												} else {
													data-title="Unknown" data-description="Unknown info"
													}
											}
											></img>
										}
										</td>
										<td class="galleriaPosition">
										@if(s.startTime.isDefined) {
											@(s.startTime.get / 60):@("%02d".format(s.startTime.get % 60))
										} else {
											@if(s.area.isDefined) {
												@s.area.get.toString
											} else {
												Unknown info
											}
										}
										</td>
										<td class="galleriaDescr">
											<span id="sectiondescr_@(s.id)"  style="display:block;white-space: pre-line;">@s.description.getOrElse("")</span>
											@if(user.isDefined) {
												@if(user.get.id.equals(file.author.id)){
													<div id="sectiondescrEditArea_@(s.id)" style="display:none;">
														<textarea name="sectiondescrText" class="sectionTextBox" id="sectiondescrText_@(s.id)" style="width:100%; height:100px;">@s.description.getOrElse("")</textarea>
													</div>
													<button class="btn btn-default btn-xs btn-margins" onclick="return openForEditSectionDescr('@s.id');" style="display:inline;" id="sectiondescrEdit_@(s.id)" title="Edit Description">
														<span class="glyphicon glyphicon-edit"></span> Edit</button>
													<button class="btn btn-primary" onclick="return postSectionDescr('@s.id', '@api.routes.Sections.description(s.id).toString');" style="display:none; margin-top:5px;" id="sectiondescrPost_@(s.id)" title="Submit">
														<span class="glyphicon glyphicon-ok"></span> Submit</button>
													<button class="btn btn-default" onclick="return cancelEditSectionDescr('@s.id');" style="display:none; margin-top:5px;" id="sectiondescrCancel_@(s.id)" title="Cancel">
														<span class="glyphicon glyphicon-remove"></span> Cancel</button>

													<script>
															window["previousSectiondescr_@(s.id)"] = '@s.description.getOrElse("")';
													</script>
												}
											}
										</td>
										<td class="galleriaFindSimilar"><a href="@routes.Search.callSearchMultimediaIndexView(s.id)">Similar</a></td>
									</tr>
								}
								</tbody>
								<script>
										function fixGalleriaTable(){
											galleriaScenesVisible = $("#scrollTableGalleria tbody tr").length;
											if(galleriaScenesVisible > 5)
												galleriaScenesVisible = 5;
											$("#scrollTableGalleria tbody").css("height", (parseInt($("#scrollTableGalleria tbody tr").css("height").replace("px",""))*galleriaScenesVisible)+"px");
										}
										fixGalleriaTable();
										$(window).resize(function(){
											fixGalleriaTable();
										});
								</script>
							</table>
						</div>
					</div>

					<script>
							document.addEventListener("DOMContentLoaded", function () {
								if ($("#ourvideo").length>0) {
									var pop = Popcorn("#ourvideo");

									@sections.map { s =>
									@if(s.startTime.isDefined) {
									pop.code({
										start: @s.startTime,
										onStart: function() {
											var frame = @s.order - 1;
											console.log("Jumping to " + frame + " " + @s.startTime);
											$('#galleria').data('galleria').show(frame);
										},
										onEnd: function() {
											//console.log("end");
										}
									});
									}
									}
								}
							});
					</script>
					@defining(play.api.Play.configuration.getBoolean("navOnSectionClick").getOrElse(true)){navOnSectionClick=>
						<script>
								$(function() {
									// Load the classic theme
									Galleria.loadTheme('@routes.Assets.at("javascripts/galleria-classic/galleria.classic.min.js")');

									galleriaData = [];
									@sections.map { s =>
									@if(s.preview.isDefined) {
									galleriaItem = {};
									galleriaItem["image"] = "@api.routes.Previews.download(s.preview.get.id)";
									@if(s.startTime.isDefined) {
									galleriaItem["title"] = "Shot";
									galleriaItem["description"] = "Starts at @s.startTime seconds.";
									} else {
									@if(s.area.isDefined) {
									galleriaItem["title"] = "Area";
									galleriaItem["description"] = "@s.area.toString";
									} else {
									galleriaItem["title"] = "Unknown";
									galleriaItem["description"] = "Unknown info";
									}
									}
									galleriaData.push(galleriaItem);
									}
									}

									@if(navOnSectionClick){
									Galleria.configure({
										showInfo: false
									});
									// Initialize Galleria and, if for a video, onclick events for going to time of selected image when clicking main image
									Galleria.run('#galleria', {
										extend: function(options) {
											if ($("#ourvideo").length>0) {
												Galleria.log(this); // the gallery instance
												Galleria.log(options); // the gallery options

												// listen to when an image is shown
												this.bind('image', function(e) {

													Galleria.log(e); // the event object may contain custom objects, in this case the main image
													Galleria.log(e.imageTarget); // the current image

													// lets make galleria make the video jump to the time of the selected image when clicking it:
													$(e.imageTarget).click(this.proxy(function(){
														var pop = Popcorn("#ourvideo");
														pop.currentTime(parseInt(this._data[this._active].description.match(/\d+/)[0]));
													}));
												});
											}
										},
										dataSource: galleriaData
									});
									}
									@if(!navOnSectionClick){
									// Initialize Galleria
									Galleria.run('#galleria', {dataSource: galleriaData});
									}

									var gallery = $('#galleria').data('galleria');

									Galleria.ready(function(options) {
										// 'this' is the gallery instance
										// 'options' is the gallery options
										this.bind('image', function(e) {
											Galleria.log('Now viewing ' + e.imageTarget.src);
										});
										var gallery = this; // galleria is ready and the gallery is assigned
										this.addElement('fscr');
										this.appendChild('stage','fscr');
										var fscr = this.$('fscr')
												.click(function() {
													gallery.toggleFullscreen();
												});
									});
								});
						</script>
					}
				}
			}



			<div class="tabbable" id="bottomDatasetTabbable"> <!-- Only required for left/right tabs -->
				<ul class="nav nav-tabs margin-bottom-20" >
					<li role="presentation" class="active"><a href="#tab-metadata" role="tab" data-toggle="tab">Metadata </a></li>
					<li role="presentation"><a href="#tab-extractions" role="tab" data-toggle="tab">Extractions </a></li>
					<li role="presentation"><a href="#tab-comments" role="tab" data-toggle="tab">Comments (@comments.size)</a></li>
				</ul>
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane fade in active" id="tab-metadata">
						@if(user.isDefined) {
							<div class="row">
								<div class="col-md-12">
								@metadatald.addMetadata("file", file.id.toString, "metadata-content")
								</div>
							</div>
						}
						<div class="row">
							<div class="col-md-12" id="metadata-content">
							@metadatald.view(mds, true)
							</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="tab-extractions">
						<div class="row">
							<div class="col-md-12" id="extractions-content">
							@extractions.extractionsList(extractionsStatus, "file")
							</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="tab-comments">
							<!-- If the user can add comments, the form will be present, otherwise the form is not available at all. -->
						@if(Permission.checkPermission(Permission.AddComment, ResourceRef(ResourceRef.file, file.id))) {
							@commentform(file.id.toString, "file", file.filename)
						}
						<div class="list-unstyled" id="reply_@file.id.toString">
						@comment(comments)
						</div>
					</div>
					<div class="row bottom-padding">
						<div class="col-md-12">
						</div>
					</div>
				</div>
			</div>

			<script language="javascript">
					function updateFileName() {
						fileName = $('#file-name-title').text().trim();
						$('<div class="inline file_name_div h3"> </div>').insertAfter($('#prf-file-name'));
						$('.file_name_div').append('<input type="text" id="file_name_input" class="form-control" />');
						$('.file_name_div').append('<button class="btn btn-sm btn-primary edit-tab btn-margins" onclick="saveFileName()"> <span class="glyphicon glyphicon-send"></span> Save</button>');
						$('.file_name_div').append('<button class="btn btn-sm btn-link btn-margins" onclick="cancelFileName()"> <span class="glyphicon glyphicon-remove"></span> Cancel</button>');
						$('.file_name_div').append('<div class="hiddencomplete" id="file-name-error"> <span class="small error">File name is required.</span></div>');
						$('#file-name-div').removeClass("file-title-div");
						$('#file_name_input').val(fileName);
						$('#file-name-title').text("");
						$('#h-edit-file').css("display", "none");
					}

					function saveFileName() {
						if($('#file_name_input').val().length < 1) {
							$('#file-name-error').show();
							return false;
						} else {
							$('#file-name-error').hide();
						}
						var name = $('#file_name_input').val();
						jsonData = JSON.stringify({"name": htmlEncode(name)});

						var request = jsRoutes.api.Files.updateFileName('@file.id').ajax({
							data: jsonData,
							type: 'PUT',
							contentType: "application/json"
						});
						request.done(function(response, textStatus, jqXHR) {
							$('.file_name_div').remove();
							$('#file-name-title').text(htmlEncode(name).replace(/\n/g, "<br />"));
							$('#file-name-title').prepend('<span class="glyphicon glyphicon-file"></span> ');
							$('#prf-file-name').mouseleave();
							$('#file-name-div').addClass("file-title-div");
							$('#h-edit-file').css("display", "");
						});
						request.fail(function(jqXHR, textStatus, errorThrown) {
							console.error("The following error occurred: " + textStatus, errorThrown);
							var errMsg = "Yoy must be logged in to update the file name.";
							if(!checkErrorAndRedirect(jqXHR, errMsg)) {
								notify("The file name was not updated due to: "+ errorThrown, "error");
							}
						});
					}

					function cancelFileName() {
						$('#file-name-title').text(fileName);
						$('#file-name-title').prepend('<span class="glyphicon glyphicon-file"></span> ');
						$('.file_name_div').remove();
						$('#prf-file-name').css("display", "inline");
						$('#h-edit-file').css("display", "");
						$('#file-name-div').addClass("file-title-div");
						$('#prf-file-name').mouseleave();
					}

					$(document).ready(function(){
						$(document).on('mouseenter', '#prf-file-name', function() {
							$('#h-edit-file').removeClass("hiddencomplete");
							$('#h-edit-file').addClass("inline");
						}).on('mouseleave', '#prf-file-name', function() {
							$('#h-edit-file').removeClass("inline");
							$('#h-edit-file').addClass("hiddencomplete");
						});
					});
			</script>
		</div>

			<!-- right column -->
		<div class="col-md-4 col-sm-4 col-lg-4">
			<div class="row ds-section-sm file-info">
				<table class="table table-condensed">
					<tr><td><b>Type:</b></td><td>@file.contentType</td></tr>
					<tr><td><b>File&nbsp;size:</b></td><td title="@file.length bytes">@humanReadableByteCount(file.length)</td></tr>
					@if(Permission.checkServerAdmin(user)) {
						<tr><td><b>File&nbsp;location:</b></td>
							@if(file.loader == "services.mongodb.MongoDBByteStorage") {
								<td>mongo</td>
							}
							@if(file.loader == "services.filesystem.DiskByteStorageService") {
								@if(file.loader_id.isEmpty) {
									<td>missing</td>
								} else {
									<td>
										@if(file.loader_id.length>10) {
											<span title="@file.loader_id">...@file.loader_id.substring(file.loader_id.length-10, file.loader_id.length)</span>
										} else {
											@file.loader_id
										}
										<a class="btn btn-link btn-sm clipboard" data-copy="@file.loader_id" title="Copy path to clipboard"><span class="glyphicon glyphicon-edit"></span> copy</a></td>
								}
							}
						</tr>
					}
					<tr><td><b>Uploaded&nbsp;on:</b></td><td> @file.uploadDate.format("MMM dd, yyyy HH:mm:ss")</td></tr>
					@if(file.originalname.length > 0) {
					<tr><td><b>Uploaded&nbsp;as:</b></td><td> @file.originalname</td></tr>
					}
					<tr><td><b>Uploaded&nbsp;by:</b></td><td> <a href = "@routes.Profile.viewProfileUUID(file.author.id)"> @file.author.fullName</a></td></tr>
					@if( play.Play.application().configuration().getBoolean("enablePublic")) {
						<tr><td><b>Access:</b></td><td> @access</td></tr>
					}
					<tr><td><b>Status:</b></td><td> @file.status</td></tr>
                </table>
            </div>

			<div class="row ds-section-sm file-info">
				<h4>Statistics</h4>
				<table class="table table-condensed">
					<tr><td><b>Views:</b></td><td> @view_count</td></tr>
					<tr><td><b>Last viewed:</b></td><td> @view_date.format("MMM dd, yyyy HH:mm:ss")</td></tr>
					<tr><td><b>Downloads:</b></td><td> @file.stats.downloads</td></tr>
					<tr><td><b>Last downloaded:</b></td><td> @if(file.stats.last_downloaded.isDefined){@file.stats.last_downloaded.get.format("MMM dd, yyyy HH:mm:ss")}else{Never}</td></tr>
				</table>
			</div>

			<!-- License elements-->
            <div class="row ds-section-sm">
                <div class="accordion" id="accordion6">
                    <div class="accordion-group">
                        <div class="accordian-heading">
                            <h4>License</h4>

                            <table>
                                <tr>
                                    <td><b>Type: </b></td>
                                    <td id="licensetextdata" style="padding-left:10px;">blank</td>
                                </tr>
                                <tr>
                                    <td><b>Holder: </b></td>
                                    <td id="rightsholderdata" style="padding-left:10px;">blank</td>
                                </tr>
                            </table>
							@if(Permission.checkPermission(Permission.EditLicense, ResourceRef(ResourceRef.file, file.id))) {
                                <a class="btn btn-link btn-sm accordion-toggle collapsed" data-toggle="collapse"
                                   data-parent="#accordion6" href="#collapseSix" id="editlicense"
                                   title="Edit License Information">
                                    <span class="glyphicon glyphicon-edit"></span> Edit
                                </a>
                                }
                        </div>
                        <div id="collapseSix" class="accordion-body collapse">
                            <div class="panel panel-primary">
                                <div class="panel-body">
                                    @if(user.isDefined) {
                                      @licenseform(file.id.toString, file.licenseData, "file", file.author.fullName)
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <script src="@routes.Assets.at("javascripts/recommendation.js")" type="text/javascript"></script>
                <script type="text/javascript" language="javascript">
                $(document).ready(function() {
                    //Will have to modify the if check to see if there is data that specifies what should be selected
                    //Incoming data may specifiy the type of license, the name of the owner of the rights, the text
                    //describing the license rights, the URL for the license, and whether or not downloading is
                    //allowed.
                    var fileLicenseType = "@file.licenseData.m_licenseType";
                    var fileRightsHolder = "@file.licenseData.m_rightsHolder";
                    var fileLicenseText = "@file.licenseData.m_licenseText";
                    var fileLicenseUrl = "@file.licenseData.m_licenseUrl";
                    var fileAllowDownload = "@file.licenseData.isDownloadAllowed(user)";
                    var fileImageBase = '@routes.Assets.at("images")';
                    var fileAuthorName = '@file.author.fullName';

                    if (!@user.isDefined){
                        updateInterface(fileLicenseType, fileRightsHolder, fileLicenseText, fileLicenseUrl, fileAllowDownload, fileImageBase, fileAuthorName);
                    }

                    $(document).on('click', '.followButton', function() {
                        var id = $(this).attr('objectId');
                        var name = $(this).attr('objectName');
                        var type = $(this).attr('objectType');
                        if ($(this).attr('id') === '') {
                          followHandler.call(this, jsRoutes, id, name, type, undefined, undefined);
                        } else {
                          followHandler.call(this, jsRoutes, id, name, type, function(data) {
                                recommendationHandler(jsRoutes, $('#recommendPanel'), $('#recommendDiv'),
                                              data['recommendations']);
                            }, undefined);
                        }
                    });
					$(document).on('mouseenter', '#aboutdesc', function() {
						$('#edit-description').removeClass("hiddencomplete");
						$('#edit-description').addClass("inline");
					}).on('mouseleave', '#aboutdesc', function() {
						$('#edit-description').removeClass("inline");
						$('#edit-description').addClass("hiddencomplete");
					});
                });

                function downloadFile() {
                    var downloadRoute = "@routes.Files.download(UUID(id))";
                    window.open(downloadRoute, '_blank');
                }

                function downloadFileAs(downloadRoute) {
                    console.log("downloadFileAs - route = " + downloadRoute);
                    window.open(downloadRoute, '_blank');
                }

                </script>
            </div>
            <!-- End License elements -->

			<!-- Move the file to a dataset -->
			<div class="row ds-section-sm border-top">
				@if(datasets.length > 0) {
					<h4>@Messages("a.contains.b", Messages("dataset.title"), "file")</h4>
						<!-- A file cannot be part of more datasets as of June 2016. The code, however supports datasets sharing  -->
					@datasets.map { dataset =>
						<div id="dat_@dataset.id" class="row bottom-padding">
							<div class="col-md-2 col-sm-2 col-lg-2">
							@if(!dataset.thumbnail_id.isEmpty){
								<a href="@(routes.Datasets.dataset(dataset.id))">
									<img class="img-responsive fit-in-space" src="@(routes.Files.thumbnail(UUID(dataset.thumbnail_id.get)))" alt="Thumbnail of @Html(dataset.name)">
								</a>
							}
							</div>
							<div class="col-md-10 col-sm-10 col-lg-10">
								<div>
									<a href="@(routes.Datasets.dataset(dataset.id))" id='@dataset.id' class ="dataset">@Html(dataset.name)</a>
								</div>
							</div>
						</div>
					@if(Permission.checkPermission(Permission.EditFile, ResourceRef(ResourceRef.file, file.id))) {
						<div class="form-inline">
							<div class="input-group input-group-sm col-md-8">
								<select id="datasetAddSelect" class="form-control add-resource"></select>
								<span class="input-group-btn">
									<a href="#" class="btn btn-default btn-large" id="moveFileBtn" title="Move file to a dataset" onclick="moveFromDatasetToDataset(null,'@dataset.id','@file.id')">
										<span class="glyphicon glyphicon-move"></span> Move to @Messages("dataset.title")
									</a>
								</span>
							</div>
						</div>
					}
					}
				}
				@if(folders.length > 0) {
					<h4>Folder containing the file</h4>
					@folders.map { folder =>
						<div id="dat_@folder.parentDatasetId" class="row bottom-padding">
							<div class="col-md-2 col-sm-2 col-lg-2">
							</div>
							<div class="col-md-10 col-sm-10 col-lg-10">
								<div>
									<a href="@routes.Datasets.dataset(folder.parentDatasetId)#folderId=@folder.id" id='@folder.parentDatasetId' class ="dataset">@Html(folder.displayName)</a>
								</div>
							</div>
						</div>
					@if(Permission.checkPermission(Permission.EditFile, ResourceRef(ResourceRef.file, file.id))) {
						<div class="form-inline">
							<div class="input-group input-group-sm col-md-8">
								<select id="datasetAddSelect" class="form-control add-resource"></select>
								<span class="input-group-btn">
									<a href="#" class="btn btn-default btn-large" id="moveFileBtn" title="Move file from folder to a dataset" onclick="moveFromDatasetToDataset('@folder.id','@folder.parentDatasetId','@file.id')">
										<span class="glyphicon glyphicon-move"></span> Move to @Messages("dataset.title")
									</a>
								</span>
							</div>
						</div>
					}
					}
				}
				<script language="javascript">
						$("#datasetAddSelect").select2({
							theme: "bootstrap",
							placeholder: "Select a @Messages("dataset.title")",
							allowClear: true,
							ajax: {
								url: function(params) {
									return jsRoutes.api.Datasets.listMoveFileToDataset("@file.id", null, 15).url;
								},
								data: function(params) {
									return { title: params.term };
								},
								processResults: function(data, page) {
									return {results: data.filter(function(x) {
										var ids = $('.dataset').map(function() {
											return $(this).attr('id');
										});
										return $.inArray(x.id, ids) == -1;
									}).map(function(x) {
										return {
											text: x.name,
											id: x.id
										}
									})};
								}
							}
						})
				</script>
			</div>

			<div class="row ds-section-sm border-top">
				<h4>Tags</h4>
				<ul id="tagList">
						<!-- Do the tags need to have [File] and [Section] appeneded to them? -->
					@file.tags.map { tag =>
						<li class="tag"><a href="@routes.Tags.search(tag.name)" id="@tag.name" data-id="@tag.id">@Html(tag.name) [File]</a>
							<a href='javascript:void(0);'>
								<span style="display:none;" id='@tag.name' data-id='@tag.id' class='glyphicon glyphicon-remove'></span></a></li>
					}
					@file.sections.map { section =>
						@section.tags.map { tag =>
							<li><a href="@routes.Tags.search(tag.name)">@Html(tag.name) [Section]</a></li>
						}
					}
				</ul>
				@if(Permission.checkPermission(Permission.AddTag, ResourceRef(ResourceRef.file, file.id))) {
					<form class="form-inline">
						<div class="input-group input-group-sm col-md-8">
							<input type="text" maxlength="@play.api.Play.configuration.getInt("clowder.tagLength").getOrElse(100)" id="tagField" class="form-control">
							<span class="input-group-btn">
								<button class="btn btn-default btn-large" id="tagB" title="Add Tag" >
									<span class="glyphicon glyphicon-tag"></span>Tag
								</button>
							</span>
						</div>
					</form>
				} else {
					<form class="form-inline">
						<div class="input-group input-group-sm col-md-8">
							<input disabled type="text" maxlength="@play.api.Play.configuration.getInt("clowder.tagLength").getOrElse(100)" id="tagField" class="form-control">
							<span class="input-group-btn">
								<button class="btn btn-default btn-large" id="tagB" title="Add Tag" disabled>
									<span class="glyphicon glyphicon-tag"></span>Tag
								</button>
							</span>
						</div>
					</form>
				}
				<script language="javascript">
						window["userDefined"] = false;
				</script>
				@if(user.isDefined) {
					<script language="javascript">
							window["userDefined"] = true;
					</script>
				}
				<script language="javascript">
						//The removeTag code is almost identical to the code in tags.scala.html. Should be unified.
						function removeTag() {
							var tagId = $(this).attr("id");
							console.log("Removing tag " + tagId);
							//The data-id attribute is needed since a) the removeTag for some reason is based off the tag name (text), which is what the id attribute is
							//and b) identifiying elements by the tag text can sometimes break, especially in the special cases where there are characters that need encoding.
							//
							//The real question is since that tags have UUIDs, why aren't they simply removed in that manner. In the add, the dom element isn't added until success
							//so the ID could be returned there and added into the elements as needed.
							var tagDataId = $(this).attr("data-id");
							console.log("data-id to remove is " + tagDataId);

							var request = jsRoutes.api.Files.removeTags('@file.id').ajax({
								data: JSON.stringify({"tags":[tagId]}),
								type: 'POST',
								contentType: "application/json"
							});

							request.done(function (response, textStatus, jqXHR) {
								console.log("Response " + textStatus);
								$("[data-id=" + tagDataId + "]").parents("li").remove();
							});

							request.fail(function (jqXHR, textStatus, errorThrown){
								console.error("The following error occured: " + textStatus, errorThrown);
								var errMsg = "You must be logged in to remove a tag from a file.";
								if (!checkErrorAndRedirect(jqXHR, errMsg)) {
									notify("The tag was not removed from the file due to : " + errorThrown, "error");
								}
							});

							return false;
						}

						function removeIconMouseIn() {
							$(this).find(".glyphicon-remove").fadeIn(100);
						}

						function removeIconMouseOut() {
							$(this).find(".glyphicon-remove").fadeOut(100);
						}

						$(function() {
							var tmpId = 1;
							if(window["userDefined"] == true)
								$("#tagList").children("li").each(function(){
									$(this).hover(
											removeIconMouseIn,removeIconMouseOut
									);
								});
							$("#tagList").find(".glyphicon-remove").click(removeTag);

							$('#tagB').click(function() {
								var tag = $('#tagField').val();
								tag = htmlEncode(tag);

								var isTagPresent = false;
								$("#tagList").children("li").each(function (index, tagLi) {
									if($(tagLi).attr("name")===tag) {
										isTagPresent = true;
									}
								});

								if (tag !== "" && isTagPresent != true) {
									var tagList = tag.split(',');
									console.log("submitting tag " + tag);
									var request = jsRoutes.api.Files.addTags('@file.id').ajax({
										data: JSON.stringify({"tags":tagList}),
										type: 'POST',
										contentType: "application/json",
									});

									request.done(function (response, textStatus, jqXHR){
										console.log("Response " + response);
										for (var i = 0; i < tagList.length; i++) {
											var aTag= tagList[i].trim();
											if (aTag != "") {
												var url = jsRoutes.controllers.Tags.search(aTag).url;
												$newTag = $("<li class='tag'><a href='" + url + "'id='" + htmlEncode(aTag) + "' data-id='newId" + tmpId + "'>" + aTag + " [File]</a><a href='javascript:void(0);'><i style='display:none;'id='" + htmlEncode(aTag) + "' data-id='newId" + tmpId + "' class='glyphicon glyphicon-remove'></i></a></li>").appendTo('#tagList');
												$newTag.hover(removeIconMouseIn, removeIconMouseOut);
												$newTag.find(".glyphicon-remove").click(removeTag);
												tmpId = tmpId + 1;
											}
										}
										$('#tagField').val("");
									});

									request.fail(function (jqXHR, textStatus, errorThrown){
										console.error("The following error occured: " + textStatus, errorThrown);
										var errMsg = "You must be logged in to add a tag to a file.";
										if (!checkErrorAndRedirect(jqXHR, errMsg)) {
											notify("The tag was not added to the file due to : " + errorThrown, "error");
										}
									});
									return false;
								}
							});

							$('#tagField').keypress(function (e) {
								if (e.which == 13) {
									console.log("enter");
									$('#tagB').click();
									return false;
								}
							});

						});
				</script>
			</div>
		</div> <!-- end of right column -->
	</div>
}