@(selectedDatasets: scala.collection.mutable.ListBuffer[Dataset])(implicit ident: Option[securesocial.core.Identity], user: Option[models.User])

@import api.Permission

@main("Selected Datasets") {
<script src="@routes.Assets.at("javascripts/jquery-ui-1.10.3.custom.min.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/select-bulk.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/deleteUtils.js")" type="text/javascript"></script>

<div class="page-header">
	<h1>Selections</h1>
	<div id="select-count">
		You currently have <b>@selectedDatasets.length</b> dataset(s) selected.
	</div>
</div>

Bulk operations are still subject to individual dataset permissions; if you do not have permission to perform the action on one of your selections, it will not be included in the operation.

@if(user.isDefined) {
	<div class="row">
		<div class="col-xs-12">
			<hr/>
				@if(selectedDatasets.length==0) {
					<a id='download-url' href="#" onclick="downloadAllSelections();"
					class="btn btn-link disabled" title="Download all selected files as zip" role="button">
						<span class="glyphicon glyphicon-download-alt"></span> Download All</a>
					<a id='delete-url' href="#" onclick="confirmDeleteSelected();"
					class="btn btn-link disabled" title="Delete all selected datasets" role="button">
						<span class="glyphicon glyphicon-trash"></span> Delete All</a>
					<a id='tag-url' href="#" onclick="showTagPopup();"
					class="btn btn-link" title="Apply a tag to all selected datasets" role="button">
						<span class="glyphicon glyphicon-tag"></span> Tag All</a>
				} else {
					<a id='download-url' href="#" onclick="downloadAllSelections();"
					class="btn btn-link" title="Download all selected files as zip" role="button">
						<span class="glyphicon glyphicon-download-alt"></span> Download All</a>
					<a id='delete-url' href="#" onclick="confirmDeleteSelected();"
					class="btn btn-link" title="Delete all selected datasets" role="button">
						<span class="glyphicon glyphicon-trash"></span> Delete All</a>
					<a id='tag-url' href="#" onclick="showTagPopup();"
					class="btn btn-link" title="Apply a tag to all selected datasets" role="button">
						<span class="glyphicon glyphicon-tag"></span> Tag All</a>
				}
				<a id='clear-url' href="#" onclick="clearSelections();"
				class="btn btn-link" title="Clear all selected datasets" role="button">
					<span class="glyphicon glyphicon-erase"></span> Clear Selections</a>
			<hr/>
		</div>
	</div>
}

<div class="row">
	<div class="col-md-12">
		<h2>Selected Datasets</h2>
		@for(d <- selectedDatasets) {
			@datasets.tile(d, None, "col-lg-3 col-md-3 col-sm-3", false, false, routes.Application.index(), true)
		}
	</div>
	<!-- TODO: Old code for drag+drop relationship modification; revisit eventually -->
	<!-- div class="row">
		<div class="col-md-6">
			<div class="col-md-12">
				<h3>Add Relationship</h3>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<div id="relate1" class="droppable">
				  <p>Drop here</p>
				</div>
			</div>
			<div class="col-md-4" style="vertical-align: middle;">
		      <select id ="relate" class="form-control">
			    <option>describes</option>
			    <option>duplicates</option>
			    <option>references</option>
			    <option>relates</option>
			 </select>
			</div>
			<div class="col-md-4">
				<div id="relate2" class="droppable">
				  <p>Drop here</p>
				</div>
			</div>
		</div>
	    <div class="row">
			<div class="col-md-12">
				<button type="button" class="btn btn-primary btn-lg">Create</button>
			</div>
		</div>
	</div>
</div>
<script>
	/*
$(function() {
    $( ".draggable" ).draggable({

    // brings the item back to its place when dragging is over
    revert:true,

    // once the dragging starts, we decrease the opactiy of other items
    // Appending a class as we do that with CSS
    drag:function () {
        $(this).addClass("active");
        $(this).closest("#product").addClass("active");
    },

    // removing the CSS classes once dragging is over.
    stop:function () {
        $(this).removeClass("active").closest("#product").removeClass("active");
    }
});
    $( "#relate1" ).droppable({
      drop: function( event, ui ) {
       var draggableId = ui.draggable.attr("id");
       var title = ui.draggable.find("a").text();
        $(this)
          .find("p")
            .html(title);
       console.log("Dropped " + draggableId + " into box 1");
      }
    });
    $( "#relate2" ).droppable({
      drop: function( event, ui ) {
       var draggableId = ui.draggable.attr("id");
       var title = ui.draggable.find("a").text();
        $(this)
          .find("p")
            .html(title);
       console.log("Dropped " + draggableId + " into box 2");
      }
    });
  });
  */
  </script>
	</div-->
</div>

<script>
	function updateMessage() {
		// Rather than reload whole page, just count the number of tiles that haven't been removed for now
		var found = 0;
		@for(d <- selectedDatasets) {
				if (document.getElementById("@d.id-tile")) found += 1;
			}
		document.getElementById("select-count").innerHTML = "You currently have <b>"+found+"</b> dataset(s) selected."

		if (found==0) {
			$("a#download-url").addClass("disabled");
			$("a#delete-url").addClass("disabled");
		} else {
			$("a#download-url").removeClass("disabled");
			$("a#delete-url").removeClass("disabled");
		}
	}
</script>

}