<div class='row'>
    <div class='col-xs-12'>
        <div style="height:300px"
            id="chart-overview"
            data-chart="chart"
            data-nodename1="multisensor.an?0?val"
            data-datalabel1="Analog ?0? Value"
            data-nodename2="multisensor.an?1?val"
            data-datalabel2="Analog ?1? Value"
            <% if (channels["multisensor.an?0?ispond"].value === "true"){ %>
                data-nodename3="multisensor.pond?0?volume"
                data-datalabel3="Pond ?0? Volume"
            <% } %>
            <% if (channels["multisensor.an?1?ispond"].value === "true"){ %>
                data-nodename4="multisensor.pond?1?volume"
                data-datalabel4="Pond ?1? Volume"
            <% } %>

            data-daysofhistory="2"
            data-chartlabel="Last 48 Hours"
            data-ylabel=""
            data-xlabel="Date"
            data-units="">
        </div>
    </div>
</div>


<div class="row" style="margin-bottom: 10px">
    <div class="col-md-6 align-center">
        <h2>Input ?0?</h2>
        <% if (channels["multisensor.an?0?ispond"].value === "true"){ %>
            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input?0?_cfg.isPondLevel', 'value': 0}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-danger animated setstatic">Disable Pond Volume</a>
        <% } else { %>

            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input?0?_cfg.isPondLevel', 'value': 1}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-success animated setstatic">Enable Pond Volume</a>
        <% } %>

        <hr style="margin-top: 10px; margin-bottom:10px;" />
        <h2>Scaling</h2>

        <form class="form-inline">
            <div class="form-group">
                <label for="min-scaling-?0?">Min Value</label>
                <input class="form-control setpoint"
                    id="min-scaling-?0?"
                    type="number"
                    step="0.1"
                    value="<%= channels["multisensor.an?0?min"].value %>" />
                <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="{'tag': 'input?0?_cfg.scalingConfig.euMin', 'value': 4.0}"
                    data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                    data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                    data-name="<%= channels["multisensor.writeplctag"].name%>"
                    data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                    id="<%= channels["multisensor.an?0?min"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </div>
        </form>

        <form class="form-inline">
            <div class="form-group">
                <label for="max-scaling-?0?">Max Value</label>
                <input class="form-control setpoint"
                    id="max-scaling-?0?"
                    type="number"
                    step="0.1"
                    value="<%= channels["multisensor.an?0?max"].value %>" />
                <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="{'tag': 'input?0?_cfg.scalingConfig.euMax', 'value': 20.0}"
                    data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                    data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                    data-name="<%= channels["multisensor.writeplctag"].name%>"
                    data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                    id="<%= channels["multisensor.an?0?max"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </div>
        </form>

        <hr style="margin-top: 10px; margin-bottom:10px;" />

        <form class="form-inline">
            <div class="form-group">
                <label for="name-?0?">Name</label>
                <input class="form-control setpoint"
                    id="name-?0?"
                    type="text"
                    value="<%= channels["multisensor.an?0?name"].value %>" />
                <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="<%= channels["multisensor.an?0?name"].value %>"
                    data-channelId="<%= channels["multisensor.an?0?name"].channelId %>"
                    data-techname="<%=channels["multisensor.an?0?name"].techName %>"
                    data-name="<%= channels["multisensor.an?0?name"].name%>"
                    data-nodechannelcurrentId="<%= channels["multisensor.an?0?name"].nodechannelcurrentId %>"
                    id="<%= channels["multisensor.an?0?name"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </div>
        </form>

        <hr style="margin-top: 10px; margin-bottom:10px;" />

        <form class="form-inline">
            <div class="form-group">
                <label for="units-?0?">Units</label>
                <input class="form-control setpoint"
                    id="units-?0?"
                    type="text"
                    value="<%= channels["multisensor.an?0?units"].value %>" />
                <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="<%= channels["multisensor.an?0?units"].value %>"
                    data-channelId="<%= channels["multisensor.an?0?units"].channelId %>"
                    data-techname="<%=channels["multisensor.an?0?units"].techName %>"
                    data-name="<%= channels["multisensor.an?0?units"].name%>"
                    data-nodechannelcurrentId="<%= channels["multisensor.an?0?units"].nodechannelcurrentId %>"
                    id="<%= channels["multisensor.an?0?units"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </div>
        </form>

    </div>

    <div class="col-md-6 align-center">
        <h2>Input ?1?</h2>
        <% if (channels["multisensor.an?1?ispond"].value === "true"){ %>
            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input?1?_cfg.isPondLevel', 'value': 0}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-danger animated setstatic">Disable Pond Volume</a>
        <% } else { %>

            <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'tag': 'input?1?_cfg.isPondLevel', 'value': 1}"
                data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                data-name="<%= channels["multisensor.writeplctag"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.writeplctag"].channelId %>"
                class="btn btn-large btn-success animated setstatic">Enable Pond Volume</a>
        <% } %>

        <hr style="margin-top: 10px; margin-bottom:10px;" />
        <h2>Scaling</h2>

        <form class="form-inline">
            <div class="form-group">
                <label for="min-scaling-?1?">Min Value</label>
                <input class="form-control setpoint"
                    id="min-scaling-?1?"
                    type="number"
                    step="0.1"
                    value="<%= channels["multisensor.an?1?min"].value %>" />
                <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="{'tag': 'input?1?_cfg.scalingConfig.euMin', 'value': 4.0}"
                    data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                    data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                    data-name="<%= channels["multisensor.writeplctag"].name%>"
                    data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                    id="<%= channels["multisensor.an?1?min"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </div>
        </form>

        <form class="form-inline">
            <div class="form-group">
                <label for="max-scaling-?1?">Max Value</label>
                <input class="form-control setpoint"
                    id="max-scaling-?1?"
                    type="number"
                    step="0.1"
                    value="<%= channels["multisensor.an?1?max"].value %>" />
                <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="{'tag': 'input?1?_cfg.scalingConfig.euMax', 'value': 20.0}"
                    data-channelId="<%= channels["multisensor.writeplctag"].channelId %>"
                    data-techname="<%=channels["multisensor.writeplctag"].techName %>"
                    data-name="<%= channels["multisensor.writeplctag"].name%>"
                    data-nodechannelcurrentId="<%= channels["multisensor.writeplctag"].nodechannelcurrentId %>"
                    id="<%= channels["multisensor.an?1?max"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </div>
        </form>

        <hr style="margin-top: 10px; margin-bottom:10px;" />

        <form class="form-inline">
            <div class="form-group">
                <label for="name-?1?">Name</label>
                <input class="form-control setpoint"
                    id="name-?1?"
                    type="text"
                    value="<%= channels["multisensor.an?1?name"].value %>" />
                <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="<%= channels["multisensor.an?1?name"].value %>"
                    data-channelId="<%= channels["multisensor.an?1?name"].channelId %>"
                    data-techname="<%=channels["multisensor.an?1?name"].techName %>"
                    data-name="<%= channels["multisensor.an?1?name"].name%>"
                    data-nodechannelcurrentId="<%= channels["multisensor.an?1?name"].nodechannelcurrentId %>"
                    id="<%= channels["multisensor.an?1?name"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </div>
        </form>

        <hr style="margin-top: 10px; margin-bottom:10px;" />

        <form class="form-inline">
            <div class="form-group">
                <label for="units-?1?">Units</label>
                <input class="form-control setpoint"
                    id="units-?1?"
                    type="text"
                    value="<%= channels["multisensor.an?1?units"].value %>" />
                <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="<%= channels["multisensor.an?1?units"].value %>"
                    data-channelId="<%= channels["multisensor.an?1?units"].channelId %>"
                    data-techname="<%=channels["multisensor.an?1?units"].techName %>"
                    data-name="<%= channels["multisensor.an?1?units"].name%>"
                    data-nodechannelcurrentId="<%= channels["multisensor.an?1?units"].nodechannelcurrentId %>"
                    id="<%= channels["multisensor.an?1?units"].channelId %>"
                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </div>
        </form>
    </div>
</div>

<hr />
    
<div class="row row-flex">
    <% if (channels["multisensor.an?0?ispond"].value === "true") { %>
        <div class="col-xs-6">
            <h2>Pond ?0? Calibration</h2>
            <table id="calibration-data-table-?0?" class="table">
                <thead>
                    <tr>
                        <th>Level (Ft.)</th>
                        <th>Volume</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    <% } %>

    <% if (channels["multisensor.an?1?ispond"].value === "true") { %>
        <div class="col-xs-6">
            <h2>Pond ?1? Calibration</h2>
            <table id="calibration-data-table-?1?" class="table">
                <thead>
                    <tr>
                        <th>Level (Ft.)</th>
                        <th>Volume</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    <% } %>
</div>

<hr />

<% if (channels["multisensor.an?0?ispond"].value === "true" || channels["multisensor.an?1?ispond"].value === "true") { %>
    <div class="row pad15">
        <div class="col-md-12 entry-top-level" id="new-entry">
            <h2>Add a new Calibration Point</h2>
            <form>
                <div class="form-group">
                    <label for="input-select">Pond Number</label>
                    <select class="form-control" id="input-select">
                        <option value=?0? >?0?</option>
                        <option value=?1? >?1?</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="height-box">Height</label>
                    <input class="form-control height_box"
                        id="height-box"
                        type="number"
                        step="any"
                        value="0">
                </div>

                <div class="form-group">
                    <label for="volume-box">Volume</label>
                    <input class="form-control volume_box"
                        id="volume-box"
                        type="number"
                        step="any"
                        value="0">
                </div>

                <a href="#"
                data-confirm-message="Are you sure you want to do this?"
                data-refreshpause="1"
                data-command=""
                data-staticsend="{'input':0, 'height':0.0, 'volume':0.0}"
                data-channelId="<%= channels["multisensor.addcalibrationpoint"].channelId %>"
                data-techname="<%=channels["multisensor.addcalibrationpoint"].techName %>"
                data-name="<%= channels["multisensor.addcalibrationpoint"].name%>"
                data-nodechannelcurrentId="<%= channels["multisensor.addcalibrationpoint"].nodechannelcurrentId %>"
                id="<%= channels["multisensor.addcalibrationpoint"].channelId %>"
                class="btn btn-large btn-theme animated setstatic material-icons">send</a>
            </form>
        </div>
    </div>
<% } %>
    
<script type="text/javascript">
    String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.replace(new RegExp(search, 'g'), replacement);
    };

    var config?0?raw = "<%= channels["multisensor.pond?0?calibration"].value %>";
    var config?1?raw = "<%= channels["multisensor.pond?1?calibration"].value %>";

    var config?0? = JSON.parse(config?0?raw.replaceAll("'", '"'));
    var config?1? = JSON.parse(config?1?raw.replaceAll("'", '"'));

    var table?0?Rows = [];
    var table?1?Rows = [];

    for (var i = 0; i < config?0?.length; i++){
        var ptIndex = i + 1;
        var thisHtml = "<tr><td>" + config?0?[i].height + "</td><td>" + config?0?[i].volume + '</td><td><a href="#" data-confirm-message="Are you sure you want to do this?" data-refreshpause="1" data-command="" data-staticsend="{\'input\': ?0?, \'point\': '+ ptIndex +'}" data-channelId="<%= channels["multisensor.deletecalibrationpoint"].channelId %>" data-techname="<%=channels["multisensor.deletecalibrationpoint"].techName %>" data-name="<%= channels["multisensor.deletecalibrationpoint"].name%>" data-nodechannelcurrentId="<%= channels["multisensor.deletecalibrationpoint"].nodechannelcurrentId %>" id="<%= channels["multisensor.deletecalibrationpoint"].channelId %>" class="btn btn-large btn-theme animated setstatic">Delete</a></tr>';
        table?0?Rows.push(thisHtml);
    }
    $("#calibration-data-table-?0? > tbody").html(table?0?Rows);

    for (var i = 0; i < config?1?.length; i++){
        var ptIndex = i + 1;
        var thisHtml = "<tr><td>" + config?1?[i].height + "</td><td>" + config?1?[i].volume + '</td><td><a href="#" data-confirm-message="Are you sure you want to do this?" data-refreshpause="1" data-command="" data-staticsend="{\'input\': ?1?, \'point\': '+ ptIndex +'}" data-channelId="<%= channels["multisensor.deletecalibrationpoint"].channelId %>" data-techname="<%=channels["multisensor.deletecalibrationpoint"].techName %>" data-name="<%= channels["multisensor.deletecalibrationpoint"].name%>" data-nodechannelcurrentId="<%= channels["multisensor.deletecalibrationpoint"].nodechannelcurrentId %>" id="<%= channels["multisensor.deletecalibrationpoint"].channelId %>" class="btn btn-large btn-theme animated setstatic">Delete</a></tr>';
        table?1?Rows.push(thisHtml);
    }
    $("#calibration-data-table-?1? > tbody").html(table?1?Rows);


    $("#height-box").change(function(){
        var currentNewPoint = JSON.parse($("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend').replaceAll("'", '"'));
        currentNewPoint['height'] = $("#height-box").val();
        $("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend', JSON.stringify(currentNewPoint).replaceAll('"', "'"));
    })

    $("#volume-box").change(function(){
        var currentNewPoint = JSON.parse($("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend').replaceAll("'", '"'));
        currentNewPoint['volume'] = $("#volume-box").val();
        $("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend', JSON.stringify(currentNewPoint).replaceAll('"', "'"));
    })

    $("#input-select").change(function(){
        var currentNewPoint = JSON.parse($("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend').replaceAll("'", '"'));
        currentNewPoint['input'] = $("#input-select").val();
        $("#<%= channels["multisensor.addcalibrationpoint"].channelId %>").attr('data-staticsend', JSON.stringify(currentNewPoint).replaceAll('"', "'"));
    })

    $("#min-scaling-?0?").change(function(){
        $("#<%= channels["multisensor.an?0?min"].channelId %>").attr('data-staticsend', "{'tag': 'input?0?_cfg.scalingConfig.euMin', 'value': "+ $("#min-scaling-?0?").val() +"}");
    })

    $("#max-scaling-?0?").change(function(){
        $("#<%= channels["multisensor.an?0?max"].channelId %>").attr('data-staticsend', "{'tag': 'input?0?_cfg.scalingConfig.euMax', 'value': "+ $("#max-scaling-?0?").val() +"}");
    })

    $("#name-?0?").change(function(){
        $("#<%= channels["multisensor.an?0?name"].channelId %>").attr('data-staticsend', $("#name-?0?").val());
    })

    $("#units-?0?").change(function(){
        $("#<%= channels["multisensor.an?0?units"].channelId %>").attr('data-staticsend', $("#units-?0?").val());
    })

    $("#min-scaling-?1?").change(function(){
        $("#<%= channels["multisensor.an?1?min"].channelId %>").attr('data-staticsend', "{'tag': 'input?1?_cfg.scalingConfig.euMin', 'value': "+ $("#min-scaling-?1?").val() +"}");
    })

    $("#max-scaling-?1?").change(function(){
        $("#<%= channels["multisensor.an?1?max"].channelId %>").attr('data-staticsend', "{'tag': 'input?1?_cfg.scalingConfig.euMax', 'value': "+ $("#max-scaling-?1?").val() +"}");
    })

    $("#name-?1?").change(function(){
        $("#<%= channels["multisensor.an?1?name"].channelId %>").attr('data-staticsend', $("#name-?1?").val());
    })

    $("#units-?1?").change(function(){
        $("#<%= channels["multisensor.an?1?units"].channelId %>").attr('data-staticsend', $("#units-?1?").val());
    })

</script>



<style>

.align-center {
    text-align: center;
}
</style>
    