@(datasetsList: List[models.Dataset], prev: String, next: String, limit: Int,
        mode: Option[String], space: Option[String], spaceName: Option[String], status: Option[String],
        title: Option[String], owner:Option[String], ownerName: Option[String], when: String, date: String,
        userSelections: List[String], showTrash: Boolean = false)(implicit flash: play.api.mvc.Flash, user: Option[models.User])

@import api.Permission
@main(Messages("datasets.title")) {

@util.masonry()
<script src="@routes.Assets.at("javascripts/errorRedirect.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/jquery.cookie.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/follow-button.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/displayPanels.js")" type="text/javascript"></script>

<div class="row">
    <ol class="breadcrumb">
        @(owner, ownerName) match {
            case (Some(o), Some(n)) => {
                <li> <span class="glyphicon glyphicon-user"></span> <a href="@routes.Profile.viewProfileUUID(UUID(o))"> @n</a></li>
            }
            case (_, _) => {}
        }
        @(space, spaceName) match {
            case (Some(s), Some(sn)) => {
                <li><span class="glyphicon glyphicon-hdd"></span> <a href="@routes.Spaces.getSpace(UUID(s))"> @sn</a></li>
            }
            case (_,_) => {}
        }

        <li><span class="glyphicon glyphicon-briefcase"> </span> Datasets</li>
    </ol>
</div>
    <div class="row">
        <div class="col-md-12">
            <h1>@Html(title.getOrElse("Datasets"))</h1>
            @status match {
                case Some("publicAll") => {
                    <p>The @Messages("space.title") team has made the following @Messages("datasets.title").toLowerCase publicly available.</p>
                }
                case _ => {
                    @if(showTrash){
                        <p>@Messages("dataset.trash.message", Messages("datasets.title").toLowerCase, Messages("dataset.title").toLowerCase)</p>

                    } else {
                        <p>@Messages("dataset.list.message", Messages("datasets.title").toLowerCase, Messages("dataset.title").toLowerCase)</p>
                    }
                }
            }
        </div>
    </div>

<div class="row">
    <div class="btn-toolbar">
     <!-- pull-right class stacks things to the right - first item to the farthest right -->
        <div class="btn-group btn-group-sm pull-right">
                <button type="button" class="btn btn-default active" href="#tile-view" id="tile-view-btn"><span class="glyphicon glyphicon-th-large"></span></button>
                <button type="button" class="btn btn-default" href="#list-view" id="list-view-btn"><span class="glyphicon glyphicon-th-list"></span></button>
        </div>
        <div class="btn-group btn-group-sm pull-right" id="number-displayed-dropdown">
            <select id="numPageItems" class="form-control" onchange="getValue()">
                <option value="12">12</option>
                <option value="24">24</option>
                <option value="48">48</option>
                <option value="96">96</option>
            </select>
        </div>

  @if(play.Play.application().configuration().getBoolean("sortInMemory")) {
  @space match {
    case Some(s) => {
      <div class="btn-group btn-group-sm pull-right">
      <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>
<script type="text/javascript">
  $(function() {
	$(".js-sort-single").select2({minimumResultsForSearch: Infinity});
  	//Set starting value based on cookie
  	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");

    var currentSpace = null;
    currentSpace = '@s';

    $(".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
      @if(prev != "") {
      var request = jsRoutes.controllers.Datasets.sortedListInSpace(currentSpace, @prev.toInt, @limit);
      } else {
      var request = jsRoutes.controllers.Datasets.sortedListInSpace(currentSpace, 0, @limit);
      }
      window.location = request.url;
    });
  });
</script>
    }
    case None => {}
    }
}

    @status match {
        case Some(st) => {}
        case None => {

        @user match {
            case Some(u) => {
                @(space, owner) match {
                    case (Some(s), Some(o)) => {
                        @if(Permission.checkPermission(Permission.CreateCollection, ResourceRef(ResourceRef.space, UUID(s)))) {
                            @if(o.equalsIgnoreCase(u.id.stringify)) {
                                <a id="create-dataset" href="@routes.Datasets.newDataset(Some(s), None)" class="btn btn-primary btn-sm pull-right" title="@Messages("create.title", Messages("dataset.title"))">
                                    <span class="glyphicon glyphicon-ok"></span>  @Messages("create.title", "")</a>
                            }
                        }
                    }
                    case (Some(s), _) => {
                        @if(Permission.checkPermission(Permission.CreateCollection, ResourceRef(ResourceRef.space, UUID(s)))) {
                            <a id="create-dataset" href="@routes.Datasets.newDataset(Some(s), None)" class="btn btn-primary btn-sm pull-right" title="@Messages("create.title", Messages("dataset.title"))">
                                <span class="glyphicon glyphicon-ok"></span>  @Messages("create.title", "")</a>
                        }
                    }
                    case (_, Some(o)) => {
                        @if(o.equalsIgnoreCase(u.id.stringify)) {
                            @if(showTrash){
                                <a id="clear-trash" onclick="confirmClearTrash('dataset', '@(routes.Datasets.list("",owner=Some(user.get.id.stringify),showTrash=true))')"
                                class="btn btn-primary btn-sm pull-right" href="#"> <span class="glyphicon glyphicon-trash"></span>  @Messages("cleartrash.title", Messages("datasets.title"))</a>
                            } else {
                                <a id="create-dataset" class="btn btn-primary btn-sm pull-right" href="@routes.Datasets.newDataset(space, None)" title="@Messages("create.title", Messages("dataset.title"))"><span class="glyphicon glyphicon-ok"></span> @Messages("create.title", "")</a>
                            }
                        }
                    }

                    case (_, _) => {
                        <a id="create-dataset" class="btn btn-primary btn-sm pull-right" href="@routes.Datasets.newDataset(space, None)" title="@Messages("create.title", Messages("dataset.title"))">
                            <span class="glyphicon glyphicon-ok"></span> @Messages("create.title", "")</a>
                    }
                }
            }
            case _ => {}
        }
                }
    }
    </div>
        <script type="text/javascript" language="javascript">
            var removeIndicator = false;
	        var viewMode = '@mode.getOrElse("tile")';
            var status = '@status.getOrElse("")';
	        $.cookie.raw = true;
	        $.cookie.json = true;       	
            $(function() {
                $('#tile-view-btn').click(function() {
                  $('#tile-view').removeClass('hidden');
                  $('#list-view').addClass('hidden');
                  $('#tile-view-btn').addClass('active');
                  $('#list-view-btn').removeClass('active');
                  viewMode = "tile";
                  updatePage();
                  $.cookie('view-mode', 'tile', { path: '/' });
                  $('#masonry').masonry().masonry({
                      itemSelector: '.post-box',
                      columnWidth: '.post-box',
                      transitionDuration: 4
                  });
                });
                $('#list-view-btn').click(function() {
                  $('#tile-view').addClass('hidden');
                  $('#list-view').removeClass('hidden');
                  $('#list-view-btn').addClass('active');
                  $('#tile-view-btn').removeClass('active');
                  viewMode = "list";
                  updatePage();
                  //Utilizing library from https://github.com/carhartl/jquery-cookie/tree/v1.4.1
                  $.cookie("view-mode", "list", { path: '/' });
                });
            });
            
            $(document).ready(function() { 
            	//Set the cookie, for the case when it is passed in by the parameter
                $.cookie("view-mode", viewMode, { path: '/' });
                if (viewMode == "list") {
                    $('#tile-view').addClass('hidden');
                    $('#list-view').removeClass('hidden');
                    $('#list-view-btn').addClass('active');
                    $('#tile-view-btn').removeClass('active');                      
                }
                else {
                    $('#tile-view').removeClass('hidden');
                    $('#list-view').addClass('hidden');
                    $('#tile-view-btn').addClass('active');
                    $('#list-view-btn').removeClass('active');                      
                }
            	updatePage();            	
            });
            
            //Function to unify the changing of the href for the next/previous links. Called on button activation for
            //viewMode style, as well as on initial load of page.
	        function updatePage() {
@if(play.Play.application().configuration().getBoolean("sortInMemory")&&space.isDefined) {
                @if(next != "") {
                    $('#nextlink').attr('href', "@(routes.Datasets.sortedListInSpace(space.getOrElse(""), next.toInt, limit))");
                }
                @if(prev != "") {
                    $('#prevlink').attr('href', "@(routes.Datasets.sortedListInSpace(space.getOrElse(""), prev.toInt-limit, limit))");
                }
} else {
                if (status == "publicAll") {
                    $('#nextlink').attr('href', "@(routes.Datasets.list("a", next, limit, space, Some("publicAll"), "", owner))");
                    $('#prevlink').attr('href', "@(routes.Datasets.list("b", prev, limit, space, Some("publicAll"), "", owner))");
                } else {
                    $('#nextlink').attr('href', "@(routes.Datasets.list("a", next, limit, space, None, "", owner))");
                    $('#prevlink').attr('href', "@(routes.Datasets.list("b", prev, limit, space, None, "", owner))");
                }
}
                doSummarizeAbstracts();
			}
        </script>

<div class="row hidden" id="tile-view">
	<div class="col-md-12">
		<div id="masonry">
		@datasetsList.map { dataset =>
            @if(userSelections.indexOf(dataset.id.toString()) != -1) {
                @datasets.tile(dataset, space, "col-lg-3 col-md-3 col-sm-3", false, false, routes.Datasets.list(when, date, limit, space, None, "", owner), true)
            } else {
                @datasets.tile(dataset, space, "col-lg-3 col-md-3 col-sm-3", false, false, routes.Datasets.list(when, date, limit, space, None, "", owner), false)
            }
		}
		</div>
	</div>
</div>

<div class="row hidden" id="list-view">
	<div class="col-md-12">
        @datasetsList.map { dataset =>
            @if(userSelections.indexOf(dataset.id.toString()) != -1) {
                @datasets.listitem(dataset,None, routes.Datasets.list(when, date, limit, space, None, "", owner), true)
            } else {
                @datasets.listitem(dataset,None, routes.Datasets.list(when, date, limit, space, None, "", owner), false)
            }
        }
	</div>
</div>

@util.masonry()

<div class="row">
    <div class="col-md-12">
        <ul class="pager">
            <!-- The following items have to be links due to the way the list items render them. Ideally, they should be buttons. -->
            @if(prev != "") {
                <li class="previous"><a class="btn btn-link" id="prevlink" title="Page backwards" href="#"><span class="glyphicon glyphicon-chevron-left"></span> Previous</a></li>
            }
            @if(next != "") {
                <li class ="next"><a class="btn btn-link" id="nextlink" title="Page forwards" href="#">Next <span class="glyphicon glyphicon-chevron-right"></span></a></li>
            }
        </ul>
    </div>
</div>

<script src="@routes.Assets.at("javascripts/select.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>
}