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

@import api.Permission

@if(user.isDefined) {
<a class=" accordion-toggle collapsed" data-toggle="collapse"
data-parent="#accordion7" href="#collapseSeven" id="editabout"
title="Edit Dataset Information"><span class="glyphicon glyphicon-chevron-down"></span> Edit Info</a>
<div id="collapseSeven" class="accordion-body collapse">
    <div class="panel panel-info">
        <div class="panel-body">
        <!-- 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))) {
            <form class="form-inline" id="form2">
                <table>
                    <tr>
                        <td style="width: 30%; vertical-align:top;">Name: </td>
                        <td>
                            <textarea cols=30 rows=4 type="text" id="editname">@Html(dataset.name.replace("<br>", "\n"))</textarea>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 30%; vertical-align:top;">Description: </td>
                        <td>
                            <textarea cols=30 rows=4 type="text" id="editdesc">@Html(dataset.description.replace("<br>", "\n"))</textarea>
                        </td>
                    </tr>
                </table>

                <button class="btn btn-primary" onclick="return updateAboutData('@dataset.id.stringify');"
                title="Update Information"><span class="glyphicon glyphicon-ok"></span> Submit</button>
                <button class="btn btn-default" onclick="return closeAboutEdit();"
                title="Close Editor"><span class="glyphicon glyphicon-eject"></span> Close</button>
            </form>
        } else {
            <form class="form-inline" id="form2">
                <table>
                    <tr>
                        <td style="width: 30%; vertical-align:top;">Name: </td>
                        <td>
                            <textarea disabled cols=30 rows=4 type="text" id="editname">@dataset.name</textarea>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 30%; vertical-align:top;">Description: </td>
                        <td>
                            <textarea disabled cols=30 rows=4 type="text" id="editdesc">@dataset.description</textarea>
                        </td>
                    </tr>
                </table>

                <button disabled class="btn btn-primary" onclick="return updateAboutData('@dataset.id.stringify');"
                title="Update Information"><span class="glyphicon glyphicon-ok"></span> Submit</button>
                <button disabled class="btn btn-default" onclick="return closeAboutEdit();"
                title="Close Editor"><span class="glyphicon glyphicon-eject"></span> Close</button>
            </form>
        }
        </div>
    </div>
</div>
<script type="text/javascript" language="javascript">

function closeAboutEdit() {
    //Reset the data to the current values
    var text = $("#aboutdesc").html().trim();
    text = text.replace(/<br>/g, "\n");
    $("#editdesc").val(htmlDecode(text));
    text = $("#datasettitle").html().trim();
    text = text.replace(/<br>/g, "\n");
    $("#editname").val(htmlDecode(text));

    //Close the edit form
    $("#editabout").addClass('collapsed');
    $("#collapseSeven").collapse('toggle');
    return false;
}

function updateAboutData(datasetId) {
    var description = $("#editdesc").val();
    var name = $("#editname").val();
    var encName = htmlEncode(name);
    var encDescription = htmlEncode(description);
    var jsonData = JSON.stringify({"description":encDescription, "name":encName});

    var request = jsRoutes.api.Datasets.updateInformation(datasetId).ajax({
        data: jsonData,
        type: 'POST',
        contentType: "application/json"
    });

    request.done(function (response, textStatus, jqXHR){
        ///console.log("Response " + response);
        //Sucessful update of the DB - update the interface

        $("#aboutdesc").html(encDescription.replace(/\n/g, "<br>"));
        $("#datasettitle").html(encName.replace(/\n/g, "<br>"));

        closeAboutEdit();
    });

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

    return false;
}
</script>

<script src="@routes.Assets.at("javascripts/htmlEncodeDecode.js")" language="javascript"></script>
<!-- End dataset information elements -->
}