@(spacesList: List[models.ProjectSpace], when: String, date: String, limit: Int, owner: Option[String], ownerName: Option[String], showAll: Boolean, mode: Option[String], prev: String, next: String, title: Option[String], showPublic: Boolean, onlyTrial: Boolean)(implicit user: Option[models.User])
@import play.api.i18n.Messages
@main(Messages("spaces.title")) {

        @util.masonry()

        <script src="@routes.Assets.at("javascripts/spaceListProcess.js")" type="text/javascript"></script>
        <script src="@routes.Assets.at("javascripts/deleteUtils.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 (_, _) => {}
            }


            <li><span class="glyphicon glyphicon-hdd"> </span> @Messages("spaces.title")</li>
        </ol>
    </div>
        <div class="row">
            <div class="col-md-12">
                <h1>@title</h1>
                <p>@Messages("space.list.message", Messages("spaces.title"))</p>
            </div>
        </div>


        <div class="row">
            <div class="btn-toolbar">
                <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>

                @(user, owner) match {
                    case (Some(u), Some(o)) => {
                        @if(o.equalsIgnoreCase(u.id.stringify)) {
                            <a class="btn btn-primary btn-sm pull-right" id="create-space" href="@routes.Spaces.newSpace" title="Create a new @Messages("space.title")"><span class="glyphicon glyphicon-ok"></span> @Messages("create.title", "")</a>
                        }
                    }
                    case (Some(u), _) => {

                        <a class="btn btn-primary btn-sm pull-right" id="create-space" href="@routes.Spaces.newSpace" title="Create a new @Messages("space.title")"><span class="glyphicon glyphicon-ok"></span> @Messages("create.title", "")</a>

                    }
                    case (_,_) => {}

                }
            </div>
        </div>
                <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() {
                    $('#nextlink').attr('href', "@(routes.Spaces.list("a", next, limit, "", owner, showAll, showPublic, onlyTrial))");
                    $('#prevlink').attr('href', "@(routes.Spaces.list("b", prev, limit, "", owner, showAll, showPublic, onlyTrial))");
                    doSummarizeAbstracts();
                }
            </script>

        <div class="row hidden" id="tile-view">
            <div class="col-md-12">
                <div id="masonry">
                    @spacesList.map { space =>
                        @spaces.tile(space, "col-lg-3 col-md-3 col-sm-3 col-xs-12",  routes.Spaces.list(when, date, limit, "", owner, showAll, showPublic, onlyTrial), false)
                    }
                </div>
                </div>
            </div>

            <div class="row hidden" id="list-view">
                <div  class="col-md-12">
                    @spacesList.map { space =>
                        @spaces.listItem(space, (routes.Spaces.list(when, date, limit, "", owner, showAll, showPublic, onlyTrial)) )
                    }
                </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/htmlEncodeDecode.js")" type="text/javascript"></script>
        <script src="@routes.Assets.at("javascripts/descriptionSummary.js")" type="text/javascript"></script>
}