@(space: models.ProjectSpace, curationObjects: List[models.CurationObject], prev: Int, next: Int, limit: Int)(implicit user: Option[models.User])
@import play.api.i18n.Messages
@import _root_.util.Formatters._

@main("Staging Area") {
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li><span class="glyphicon glyphicon-hdd"></span>  <a href="@routes.Spaces.getSpace(space.id)" title="@space.name"> @Html(ellipsize(space.name,18))</a></li>
                <li><span class="glyphicon glyphicon-book"></span> Staging Area</li>

            </ol>
            <h1>Staging Area</h1>
        </div>
    </div>
    @util.masonry()
    <div class="row" id="tile-view">
        <div class="col-md-12">
            <div id="masonry">
                @curationObjects.map { curObject =>
                    <div class="post-box col-lg-3 col-md-3 coml-sm-3 col-xs-12">
                        <div class = "panel panel-default" id="@curObject.id-tile">
                            @if(curObject.status == "Submitted") {
                                <div id="@curObject.id" class="panel-heading text-center submitted">
                            } else {
                                @if(curObject.status == "In Preparation") {
                                <div id="@curObject.id" class="panel-heading text-center in-curation">
                                    } else {
                                <div id="@curObject.id" class="panel-heading text-center publish">
                                    }

                            }

                               @curObject.status
                            </div>
                            <div class = "panel-body">
                                <div class="caption break-word">
                                    <h4> <a href="@routes.CurationObjects.getCurationObject( curObject.id)">@curObject.name</a></h4>

                                    @Messages("owner.label"): @curObject.author.fullName
                                    <p>Created: @curObject.created.format("MMM dd, yyyy")</p>
                                    <p class="abstractsummary">@Html(curObject.description.replace("\n","<br>"))</p>
                                </div>
                            </div>
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <span class="glyphicon glyphicon-folder-close" title="@curObject.folders.size folders"></span> @curObject.folders.size
                                    <span class="glyphicon glyphicon-file" title="@curObject.files.size files"></span> @curObject.files.size
                                    <span class="glyphicon glyphicon-list" title="@(curObject.metadataCount) metadata fields"></span> @(curObject.metadataCount)
                                    <button onclick="confirmDeleteResource('curation object','curation object','@(curObject.id)','@(curObject.name.replace("'","&#39;"))',false, '/')"  type="button" class="btn btn-link">
                                        <span class="glyphicon glyphicon-trash" title="@curObject.collections.size collections"></span></button>
                                </li>
                            </ul>
                            @if(curObject.status == "Submitted") {
                                <ul id="ul_@curObject.id" class="list-group">
                                <li class="list-group-item"><button class="btn btn-sm btn-default text-center" onclick="retractCuration('@curObject.id')"><span class="glyphicon glyphicon-fire"></span> Retract Submission</button></li>
                                </ul>
                            }
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
    <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>
    <script src="@routes.Assets.at("javascripts/curationProcess.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/deleteUtils.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/htmlEncodeDecode.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/descriptionSummary.js")" type="text/javascript"></script>
    
    <script>
        $(document).ready(function(){
            updatePage();
        });
        function updatePage() {
            $('#nextlink').attr('href', "@(routes.Spaces.stagingArea(space.id, next, limit))");
            $('#prevlink').attr('href', "@(routes.Spaces.stagingArea(space.id, prev, limit))");
        }
    </script>
}