@(datasetsList: List[models.Dataset], prev: Int, next: Int, limit: Int, mode: Option[String], space: Option[String], title: Option[String], owner:Option[String], userSelections: List[String])(implicit flash: play.api.mvc.Flash, user: Option[models.User])

@main("Following Datasets") {

    @util.masonry()
    <script src="@routes.Assets.at("javascripts/errorRedirect.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/datasetListProcess.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="col-md-10">
        </div>
        <div class="col-md-1">
        @if(user.isDefined) {
            <a id="create-dataset" class="btn btn-primary btn-sm pull-right" href="@routes.Datasets.newDataset(space, None)" title="Create a new dataset"> <span class="glyphicon glyphicon-ok"></span> Create</a>
        }

        </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 = 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: '/' });
                });
            });

            $(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.Datasets.followingDatasets(next, limit, ""))");
	            $('#prevlink').attr('href', "@(routes.Datasets.followingDatasets(prev, limit, ""))");
	        }
        </script>
        </div>
    </div>

    <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", true, false, routes.Datasets.followingDatasets(prev+1, limit, ""), true)
                } else {
                    @datasets.tile(dataset, None, "col-lg-3 col-md-3 col-sm-3", true, false, routes.Datasets.followingDatasets(prev+1, limit, ""), 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.followingDatasets(prev+1, limit, ""), true)
            } else {
                @datasets.listitem(dataset, None, routes.Datasets.followingDatasets(prev+1, limit, ""), 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 >= 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>


}