@(datasetsInCollection: List[models.Dataset],
  childCollections: List[models.Collection],
  parentCollections: Option[List[models.Collection]],
  collection: models.Collection,
  previewers: List[Previewer],
  collectionSpaces_canRemove : Option[Map[ProjectSpace, Boolean]],
  prevd: Int, nextd: Int, prevcc: Int, nextcc: Int, limit: Int, canAddToParent: Boolean,
  userSelections: List[String],
  view_count: Int, view_date: java.util.Date)(implicit flash: play.api.mvc.Flash, user: Option[models.User])


@import models.ResourceRef
@import models.UUID
@import api.Permission
@import _root_.util.Formatters._

@showPreview(name: String, url: String, collection_id: String) = {
<script>
    var Configuration = {};
    Configuration.tab = "#previewer_@name";
    Configuration.url = "@url";
    Configuration.collection_id = "@collection_id";
</script>
<script type="text/javascript" src="@(url)"></script>
}

@main(collection.name) {

<script src="@routes.Assets.at("javascripts/errorRedirect.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/collectionDatasetsList.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/collectionListProcess.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/deleteUtils.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/spaceModify.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/htmlEncodeDecode.js")" language="javascript"></script>
<script src="@routes.Assets.at("javascripts/select.js")" type="text/javascript"></script>

	<div class="row">
		<!-- left column -->
		<div class="col-md-8">
			<div class="row">
				<ol class="breadcrumb">

				@collectionSpaces_canRemove match {
					case Some(spaces_map) => {
						@if(spaces_map.size == 1) {
								<li><span class="glyphicon glyphicon-hdd"></span> <a href="@routes.Spaces.getSpace(spaces_map.head._1.id)" title="@spaces_map.head._1.name"> @Html(ellipsize(spaces_map.head._1.name,18))</a></li>


						} else  { @if(spaces_map.size > 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.map { case (s,v) =>
									<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(collection.author.id)"> @collection.author.fullName </a></li>
						}
						}

					}
					case None => {}
				}
					<li><span class="glyphicon glyphicon-th-large"></span> <span title="@collection.name">@Html(ellipsize(collection.name, 18))</span></li>

				</ol>
				<div class="col-xs-12 collection-title" id="coll-title">
					<h1 id ="collectiontitle" class="inline"><span class="glyphicon glyphicon-th-large"></span> @Html(collection.name)</h1>
					@if(!collection.trash && Permission.checkPermission(Permission.EditCollection, ResourceRef(ResourceRef.collection, collection.id))) {
						<h3 id="h-edit-title" class="hiddencomplete">
							<a id="edit-title" href="javascript:updateTitle()" edit="Click to edit title">
								<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
							</a>
						</h3>
					}
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<ul class="list-unstyled">
						<li>@Messages("owner.label"): <a href= "@routes.Profile.viewProfileUUID(collection.author.id)"> @collection.author.fullName </a></li>
						<li>Created on @collection.created.format("MMM dd, yyyy")</li>
					</ul>
					<div id="aboutdesc" class="col-xs-12 box-white-space"><p id="collection_desc"  class="inline abstract 
					  	@if(collection.description.contains("<br>")) {
                    		abstract-panel
                    	}
						">@if(collection.description.length > 0) { @Html(collection.description)} else {Add a description}</p>
						@if(Permission.checkPermission(Permission.EditCollection, ResourceRef(ResourceRef.collection, collection.id)) && !collection.trash) {
							<a class="hiddencomplete" id="edit-description" href="javascript:updateDescription()" title ="Click to edit description">
								<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
							</a>
						}
					</div>
				</div>
			</div>
			@if(user.isDefined) {
				<div class="row">
					<div class="col-xs-12">
						<hr/>
						@if(collection.trash){
							<button id="restoreButton" onclick="restoreCollection('@(collection.id)', true, '@(routes.Collections.list("",owner=Some(user.get.id.stringify),showTrash=true))')"
							class="btn btn-link" title="Restore Collection but not Enclosed Datasets">
								<span class="glyphicon glyphicon-exclamation-sign"></span> Restore</button>
						}
							<!-- If user can delete, the button is enabled, otherwise the button is present but disabled to provide consistent UE. -->
                        @if(Permission.checkPermission(Permission.DeleteCollection, ResourceRef(ResourceRef.collection, collection.id))){
                            <button id="deleteButton" onclick="confirmDeleteResource('collection','collection','@(collection.id)','@(collection.name.replace("'","&#39;"))', true, '@(routes.Collections.list(""))')"
                                class="btn btn-link" title="Delete Collection but not Enclosed Datasets">
                                    <span class="glyphicon glyphicon-trash"></span> Delete</button>
                        } else {
                            <button disabled id="deleteButton"
                                class="btn btn-link" title="Delete Collection but not Enclosed Datasets">
                                    <span class="glyphicon glyphicon-trash"></span> Delete</button>
                        }
						@if(user.isDefined) {
							@if(!collection.followers.contains(user.get.id)) {
								<button id="followButton" class="btn btn-link followButton" objectId="@collection.id" objectName="@collection.name" objectType="collection"><span class="glyphicon glyphicon-star"></span> Follow</button>
							} else {
								<button id="followButton" class="btn btn-link followButton" objectId="@collection.id" objectName="@collection.name" objectType="collection"><span class="glyphicon glyphicon-star-empty"></span> Unfollow</button>
							}
						}
						@if(user.isDefined && collectionSpaces_canRemove.isDefined && !collectionSpaces_canRemove.isEmpty){
							<a href="@routes.Collections.users(collection.id)" class="btn btn-link">
								<span class="glyphicon glyphicon-user"></span> Collaborators</a>
						}
						@if(Permission.checkPermission(Permission.DownloadFiles, ResourceRef(ResourceRef.collection, collection.id))) {
							<a id='download-url' href="#"
							onclick="window.open(jsRoutes.api.Collections.download('@collection.id').url, '_blank');"
							class="btn btn-link" title="Download All Files as Zip" role="button">
								<span class="glyphicon glyphicon-download-alt"></span>
								Download All Files
							</a>
						} else {
							<a id='download-url' href="#" disabled
							class="btn btn-link disabled" title="You don't have permission to Download this collection" role="button">
								<span class="glyphicon glyphicon-download-alt"></span>
								Download All Files
							</a>
						}
						<hr/>
					</div>
				</div>
			}
			<div class="row">
				<div style="clear: both;"></div>

				<div id="recommendPanel"
						class="panel panel-default"
						style="margin-top: 20px; 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>

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

				<script>
					$(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);
						}
					});
				</script>
			</div>
			<div class="row">
				<div class="col-md-12">
					@for((p,i) <- previewers.zipWithIndex) {
						<h3>@p.id</h3>
						<div class="previewDiv" id="previewer_@(p.id)_@i"></div>
						@showPreview(p.id + "_" + i, routes.Assets.at("javascripts/previewers") + "/" + p.id + "/" + p.main, collection.id.stringify)
					}
				</div>
			</div>
			<div class="row">
			  <div class="col-md-8"></div>
			  <div class="col-md-4">
				<script type="text/javascript">
				  $(document).ready(function() {
  				  $(".js-sort-single").select2({minimumResultsForSearch: Infinity});
  				  var order = 'dateN';
  				  if($.cookie('sort-order') != null) {
				    //removing quotes from around cookie value 
			   	    order = $.cookie('sort-order').replace(/['"]+/g, '');
			  	  } 
  				  $(".js-sort-single").val(order).trigger("change");
				  $(".js-sort-single").on('select2:select', function (evt) { 
		             $(window).trigger("sortchange");
	    		  });
	    		  $(window).on('sortchange', function() {
				      var sort = $(".js-sort-single").val();
	      			  //Update cookie
			          $.cookie('sort-order', sort, { path: '/' });
			          //Go get the list sorted the new way     
          	          var request = jsRoutes.controllers.Collections.collection('@collection.id.toString()');
			          window.location = request.url;
        		   });
				  });
				</script>
				  @if(play.Play.application().configuration().getBoolean("sortInMemory")) {
					  <label class='sortchoice' for="js-sort-single">Sort By:
						  <select class="js-sort-single">
							  <option value="dateN">Newest</option>
							  <option value="dateO">Oldest</option>
							  <option value="titleA">Title (A-Z)</option>
							  <option value="titleZ">Title (Z-A)</option>
							  <option value="sizeL">Size (L)</option>
							  <option value="sizeS">Size (S)</option>
						  </select>
					  </label>
				  }
					
			  </div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<div class="row">
						<div class="col-xs-8">
							<h2>@Messages("a.in.b", Messages("datasets.title"), Messages("collection.title"))</h2>
						</div>
						<div class="col-xs-4 valign-link">
						@if(Permission.checkPermission(Permission.EditCollection, ResourceRef(ResourceRef.collection, collection.id))){
							<a id="create_dataset" href="@routes.Datasets.newDataset(None, Some(collection.id.toString()))"
							class="btn btn-link pull-right" title="Create Dataset">
								<span class="glyphicon glyphicon-ok"></span> @Messages("create.title", Messages("dataset.title"))</a>
						}
						</div>
					</div>
					<div id="datasets">
					@collections.datasetsInCollection(datasetsInCollection, collection.id, prevd, nextd, userSelections)
					</div>
				</div>
			</div>
			<div class="row top-padding">
				<div class="col-xs-12" id="childCollectionsDiv">
					<div class="row">
						<div class="col-xs-8">
							<h2>@Messages("a.in.b", "Child " +Messages("collections.title"), Messages("collection.title"))</h2>
						</div>
						<div class="col-xs-4 valign-link">
							@if(Permission.checkPermission(Permission.EditCollection, ResourceRef(ResourceRef.collection, collection.id))){
								<a id="create_childcollection"
								href="@routes.Collections.newCollectionWithParent(collection.id)"
								class="btn btn-link pull-right" title="Create Child Collection">
									<span class="glyphicon glyphicon-ok"></span> @Messages("create.title", Messages("collection.child.title"))</a>
							}
						</div>
					</div>
					<div id="childCollections">
						@collections.childCollections(childCollections, collection, prevcc, nextcc)
					</div>
				</div>
			</div>

		</div>

		<!-- right column -->
		<div class="col-md-4">
			<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>
				</table>
			</div>

			<div class="bottom-padding">
				@spaces.spaceAllocation(collection.id, ResourceRef.collection, collectionSpaces_canRemove.getOrElse(Map.empty), Some(collection))
			</div>
				@collections.parentAllocation(collection,collection.id,ResourceRef.collection, parentCollections.getOrElse(List.empty),canAddToParent)
		</div>
	</div>


<script language="javascript">

	var collectionId = "@collection.id.stringify";
	var cur_title;
	function updateTitle() {
	 cur_title = $('#collectiontitle').text().trim();
	 $('<div class="inline edit_title_div"> </span>').insertAfter($('#collectiontitle'));
	 $('.edit_title_div').append('<input type = "text" id="title_input" class="form-control"/>');
	 $('.edit_title_div').append('<div class="hiddencomplete" id="title-error"> <span class="error"> Title is required </span> </div>');
	 $('.edit_title_div').append('<button id="update_title" class="btn btn-sm btn-primary btn-margins" onclick="saveTitle()"> <span class="glyphicon glyphicon-send"></span> Save </button>');
	 $('.edit_title_div').append('<button id="cancel_title" class="btn btn-sm btn-default btn-margins edit-tab" onclick="cancelTitle()"> <span class="glyphicon glyphicon-remove"></span> Cancel </button>');

	 $('#title_input').val(cur_title);
	 $('#collectiontitle').text("");
	 $('#h-edit-title').css("display", "none");
	 $('#h-edit-title').addClass("hiddencomplete");
	 $('#coll-title').removeClass("collection-title");
	}

	function saveTitle() {
		if($('#title_input').val().length < 1) {
			$('#title-error').show();
			return false;
		} else {
			$('#title-error').addClass('hiddencomplete');
		}
		var name = $('#title_input').val();
		var encName = htmlEncode(name);
		jsonData = JSON.stringify({"name": encName});

		var request = jsRoutes.api.Collections.updateCollectionName(collectionId).ajax({
			data: jsonData,
			type: 'PUT',
			contentType: "application/json"
		});

		request.done(function(response, textStatus, jqXHR) {
			$('#collectiontitle').text(encName.replace(/\n/g, "<br>"));
			$('#collectiontitle').prepend('<span class="glyphicon glyphicon-th-large"></span> ');
            $('.edit_title_div').remove();
			$('#collectiontitle').css("display", "inline");
			$('#h-edit-title').removeClass("inline");
			$('#h-edit-title').css("display", "");
			$('#coll-title').addClass("collection-title");
			$('#coll-title').mouseleave();
		});

		request.fail(function(jqXHR, textStatus, errorThrown) {
			console.error("The following error occurred: " + textStatus, errorThrown);
			var errMsg = "Yoy 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 cancelTitle() {
		$('#collectiontitle').text(cur_title);
		$('#collectiontitle').prepend('<span class="glyphicon glyphicon-th-large"></span> ');
        $('.edit_title_div').remove();
		$('#collectiontitle').css("display", "inline");
		$('#h-edit-title').removeClass("inline");
		$('#h-edit-title').css("display", "");
		$('#coll-title').addClass("collection-title");
		$('#coll-title').mouseleave();
	}

	var cur_description;

	function updateDescription() {
		cur_description = $('#collection_desc').html().trim();
		$('<div class = "edit_desc"></div>').insertAfter($('#collection_desc'));
		$(".edit_desc").append('<textarea type ="text" id = "desc_input" class="form-control"/>');
		$(".edit_desc").append('<br/>');
		$(".edit_desc").append('<button id = "update_desc" class = "btn btn-sm btn-primary" onclick = "saveDescription()"> <span class="glyphicon glyphicon-send"></span>  Save </button>');
		$(".edit_desc").append('<button id = "cancel_desc" class = "btn btn-default btn-sm edit-tab" 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")));
		}
		$('#collection_desc').text("");
		$('#edit-description').css("display", "none");
		$('#edit-description').addClass("hiddencomplete");
	}

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

		var request = jsRoutes.api.Collections.updateCollectionDescription(collectionId).ajax({
			data: jsonData,
			type: 'PUT',
			contentType: "application/json"
		});

		request.done(function(response, textStatus,jqXHR) {
			$('#collection_desc').html(urlify(htmlEncode(description).replace(/\n/g, "<br>")));
			$('.edit_desc').remove();
			$('#edit-description').css("display", "");
			$('#edit-description').removeClass("inline");
			if ($('#collection_desc').html().indexOf("<br>")>=0) {
			$('#collection_desc').addClass("abstract-panel");
			} else {
			$('#collection_desc').removeClass("abstract-panel");
			}
			$('#collection_desc').css("display", "");
			$('#collection_desc').mouseleave();
			notify("Collection 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 cancelDescription() {
		$('#collection_desc').html(cur_description);
		$('.edit_desc').remove();
		$('#edit-description').css("display", "");
		$('#edit-description').removeClass("inline");
		$('#collection_desc').css("display", "");
		$('#collection_desc').mouseleave();
	}
	
	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>';
        })
    }

	$(document).ready(function(){
		if(@collection.spaces.size < 1 ) {
			$('#collection-users').hide();
		}
		if(@Permission.checkPermission(Permission.EditCollection, ResourceRef(ResourceRef.collection, collection.id))) {
			    $(document).on('mouseenter', '#coll-title', function() {
                    $('#h-edit-title').removeClass("hiddencomplete");
                    $('#h-edit-title').addClass("inline");
                 }).on('mouseleave', '#coll-title', function() {
                    $('#h-edit-title').removeClass("inline");
                    $('#h-edit-title').addClass("hiddencomplete");
                 });

                 $(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 updateDatasets(page) {
		var request = jsRoutes.controllers.Collections.getUpdatedDatasets("@collection.id", page).ajax({
			type: 'GET'
		});
		request.done(function(response, textStatus, jsXHR){
			$('#datasets').html("");
			$('#datasets').html(response);
		});
		request.fail(function(jqXHR, testStatus, errorThrown){
			console.error("The following error occurred: " + textStatus, errorThrown);
			errMsg = "You must be logged in to see datasets.";
			if(!checkErrorAndRedirect(jqXHR, errMsg)) {
				notify("Error in getting datasets within collection: " + errorThrown, "error");
			}
		})
	}

	function updateChildCollections(page) {
		var request = jsRoutes.controllers.Collections.getUpdatedChildCollections("@collection.id", page).ajax({
			type: 'GET'
		});
		request.done(function(response, textStatus, jsXHR){
			$('#childCollections').html("");
			$('#childCollections').html(response);
		});
		request.fail(function(jqXHR, testStatus, errorThrown){
			console.error("The following error occurred: " + textStatus, errorThrown);
			errMsg = "You must be logged in to see child collections.";
			if(!checkErrorAndRedirect(jqXHR, errMsg)) {
				notify("Error in getting child collections: " + errorThrown, "error");
			}
		})
	}

</script>
<script src="@routes.Assets.at("javascripts/handlebars-v1.3.0.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/handlebars-loader.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/follow-button.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/descriptionSummary.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/htmlEncodeDecode.js")" type="text/javascript"></script>
}