@(metadata: List[models.MetadataDefinition], spaceId: Option[UUID], spaceName: Option[String])(implicit user: Option[models.User])

@import play.api.i18n.Messages
@import _root_.util.Formatters._

@main("Metadata Definitions") {
    <script src="@routes.Assets.at("javascripts/metadata/manageDefinitions.js")" type="text/javascript"></script>
	<script>
        $(document).ready(function() {
            $("#defined_by").on('change', function() {
                var value = $(this).find(":selected").val();
                if (value === "list") {
                    $("#defined_by_url").hide();
                    $("#definitions_url").val('');
                    $("#defined_by_list").show();
                } else if (value === "url") {
                    $("#defined_by_list").hide();
                    $("#definitions_list").val('');
                    $("#defined_by_url").show();
                }
            });
            $("#type").change(function() {
                var definedBy = $("#defined_by");
                var definitionsList = $("#definitions_list");
                var definitions = $("#definitions_url");
                var validateButton = $("#validateButton");
                var queryParameter = $("#query_parameter");
                var queryParameterValue = $("#query_parameter_value");
                if ($(this).val() == "string") {
                    definedBy.attr("disabled", true);
                    definitionsList.attr("disabled", true);
                    definitions.attr("disabled", true);
                    validateButton.attr("disabled", true);
                    queryParameter.attr("disabled", true);
                    queryParameterValue.attr("disabled", true);
                } else if ($(this).val() == "list" || $(this).val() == "annotation") {
                    definedBy.removeAttr("disabled");
                    definitions.removeAttr("disabled");
                    definitionsList.removeAttr("disabled");
                    validateButton.removeAttr("disabled");
                    queryParameter.attr("disabled", true);
                    queryParameterValue.attr("disabled", true);
                } else if ($(this).val() == "wkt") {
                    definedBy.attr("disabled", true);
                    definitionsList.attr("disabled", true);
                    definitions.attr("disabled", true);
                    validateButton.attr("disabled", true);
                    queryParameter.attr("disabled", true);
                    queryParameterValue.attr("disabled", true);
                } else {
                    definedBy.removeAttr("disabled");
                    definitionsList.removeAttr("disabled");
                    definitions.removeAttr("disabled");
                    validateButton.removeAttr("disabled");
                    queryParameter.removeAttr("disabled");
                    queryParameterValue.removeAttr("disabled");
                }
            });
            $(function () {
                $('[data-toggle="popover"]').popover({
                    trigger: 'focus'
                })
            });

            $("#validateButton").click(function(e){
                e.preventDefault();
                // get the value of this metadata definition url from the form
                var definitionsValue = $("#definitions_url").val();
                // get a reference to the form boxes for a query param and value in case this is a queryable list
                var queryParam = $("#query_parameter");
                var queryParamValue = $("#query_parameter_value");
                // set a variable where we will store the query parameter key and value if it is filled out
                var queryString;
                // if this is a queryable list, we will enable the user to add a query parameter that will be registered with the definition
                // we will also allow them to submit a sample value for the query parameter so they can test that the url works
                if (!queryParam.attr("disabled") && queryParam.val() && queryParamValue.val()) {
                    var paramString = {};
                    paramString[queryParam.val()] = queryParamValue.val();
                    queryString = $.param(paramString);
                }
                if (queryString) {
                    definitionsValue = definitionsValue + "?" + queryString;
                }
                if (definitionsValue) {
                    var request = $.ajax({
                        url: definitionsValue,
                        dataType: 'jsonp',
                        timeout: 1500,
                        error: function() {
                            $("#validationResults").html(
                                '<div class="alert alert-danger fade in">' +
                                '<a href="#" class="close" data-dismiss="alert">&times;</a>' +
                                '<strong>Error!</strong> Data was not found at the URL!</div>');
                        }
                    });

                    request.done(function(data, textStatus) {
                        // TODO: validation of the results would require either knowing which element
                        // to look for in the response, or requiring all API's to use a standard response structure.
                        // For now, if we got a successful response from the GET request, we'll proceed
                        var linkText;
                        if (data && data.length) {
                            linkText = data.length + " items";
                        } else {
                            linkText = "View";
                        }
                        $("#validationResults").html(
                            '<div class="alert alert-success fade in">' +
                            '<a href="#" class="close" data-dismiss="alert">&times;</a>' +
                            '<strong>Success!</strong> Data was found at the URL: (<a href=' +
                            definitionsValue + ' target="_blank">' + linkText + '</a>)</div>');
                    });
                }
            });

            $("#addDefinition").submit(function(e){
                e.preventDefault();
                var data = {};
                $(this.elements).each(function(index, element){
                    var value = $(element).val();
                    if (value) {
                        data[$(element).attr('id')] = value;
                    }
                });
                if (data['query_parameter_value']) delete data['query_parameter_value'];
                if (data.type == "list" || data.type == "listjquery" || data.type == "scientific_variable"
                        || data.type == "listgeocode" || data.type == "annotation") {
                    var vocabulary_id = $("#vocabulary_id").val();
                    if (data.definitions_url) {
                        addDefinition(data, window.location.href, "@spaceId");

                        // FIXME: How can we make sure this isn't used anywhere else before deleting
                        // Check for an existing vocabulary id
                        if (vocabulary_id) {
                            // Delete unused vocabulary
                            // deleteVocabulary(data.vocabulary_id);
                        }
                    } else if (data.definitions_list) {
                        // Parse text list into a JSON array of strings before sending
                        var terms = data.definitions_list.split(/\r?\n/g);
                        var promise = null;
                        var origin = getHostPrefixFromUrl(window.location.href);

                        // Check for an existing vocabulary id
                        if (vocabulary_id) {
                            // Update existing vocabulary with new list of terms
                            promise = updateVocabulary(vocabulary_id, terms);
                        } else {
                            // Create a new vocabulary from the list of terms
                            promise = createVocabulary(terms);
                        }

                        promise.then(function(vocab) {
                            // Replace our literal values with a URL
                            delete data.definitions_list;
                            data.definitions_url = origin + vocab.url;

                            // Save vocabulary ID and new URL with this metadata definition
                            data.vocabulary_id = vocab.id;
                            addDefinition(data, window.location.href, "@spaceId");
                        });
                    } else {
                        $("#validationResults").html(
                                '<div class="alert alert-danger fade in">' +
                                '<a href="#" class="close" data-dismiss="alert">&times;</a>' +
                                '<strong>Error!</strong> Definitions or URL required for Lists</div>');

                        return false;
                    }
                } else {
                    addDefinition(data, window.location.href, "@spaceId");
                }
            });

             $('.delete-definition').unbind().on('click', function(){
                        var delete_object = $(this);
                        var request = jsRoutes.api.Metadata.deleteDefinition(this.id).ajax({
                            type: 'DELETE'
                        });

                        request.done(function (response, textStatus, jqXHR) {
                            console.log("success");
                            delete_object.closest("TR").remove();

                            // FIXME: How can we make sure this isn't used anywhere else before deleting
                            var vocabulary_id = getVocabularyIdFromUrl(delete_object.url);
                            if (vocabulary_id) {
                                // deleteVocabulary(vocabulary_id);
                            }
                        });

                        request.fail(function (jqXHR, textStatus, errorThrown){
                            console.error("The following error occured: " + textStatus, errorThrown);
                            var errMsg = "You must be logged in to delete metadata definition";
                            if (!checkErrorAndRedirect(jqXHR, errMsg)) {
                              notify("Metadata definition was not removed due to : " + errorThrown, "error");
                            }
                        });
                     });
        });

    </script>

	<div class="page-header">


        @(spaceName, spaceId) match {
            case (Some(space_name), Some(space_id)) => {
                <ol class="breadcrumb">
                    <li><span class="glyphicon glyphicon-hdd"></span><a href="@routes.Spaces.getSpace(space_id)" title="@space_name"> @Html(ellipsize(space_name, 18))</a></li>
                    <li><span class="glyphicon glyphicon-list"></span> Metadata Definitions</li>
                </ol>
                <h1>Metadata Terms & Definitions</h1>

                <p> The following metadata terms will be available for this @Messages("space.title")'s @Messages("datasets.title") and files. To add a new term scroll to the bottom of the page.</p>
            }
            case (_, _) => {
                <h1>Metadata Terms & Definitions</h1>
                <p>The following metadata definitions will be available in @Messages("datasets.title")' and files that are not in a @Messages("space.title")', and inherited by new @Messages("spaces.title").</p>
                }
        }

	</div>
	@if(metadata.size == 0) {
	<div class="row">
		<div class="col-md-12">
			No metadata present.
		</div>
	</div>
	}
	@if(metadata.size > 0) {
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Label <a tabindex="0" role="button" aria-hidden="true" data-toggle="popover" title="Label" data-content="A short label or name."><span class="glyphicon glyphicon-info-sign"></span></a></th>
                        <th>Description <a tabindex="0" role="button" aria-hidden="true" data-toggle="popover" title="Description" data-content="A long description."><span class="glyphicon glyphicon-info-sign"></span></a></th>
                        <th>URI <a tabindex="0" role="button" aria-hidden="true" data-toggle="popover" title="URI" data-content="A unique URI where this metadata is defined. This is not queried or used to populate metadata values, only for reference."><span class="glyphicon glyphicon-info-sign"></span></a></th>
                        <th>Type <a tabindex="0" role="button" aria-hidden="true" data-toggle="popover" title="Metadata Type" data-html=true data-content="Currently supported types:<br /><ul><li>String: this is free-form, plain-text field.</li><li>List: an array or list of metadata options that can be retrieved from a URL. The list type requires you to define a Definitions URL that will return the available metadata options in JSON format.</li><li>Queryable List: similar to list, except that you can also pass a query parameter to filter the list at the Definitions URL.</li><li>Location: also a queryable list, but it expects the response to contain a latitude and longitude.</li><li>Annotation: mapping between a String type and a List type.</li></ul>"><span class="glyphicon glyphicon-info-sign"></span></a></th>
                        <th>Definitions <a tabindex="0" role="button" data-toggle="popover" title="Metadata Definitions / URL" data-content="This should correspond to a list of values that the user can select from as possible options for this metadata definition." aria-hidden="true" ><span class="glyphicon glyphicon-info-sign"></span></a></th>
                        <th>Query Parameter <a tabindex="0" role="button" data-toggle="popover" title="Query Parameter" data-content="Some list types support filtering the data by use of a query parameter. Example: example.com?searchterm=value" aria-hidden="true" ><span class="glyphicon glyphicon-info-sign"></span></a></th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @for(m <- metadata) {
                        <tr>
                            <td class="text-wrap" style="max-width:10vw">
                                @((m.json \ "label").asOpt[String].getOrElse(""))
                            </td>
                            <td class="text-wrap" style="max-width:20vw">
                                @((m.json \ "description").asOpt[String].getOrElse(""))
                            </td>
                            <td class="text-wrap no-hyphens" style="max-width:20vw">
                                @((m.json \ "uri").asOpt[String].getOrElse(""))
                            </td>
                            <td class="text-wrap" style="max-width:15vw">
                                @((m.json \ "type").asOpt[String].getOrElse("")) match {
                                    case "string" => {String}
                                    case "list" => {List}
                                    case "listjquery" => {Queryable List}
                                    case "scientific_variable" => {Scientific Variable}
                                    case "annotation" => {Annotation}
                                    case "datetime" => {Date and Time}
                                    case "listgeocode" => {Location}
                                    case "wkt" => {WKT Location}
                                    case _ => {Error: unrecognized type}
                                }
                            </td>
                            <td class="text-wrap no-hyphens" style="max-width:20vw">
                                @((m.json \ "definitions_url").asOpt[String].getOrElse(""))
                            </td>
                            <td class="text-wrap" style="max-width:10vw">
                                @((m.json \ "query_parameter").asOpt[String].getOrElse(""))
                            </td>
                            <td style="max-width:10vw"><a href="#addDefinition" onclick="editDefinition('@(m.id)');">Edit</a>
                                / <a id="@m.id" href="#" title="Delete metadata definition" class="delete-definition">Delete</a>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
	}

    <hr/>
    <br/>

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <span class="definitionAction">Add</span> a Metadata Term <span class="caret"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    <form id="addDefinition" class="form-horizontal">
                        <div class="form-group has-feedback">
                            <div class="col-md-3">
                                <label for="label">Label </label>
                                <a tabindex="0" role="button" aria-hidden="true" data-toggle="popover" title="Label (required)"
                                    data-content="A short label or name.">
                                <span class="glyphicon glyphicon-info-sign"></span></a></div>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="label" placeholder="Label" required />
                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <div class="col-md-3">
                                <label for="description">Description </label>
                                <a tabindex="0" role="button" aria-hidden="true" data-toggle="popover" title="Description (Required)"
                                    data-content="A longer description.">
                                    <span class="glyphicon glyphicon-info-sign"></span></a></div>
                            <div class="col-sm-9">
                                <textarea rows="3" class="form-control" id="description" placeholder="Description" required></textarea>
                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div  class="col-sm-3"> <label for="uri">URI </label> <a tabindex="0" role="button" aria-hidden="true" data-toggle="popover" title="URI" data-content="@Messages("metadata.uri", Messages("space.title"))" data-original-title="URI"><span class="glyphicon glyphicon-info-sign"></span></a></div>
                            <div class="col-sm-9">
                                <input type="url" class="form-control" id="uri" placeholder="http://" />
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-sm-3"><label for="type">Type </label> <a tabindex="0" role="button" aria-hidden="true" data-toggle="popover" title="" data-html="true" data-content="Currently supported types:<br /><ul><li>String: this is free-form, plain-text field.</li><li>List: an array or list of metadata options that can be retrieved from a URL. The list type requires you to define a Definitions URL that will return the available metadata options in JSON format.</li><li>Queryable List: similar to list, except that you can also pass a query parameter to filter the list at the Definitions URL.</li><li>Location: also a queryable list, but it expects the response to contain a latitude and longitude.</li><li>Annotation: mapping between a String type and a List type.</li></ul>" data-original-title="Metadata Type (required)"><span class="glyphicon glyphicon-info-sign"></span></a></div>
                            <div class="col-sm-4">
                                <select name="type" id="type" class="form-control" required>
                                    <option value="string">String</option>
                                    <option value="list">List</option>
                                    <option value="listjquery">Queryable List</option>
                                    <option value="listgeocode">Location</option>
                                    <option value="wkt">WKT Location</option>
                                    <option value="scientific_variable">Scientific Variable</option>
                                    <option value="annotation">Annotation</option>
                                    <option value="datetime">Date and Time</option>
                                </select>
                            </div>
                        </div>
                        <input type="hidden" class="form-control" id="vocabulary_id" name="vocabulary_id" />
                        <div class="form-group">
                            <div class="col-sm-3"><label for="type">Defined By </label> <a tabindex="0" role="button" aria-hidden="true" data-toggle="popover" title="" data-html="true" data-content="Currently supported definition types:<br /><ul><li>URL: a URL resolving to a JSON array of accepted metadata values.</li><li>Literal: a JSON array of accepted metadata values.</li></ul>" data-original-title="Defined By (required)"><span class="glyphicon glyphicon-info-sign"></span></a></div>
                            <div class="col-sm-4">
                                <select name="defined_by" id="defined_by" class="form-control" required disabled>
                                    <option value="url">URL</option>
                                    <option value="list">Literal</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="defined_by_list" style="display:none;">
                            <div class="col-sm-3"><label for="definitions_list">Literal Definitions</label> <a tabindex="0" role="button" data-toggle="popover" title="Definitions List" data-content="This List should contain a list of one value per line that the user can select from as possible options for this metadata definition." aria-hidden="true" ><span class="glyphicon glyphicon-info-sign"></span></a></div>
                            <div class="col-sm-9">
                                <textarea class="form-control" id="definitions_list" placeholder="Enter one value per line..." ></textarea>
                            </div>
                        </div>
                        <div class="form-group" id="defined_by_url">
                            <div class="col-sm-3"><label for="definitions_url">Definitions URL</label> <a tabindex="0" role="button" data-toggle="popover" title="Metadata Definitions URL" data-content="This URL should return a list of values that the user can select from as possible options for this metadata definition." aria-hidden="true" ><span class="glyphicon glyphicon-info-sign"></span></a></div>
                            <div class="col-sm-7">
                                <input type="url" class="form-control" id="definitions_url" placeholder="http://" disabled />
                            </div>
                            <div class="col-sm-2">
                                <button class="btn btn-default" id="validateButton" disabled><span class="glyphicon glyphicon-ok"></span> Validate URL</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3"><label for="query_parameter">Query Parameter </label> <a tabindex="0" role="button" data-toggle="popover" title="Query Parameter" data-content="Some list types support filtering the data by use of a query parameter. Example: example.com?searchterm=value" aria-hidden="true" ><span class="glyphicon glyphicon-info-sign"></span></a></div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="query_parameter" placeholder="term" disabled />
                            </div>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="query_parameter_value" placeholder="value" disabled />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-8" id="validationResults"></div>
                        </div>
                        <hr/>
                        <a href="#" class="btn btn-default pull-left" id="cancelButton" onclick="reset(this)" style="display:none;"><span class="glyphicon glyphicon-remove"></span> Cancel</a>
                        <button type="submit" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-plus"></span><span class="definitionActionButton"> Add</span></button>

                    </form>
                </div>
            </div>
        </div>
    </div>
}