@(curationObjectsList: List[models.CurationObject], prev: String, next: String, limit: Int, mode: Option[String], space: Option[String], title: Option[String])(implicit user: Option[models.User])

@import api.Permission
@main(Messages("datasets.title")) {
    @util.masonry()
    <script src="@routes.Assets.at("javascripts/jquery.cookie.js")" type="text/javascript"></script>

    <div class="row">
        <div class="col-md-12">
            <h1>Datasets published from @Messages("space.title").toLowerCase <a href="@routes.Spaces.getSpace(UUID(space.get))">@Html(title.getOrElse("Published datasets"))</a> </h1>
        </div>
    </div>

    <div class="row">
        <div class="col-md-11"></div>
        <div class="col-md-1">
            <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>

            <script type="text/javascript" language="javascript">
                    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.CurationObjects.list("a", next, limit, space))");
                        $('#prevlink').attr('href', "@(routes.CurationObjects.list("b", prev, limit, space))");
                    }
            </script>
        </div>
    </div>

    <div class="row hidden" id="tile-view">
        <div class="col-md-12">
            <div id="masonry">
            @curationObjectsList.map { curationObject =>
                @curations.tile(curationObject, space, "col-lg-4 col-md-4 col-sm-4")
            }
            </div>
        </div>
    </div>

    <div class="row hidden" id="list-view">
        <div class="col-md-12">
            @curationObjectsList.map { curationObject =>
                @curations.listitem(curationObject, space)
            }
        </div>
    </div>
    @util.masonry()

    <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>


}