@(title: String = "Create")(implicit user: Option[models.User])

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

@main(title) {
    <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>

        <div id="instruments">
                <!-- additional instruments will be added here as the "Add Instrument" button is clicked -->
        </div>

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

        <button type="submit" class="btn btn-primary submit" id="formSubmit"><span class="glyphicon glyphicon-send"></span> Create</button>

    </div>

}

<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/handlebars-v1.3.0.js")"></script>
<script src="@routes.Assets.at("javascripts/handlebars-loader.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/lib/jquery.serializejson.min.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")");
        $("#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")");
        $("#instruments").append(instrumentTemplate(data));
    };

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

        var sensorJson = {
            sensorsTitle: sensorsTitle,
            sensorTitle: sensorTitle,
            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"
            }
        };
        insertSensorForm(sensorJson);

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