@(dataset: Dataset)(implicit user: Option[models.User])

@import api.Permission
@import play.api.Play.current

<div class="row">
    <div class="col-md-12">
        <h4>Tags</h4>
    </div>
</div>

<!-- If the user can view tags for this dataset, they are displayed, the area is present but empty to provide a consistent UE. -->
@if(Permission.checkPermission(Permission.ViewTags, ResourceRef(ResourceRef.dataset, dataset.id))) {
    <div class="row bottom-padding">
        <div id ="tagList" class="col-md-12">
        <!-- The data-id attribute is needed since a) the removeTag for some reason is based off the tag name (text), which is what the id attribute is
             and b) identifiying elements by the tag text can sometimes break, especially in the special cases where there are characters that need encoding.
        -->
        @dataset.tags.map { tag =>
            <div id='@tag.name' class="tag" data-id="@tag.id">
                <a href="@routes.Tags.search(tag.name)">@Html(tag.name)</a>
                <!-- If the user can delete the tag, the link is enabled, otherwise the link is not present to save space. -->
                @if(Permission.checkPermission(Permission.DeleteTag, ResourceRef(ResourceRef.dataset, dataset.id))) {
                    <a href="#"> <span id="@tag.name" data-id="@tag.id" class="glyphicon glyphicon-remove tag-delete"></span></a>
                }
            </div>
        }
        </div>
    </div>
}

<div class="row bottom-padding">
    <div class="col-md-12">
        <!-- If the user can add tags to the dataset, the form is enabled, otherwise the form is present but disabled to provide consistent UE. -->
        @if(Permission.checkPermission(Permission.AddTag, ResourceRef(ResourceRef.dataset, dataset.id))) {
            <form class="form-inline">
                <div class="input-group input-group-sm">
                    <input maxlength="@play.api.Play.configuration.getInt("clowder.tagLength").getOrElse(100)" type="text" id="tagField" class="form-control add-resource">
                    <span class="input-group-btn">
                        <button class="btn btn-default btn-large" id="tagB" title="Add Tag">
                            <span class="glyphicon glyphicon-tag"></span> Tag
                        </button>
                    </span>
                </div>
            </form>
        } else {
            <form class="form-inline">
                <div class="input-group input-group-sm">
                    <input disabled type="text" id="tagField" class="form-control add-resource">
                    <span class="input-group-btn">
                        <button disabled class="btn btn-default btn-large" id="tagB" title="Add Tag">
                            <span class="glyphicon glyphicon-tag"></span> Tag
                        </button>
                    </span>
                </div>
            </form>
        }
    </div>
</div>

@if(user.isEmpty) {
    <script language="javascript">
    window[ "userDefined" ] = false ;
    </script>
}

@if(user.isDefined) {
    <script language="javascript">
        window["userDefined"] = true;
    </script>
}

<script language="javascript">
    //The removeTag code is almost exactly the same as that in files.scala.html. It should probably be unified.
    function removeTag(){
        var tagId = $(this).attr("id");
        console.log("Removing tag " + tagId);
        //The data-id attribute is needed since a) the removeTag for some reason is based off the tag name (text), which is what the id attribute is
        //and b) identifiying elements by the tag text can sometimes break, especially in the special cases where there are characters that need encoding.
        //
        //The real question is since that tags have UUIDs, why aren't they simply removed in that manner. In the add, the dom element isn't added until success
        //so the ID could be returned there and added into the elements as needed.
        var tagDataId = $(this).attr("data-id");
        console.log("data-id to remove is " + tagDataId);

        var request = jsRoutes.api.Datasets.removeTags('@dataset.id').ajax({
            data: JSON.stringify({"tags":[tagId]}),
            type: 'POST',
            contentType: "application/json"
        });

        request.done(function (response, textStatus, jqXHR) {
            console.log("Response " + textStatus);
            $("[data-id=" + tagDataId + "].tag").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 tag from a dataset.";
            if (!checkErrorAndRedirect(jqXHR, errMsg)) {
                notify("The tag was not removed from the dataset due to : " + errorThrown, "error");
            }
        });

        return false;
    }

    $(function() {

        var tmpId = 1;

        $("#tagList").find(".glyphicon-remove").click(removeTag);

        $('#tagB').click(function() {
            var tag = $('#tagField').val();
            tag = htmlEncode(tag);

            var isTagPresent = false;
            $("#tagList").children("div").each(function (index, tagLi) {
                if($(tagLi).attr("name")===tag){
                    isTagPresent = true;
                }
            });

            if (tag !== "" && isTagPresent != true) {
                var tagList = tag.split(','); 
                console.log("submitting tag " + tag);
                var request = jsRoutes.api.Datasets.addTags('@dataset.id').ajax({
                    data: JSON.stringify({"tags":tagList}),
                    type: 'POST',
                    contentType: "application/json"
                });

                request.done(function (response, textStatus, jqXHR){
                    console.log("Response " + response);
                    for (var i = 0; i < tagList.length; i++) {
                        var aTag=tagList[i].trim();
                        var url = jsRoutes.controllers.Tags.search(aTag).url;
                        //The data-id attribute is needed since a) the removeTag for some reason is based off the tag name (text), which is what the id attribute is
                        //and b) identifiying elements by the tag text can sometimes break, especially in the special cases where there are characters that need encoding.
                        //
                        //The real question is since that tags have UUIDs, why aren't they simply removed in that manner. In the add, the dom element isn't added until success
                        //so the ID could be returned there and added into the elements as needed.
                        $newTag = $("<div id='"+htmlEncode(aTag)+"' class='tag' data-id='newId"+tmpId+"'><a href='" + url + "'>" + aTag + "</a><a href='#'> <span id='" + htmlEncode(aTag) +"' data-id='newId" + tmpId + "' class='glyphicon glyphicon-remove tag-delete'></span></a></div>").appendTo('#tagList');
                        tmpId++;
                        $newTag.find(".glyphicon-remove").click(removeTag);
                        }
                    $('#tagField').val("");
                    
                });

                request.fail(function (jqXHR, textStatus, errorThrown){
                    console.error("The following error occured: "+textStatus, errorThrown);
                    var errMsg = "You must be logged in to add a tag to a dataset.";
                    if (!checkErrorAndRedirect(jqXHR, errMsg)) {
                        notify("The tag was not added to the dataset due to : " + errorThrown, "error");
                    }
                });
                return false;
            }
        });

        $('#tagField').keypress(function (e) {
            if (e.which == 13) {
                console.log("enter");
                $('#tagB').click();
                return false;
            }
        });

    });
</script>