@(collectionsList: List[models.Collection], prev: String, next: String, limit: Int, mode: Option[String], space: Option[String], spaceName: Option[String], title: Option[String], owner:Option[String], ownerName: Option[String], when: String, date: String, showTrash : Boolean = false)(implicit flash: play.api.mvc.Flash,  user: Option[models.User])
@import api.Permission
@main( Messages("collections.title")) {

@util.masonry()
    
<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/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-th-large"> </span> Collections</li>
        </ol>
    </div>
<div class="row">
    <div class="col-md-12">
        <h1>@Html(title.getOrElse("Collections"))</h1>
        @if(showTrash){
            <p>@Messages("collection.trash.message", Messages("collections.title").toLowerCase,  Messages("datasets.title").toLowerCase)</p>

        } else {
            <p>@Messages("collection.list.message", Messages("collections.title").toLowerCase,  Messages("datasets.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.Collections.sortedListInSpace(currentSpace, @prev.toInt, @limit);
      } else {
      var request = jsRoutes.controllers.Collections.sortedListInSpace(currentSpace, 0, @limit);
      }
      window.location = request.url;
    });
  });
</script>
    }
    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-collection" href="@routes.Collections.newCollection(space)" class="btn btn-primary btn-sm pull-right" title="@Messages("create.title", Messages("collection.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-collection" href="@routes.Collections.newCollection(space)" class="btn btn-primary btn-sm pull-right" title="@Messages("create.title", Messages("collection.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('collection', '@(routes.Collections.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("collections.title"))</a>
                                
                            } else {
                                <a id="create-collection" href="@routes.Collections.newCollection(space)" class="btn btn-primary btn-sm pull-right" title="@Messages("create.title", Messages("collection.title"))">
                                    <span class="glyphicon glyphicon-ok"></span>  @Messages("create.title", "")</a>
                            }

                        }
                    }

                    case (_, _) => {
                        <a id="create-collection" class="btn btn-primary btn-sm pull-right" href="@routes.Collections.newCollection(space)" title="@Messages("create.title", Messages("collection.title"))"><span class="glyphicon glyphicon-ok"></span> @Messages("create.title", "")</a>
                    }
                }
            }

            case _ => {}

        }

        <script>
            var removeIndicator = false;
	        var viewMode = '@mode.getOrElse("tile")';
	        $.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.Collections.sortedListInSpace(space.getOrElse(""), next.toInt, limit))");
            }
            @if(prev != "") {
                $('#prevlink').attr('href', "@(routes.Collections.sortedListInSpace(space.getOrElse(""), prev.toInt-limit, limit))");
    }
} else {
                $('#nextlink').attr('href', "@(routes.Collections.list("a", next, limit, space, "", owner))");
                $('#prevlink').attr('href', "@(routes.Collections.list("b", prev, limit, space, "", owner))");
}
			doSummarizeAbstracts();
            }
        </script>
    </div>
</div>


  <div class="row hidden" id="tile-view">
    <div class="col-md-12">
        <div id="masonry">
            @collectionsList.map { collection =>
                @collections.tile(collection, routes.Collections.list(when, date, limit, space, "", owner), space, "col-lg-3 col-md-3 col-sm-3", false)
            }
        </div>
    </div>
</div>


  <div class="row hidden" id="list-view">
	<div class="col-md-12">
        @collectionsList.map { collection =>
           @collections.listitem(collection, routes.Collections.list(when, date, limit, space, "", owner))
        }
	</div>
</div>

<div class="row">
    <div class="col-md-12">
        <ul class="pager">
            @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/descriptionSummary.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/htmlEncodeDecode.js")" type="text/javascript"></script>

}