@(dataset: Dataset, collectionsInside: List[models.Collection], canAddDatasetToCollection: Boolean)(implicit user: Option[models.User])

@import api.Permission
@import play.api.libs.json.Json

<div class="row">
    <div class="col-md-12 col-sm-12 col-lg-12">
        <h4>@Messages("a.contains.b", Messages("collections.title"), Messages("dataset.title"))</h4>
    </div>
</div>

<div class="row bottom-padding">
    <div id="collectionsList" class="col-md-12 col-sm-12 col-lg-12">
        @collectionsInside.map { collection =>
            <div id="col_@collection.id" class="row bottom-padding">
                <div class="col-md-2 col-sm-2 col-lg-2">
                    @if(!collection.thumbnail_id.isEmpty){
                        <a href="@(routes.Collections.collection(collection.id))">
                            <img class="img-responsive fit-in-space" src="@(routes.Files.thumbnail(UUID(collection.thumbnail_id.get)))" alt="Thumbnail of @Html(collection.name)">
                        </a>
                    } else {
                        <a href="@routes.Collections.collection(collection.id)">
                            <span class="smallicon glyphicon glyphicon-th-large"></span>
                        </a>
                    }
                </div>
                <div class="col-md-10 col-sm-10 col-lg-10">
                    <div>
                        <a href="@(routes.Collections.collection(collection.id))" id='@collection.id' class ="collection">@Html(collection.name)</a>
                    </div>
                    <div>
                        @if(collection.datasetCount == 1) {
                            @collection.datasetCount dataset
                        }
                        @if(collection.datasetCount != 1) {
                            @collection.datasetCount datasets
                        }
                        <!-- If the user can edit the collection, the elements are enabled, otherwise they are present but disabled to provide consistent UE. -->
                        @if(Permission.checkPermission(Permission.RemoveResourceFromCollection, ResourceRef(ResourceRef.collection, collection.id))) {
                            | <button onclick="confirmRemoveResourceFromResourceEvent('collection','collection','@(collection.id)','dataset','@(dataset.id)',event)" class="btn btn-link btn-xs" title="Remove the dataset from the collection.">
                                <span class="glyphicon glyphicon-remove"></span> Remove</button>
                        } else {
                            |
                            <div class="inline" title="No permission to remove from the collection">
                                <button class="btn btn-link btn-xs disabled"><span class="glyphicon glyphicon-remove"></span> Remove</button>
                            </div>
                        }
                    </div>
                </div>
            </div>
        }
    </div>
</div>

@if(canAddDatasetToCollection) {
    <div class="form-inline bottom-padding">
        <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="addCollectionBtn" title="Add Dataset to Collection" onclick="addToCollection('@dataset.id')">
                    <span class="glyphicon glyphicon-plus"></span> Add
                </a>
            </span>
        </div>
    </div>
}


<script language="javascript">
    $("#collectionAddSelect").select2({
        theme: "bootstrap",
        placeholder: "Select a collection",
        allowClear: true,
        ajax: {
            url: function(params) {
                return jsRoutes.api.Collections.addDatasetToCollectionOptions("@dataset.id", 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>
<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>