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

    @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>
    <div class="row">
        <div class="col-md-12">
            <h1>@title</h1>
        </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>
            @if(user.isDefined){
                <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> Create</a>
            }
        </div>
    </div>
    <script>
                var removeIndicator = true;
                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: '/' });
                    });
                    $('#myspace').click(function(){
                        var path;
                        if(window.location.search == ""){
                            path = location.pathname+'?showAll=false'
                        } else {
                            path = location.pathname+location.search+'&showAll=false'
                        }
                        window.location.assign( path);
                    });

                     $('#allspace').click(function(){
                        // this will leave a semi-colon in the path. but it should be a problem. Otherwise, we have to care about
                        // '/spaces?showAll=false;when=.....', where we should remove the one char after showAll not the one before.
                        var path=(location.pathname+location.search).replace('showAll=false', '');
                        window.location.assign( 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.followingSpaces(next, limit, ""))");
                    $('#prevlink').attr('href', "@(routes.Spaces.followingSpaces(prev, limit, ""))");
                }
            </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.followingSpaces(prev+1, limit, ""), true)
            }
            </div>
        </div>
    </div>

    <div class="row hidden" id="list-view">
        <div class="col-md-12">
        @spacesList.map { space =>
            @spaces.listItem(space, routes.Spaces.followingSpaces(prev+1, limit, ""))
        }
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <ul class="pager">
                @if(prev >= 0) {
                    <li class="previous"><a id="prevlink" title="Page backwards" href="#"><span class="glyphicon glyphicon-chevron-left"></span> Previous</a></li>
                }
                @if(next >= 0) {
                    <li class ="next"><a id="nextlink" title="Page forwards" href="#">Next <span class="glyphicon glyphicon-chevron-right"></span></a></li>
                }
            </ul>
        </div>
    </div>

}