@(currentCollection: models.Collection, resourceId: UUID, resourceType: Symbol, parentCollections: List[models.Collection], canAddToParent: Boolean)(implicit user: Option[models.User])
@import api.Permission
@import play.api.libs.json.Json
    <div class="row bottom-padding">
        <div class="col-md-12">
            <h4>Parent collections</h4>
        </div>
    </div>

    <div class="row">
        <div id="collectionsList" class="col-md-12">
        @parentCollections.map { p =>
            <div id="col_@p.id" class="row bottom-padding">
                <div class="col-xs-2">
                    <a href="@routes.Collections.collection(p.id)">
                        <span class="smallicon glyphicon glyphicon-th-large"></span>
                    </a>
                </div>
                <div class="col-xs-10">
                    <div>
                        <a href="@routes.Collections.collection(p.id)" id='@p.id' class ="collection">@Html(p.name)</a>
                    </div>
                    <div>
                    @if(p.childCollectionsCount ==1){
                        1 collection
                    } else {
                        @p.childCollectionsCount collections
                    }
                    </div>
                </div>
            </div>
        }
        </div>
    </div>



    <!--The owner of the collection and users with the AddResourceToCollection permission in at least one of the spaces the collection is part of can add a collection to a parent collection. -->
    @if(canAddToParent) {
        <div class="form-inline">
            <div class="input-group input-group-sm col-md-8">
                <select id="collectionAddSelect" class="form-control add-resource">
                </select>
                    <span class="input-group-btn">
                    <a href="#" class="btn btn-default btn-large" id="addParentBtn" title="Add collection to parent" onclick="addCollectionToParentCollection('@currentCollection.id',event)">
                        <span class="glyphicon glyphicon-plus"></span> Add
                    </a>
                    </span>

            </div>
        </div>
    }


<link rel="stylesheet" href="@routes.Assets.at("stylesheets/chosen.css")">
<script src="@routes.Assets.at("javascripts/chosen.jquery.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/collectionModify.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/datasets/collections.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/deleteUtils.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/collectionChildCollectionsList.js")" type="text/javascript"></script>

<script language="javascript">
    $("#collectionAddSelect").select2({
        theme: "bootstrap",
        placeholder: "Select a Collection",
        allowClear: true,
        ajax: {
            url: function(params) {
                return jsRoutes.api.Collections.listPossibleParents( '@resourceId', params.term,null, 5).url;
            },
            data: function(params) {
                return { title: params.term };
            },
            processResults: function(data, page) {
                return {results: data.filter(function(x) {
                    var ids = $('.collection').map(function() {
                        return $(this).attr('id');
                    });
                    return $.inArray(x["id"], ids) == -1;
                }).map(function(x) {
                    return {
                        text: x["collectionname"],
                        id: x["id"]
                    }
                })};
            }
        }
    });

</script>