@(file: models.File, datasets: List[models.Dataset])(implicit user: Option[models.User])

@import api.Permission

<script src="@routes.Assets.at("javascripts/errorRedirect.js")" type="text/javascript"></script>

<div id="datasetsList" class="col-md-12">
@datasets.map { dataset =>
    <div id="ds_@dataset.id" class="row bottom-padding">
        <div class="col-md-2">
        @if(!dataset.thumbnail_id.isEmpty){
            <a href="@(routes.Datasets.dataset(dataset.id))">
                <img class="img-responsive" src="@(routes.Files.thumbnail(UUID(dataset.thumbnail_id.get)))" alt="Thumbnail of @Html(dataset.name)">
            </a>
        }
        </div>
        <div class="col-md-10">
            <div class="caption break-word">
                <a href="@(routes.Datasets.dataset(dataset.id))" id='@dataset.id'>@Html(dataset.name)</a>
            </div>
            <div>
            <!-- If the user can edit the dataset, the elements are enabled, otherwise they are present but disabled to provide consistent UE. -->
                @if(Permission.checkPermission(Permission.EditDataset, ResourceRef(ResourceRef.dataset, dataset.id))) {
                    <a href="#" class="btn btn-link btn-xs" onclick="removeFromDataset('@(dataset.id)','@(dataset.name)',event)" title="Remove from dataset"><span class="glyphicon glyphicon-remove"></span> Remove</a>
                } else {
                    <a href="#" class="btn btn-link btn-xs disabled" onclick="return false;" title="Remove from dataset"><span class="glyphicon glyphicon-remove"></span> Remove</a>
                }
            </div>
        </div>
    </div>
    }
</div>

<script>
        function removeFromDataset(datasetId, datasetName,event){
            var request = jsRoutes.api.Datasets.detachFile(datasetId, "@file.id").ajax({
                   type: 'DELETE'
                 });
            request.done(function (response, textStatus, jqXHR){
                console.log("Response " + response);
                $('#ds_'+datasetId).remove();
                $(event.target.parentNode.parentNode).remove();
            });
            request.fail(function (jqXHR, textStatus, errorThrown){
            	console.error("The following error occured: "+textStatus, errorThrown);
                var errMsg = "You must be logged in to remove a file from a dataset.";                    
                if (!checkErrorAndRedirect(jqXHR, errMsg)) {
                    notify("The file was not removed from the dataset due to : " + errorThrown, "error");
                }
            });
        }

</script>