@(sensor: play.api.libs.json.JsValue, streams: List[play.api.libs.json.JsValue], definitions: List[models.MetadataDefinition])(implicit user: Option[models.User])
@import play.api.libs.json.Json

@import helper._
@implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.f) }
@import services._

@main("Edit") {
    <link rel="stylesheet" href="@routes.Assets.at("stylesheets/leaflet.css")">
    <div class="container">
        <div class="page-header">
            <h1>@(AppConfiguration.getSensorTitle) Information</h1>
        </div>

        <div id="sensor-form"></div>

        <br />
        <div id="instruments"></div>

        <div class="btn btn-primary" id="addInstrument" style="..."><span class="glyphicon glyphicon-plus"></span> Add Instrument</div>

        <button type="submit" class="btn btn-default submit" id="cancelSubmit"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
        <button type="submit" class="btn btn-primary submit" id="formSubmit"><span class="glyphicon glyphicon-send"></span> Save</button>



        </div>

}

<link rel="stylesheet" href="@routes.Assets.at("stylesheets/jquery-ui-timepicker-addon.css")">
<link rel="stylesheet" href="@routes.Assets.at("stylesheets/chosen.css")">
<script src="@routes.Assets.at("javascripts/leaflet.js")"></script>
<script src="@routes.Assets.at("javascripts/jquery.validate.js")"></script>
<script src="@routes.Assets.at("javascripts/chosen.jquery.js")"></script>
<script src="@routes.Assets.at("javascripts/lib/handlebars-v4.0.5.min.js")"></script>
<script src="@routes.Assets.at("javascripts/handlebars-loader.js")"></script>
<script src="@routes.Assets.at("javascripts/lib/jquery.serializejson.min.js")"></script>
<script src="@routes.Assets.at("javascripts/jquery-ui-timepicker-addon.js")"></script>
<script src="@routes.Assets.at("javascripts/metadata/definitionDropdowns.js")"></script>
<script src="@routes.Assets.at("javascripts/geostreams/sensorStreamEdit.js")"></script>

<script type="text/javascript">
    Handlebars.registerHelper('select', function( value, options ){
        var $el = $('<select />').html( options.fn(this) );
        $el.find('[value="' + value + '"]').attr({'selected':'selected'});
        return $el.html();
    });

    Handlebars.registerHelper('slugify', function(string) {
        return string.replace(/[\s]+/g, "-").replace(/[^\w|-]+/g, "").toLowerCase();
    });

    var insertSensorForm = function(data) {
        var sensorTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/sensors/sensor-form")");
        // Convert GeoJSON object to json string, so Handlebars template doesn't render as [Object object]
        data["geometry"] = JSON.stringify(data["geometry"])
        $("#sensor-form").append(sensorTemplate(data));

        $("#sensorLocation").on('keyup', function() {
            updateMap()
        });
    };

    var insertInstrumentForm = function(data) {
        var parametersTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/sensors/parameters-form")");
        Handlebars.registerPartial('parameters', parametersTemplate);
        var instrumentTemplate = Handlebars.getTemplate("@routes.Assets.at("templates/sensors/stream-form")");
        // Convert GeoJSON object to json string, so Handlebars template doesn't render as [Object object]
        data["geometry"] = JSON.stringify(data["geometry"])
        $("#instruments").append(instrumentTemplate(data));
    };

    $(document).ready(function() {
        var sensorsTitle = "@(AppConfiguration.getSensorsTitle)";
        var sensorTitle = "@(AppConfiguration.getSensorTitle)";

        var sensorJson = @Html(Json.stringify(Json.toJson(sensor)));
        sensorJson.sensorsTitle = sensorsTitle;
        sensorJson.sensorTitle = sensorTitle;
        sensorJson.sensorTypes = {
            1: "1 Instrument, 1 Measurement, No Depth, No Time-Series",
            2: "1 Instrument, 1 Measurement, No Depth, Yes Time-Series",
            3: "1 Instrument, Many Measurements, No Depth, No Time-Series",
            4: "1 Instrument, Many Measurements, No Depth, Yes Time-Series",
            5: "Many Instruments, 1 Measurement, Many Depths, Yes Time-Series",
            6: "Many Instruments, Many Measurements, Many Depths, Yes Time-Series",
            7: "1 Instrument, Many Measurements, One Depth, Yes Time-Series"
        };
        sensorJson.permalink = jsRoutes.api.Geostreams.getSensor(sensorJson.id).url;
        insertSensorForm(sensorJson);

        @streams.map { stream =>
            var streamJson = @Html(Json.stringify(Json.toJson(stream)));
            streamJson.sensorsTitle = sensorsTitle;
            streamJson.sensorTitle = sensorTitle;
            streamJson.formType = "edit";
            streamJson.permalink = jsRoutes.api.Geostreams.getStream(streamJson.id).url;
            streamJson.metadataDefinitions = @(Html(Json.stringify(Json.toJson(definitions))));
            insertInstrumentForm(streamJson);
        }

        $(".controlled-vocabulary-value").each(function(index, item) {
            var targetID = $(item).data('id');
            var group = $(item).data('group');
            var definitionElement = $('select[data-id="' + targetID + '"][data-group="' + group + '"]');

            $(definitionElement).chosen({
                add_search_option: true,
                no_results_text: "Not found. Press enter to add ",
                search_contains: true,
                width: "100%",
                placeholder_text_single: "Select field"
            });

            var setupAutocomplete = function(selectElement, inputElement) {
                var selectedOption = $(selectElement).find(':selected');
                var definition = {
                    uri: selectedOption.val(),
                    type: selectedOption.data('type'),
                    definitions_url: selectedOption.data('definitions_url'),
                    query_parameter: selectedOption.data('query_parameter')
                };
                registerMDAutocomplete(inputElement, definition, selectElement);
            };

            $(definitionElement).on('change', function(){
                setupAutocomplete(this, item);
            });

            setupAutocomplete(definitionElement, item);
        });

    });
</script>
<script src="@routes.Assets.at("javascripts/geostreams/updateMap.js")"></script>