@(tag: String, items: List[AnyRef], prev: String, next: String, limit: Int, mode: Option[String])(implicit flash: play.api.mvc.Flash, user: Option[models.User])

@import _root_.util.Formatters.ellipsize

@main("Tagged Items") {
	@util.masonry()
    <script src="@routes.Assets.at("javascripts/errorRedirect.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/fileListProcess.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/datasetListProcess.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-lg-12 col-md-12 col-sm-12">
            <h1>Tag: @tag</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-10 col-md-10 col-sm-10"></div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <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 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: '/' });
                    });
                    //updatePage();
                });

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

    @* Show as grid *@
    <div class="row hidden" id="tile-view">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div id="masonry">
            @items.map { item =>
                @item match {
                    case dataset: models.Dataset => {
                        @datasets.tile(dataset,None,"col-lg-3 col-md-3 col-sm-3",false,false,routes.Datasets.dataset(dataset.id,None),false)

                    }
                    case file: models.File => {
                        @files.tile(file,"col-lg-3 col-md-3 col-sm-3",routes.Files.file(file.id),false)
                    }
                 }
            }
            </div>
        </div>
    </div>

    @* Show as list *@
    <div class="row hidden" id="list-view">
        <div class="col-lg-12 col-md-12 col-sm-12">
        @items.map { item =>
            @item match {
                case dataset: models.Dataset => {
                    @datasets.listitem(dataset, None, routes.Datasets.dataset(dataset.id,None), false)

                }
                case file: models.File => {
                    @files.listitem(file, routes.Files.file(file.id), None, None, None, false)
                }
            }
        }
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-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>
}