@(collection: models.Collection, redirect: Call)(implicit flash: play.api.mvc.Flash, user: Option[models.User])
@import api.Permission
<div class="panel panel-default collection-panel" id="@collection.id-listitem">
    @if(!collection.thumbnail_id.isEmpty) {
        <div class="row">
            <div class="pull-left col-xs-12">
                <span class="glyphicon glyphicon-th-large collection-background"></span>
            </div>
        </div>
    }
    <div class="panel-body">
        <div class="row">
            <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.toString().substring(5,collection.thumbnail_id.toString().length-1))))" alt="Thumbnail of @Html(collection.name)">
                </a>
            } else {
                <a href="@(routes.Collections.collection(collection.id))">
                    <span class="bigicon glyphicon glyphicon-th-large collection-background"></span>
                </a>
            }
            </div>
            <div class="col-md-10 col-sm-10 col-lg-10">
                <h3><a href="@(routes.Collections.collection(collection.id))">@Html(collection.name)</a></h3>
                <div class="row">
                    <div class="col-md-8 col-lg-8 col-sm-8">
                        <ul class="list-unstyled">
                            <li class="abstractsummary">@Html(collection.description)</li>
                            <li>@collection.created.format("MMM dd, yyyy")</li>
                            <li>
                                <span class="glyphicon glyphicon-briefcase" title="@collection.datasetCount datasets"></span> @collection.datasetCount
                                <span class="glyphicon glyphicon-th-large" title="@collection.childCollectionsCount child collections"></span> @collection.childCollectionsCount
                                @if(user.isDefined) {
                                        <!-- If user can delete, the button is enabled, otherwise the button is present but disabled to provide consistent UE. -->
                                    @if( user.get.id.equals(collection.author.id) || Permission.checkPermission(Permission.DeleteCollection, ResourceRef(ResourceRef.collection, collection.id))){
                                        <button onclick="confirmDeleteResource('collection','collection','@(collection.id)','@(collection.name.replace("'","&#39;"))',false, '@redirect')" class="btn btn-link" title="Delete the collection but not its contents">
                                            <span class="glyphicon glyphicon-trash"></span></button>
                                    } else {
                                        <div class="inline" title="No permission to delete the collection">
                                            <button disabled class="btn btn-link"><span class="glyphicon glyphicon-trash"></span></button>
                                        </div>
                                    }
                                }
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-4">
                        <ul class="list-unstyled">
                            <li>@if(user.isDefined && !collection.spaces.isEmpty){
                                <div id="collection-users">
                                    <a href="@routes.Collections.users(collection.id)" class="btn btn-link ">
                                        <span class="glyphicon glyphicon-hand-right"></span> Users with access to the collection
                                    </a>
                                    <div class="alert-danger inner-item">
                                        @flash.get("error")
                                    </div>
                                </div>
                            }</li>
                            <li>
                            @if(user.isDefined) {
                                @if(!collection.followers.contains(user.get.id)) {
                                    <button id="followButton"
                                        class="btn btn-link"
                                        objectId="@collection.id"
                                        objectName="@collection.name"
                                        objectType="collection">
                                            <span class='glyphicon glyphicon-star'></span> Follow
                                    </button>
                                } else {
                                    <button id="followButton"
                                        class="btn btn-link"
                                        objectId="@collection.id"
                                        objectName="@collection.name"
                                        objectType="collection">
                                            <span class='glyphicon glyphicon-star-empty'></span> Unfollow
                                    </button>
                                }
                            }
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>