<form class='set_channel'>
  <br />
  <button class='btn btn-theme btn-block set_channel_btn' value='Save'>APPLY CHANGES</button>
  <br />
  <div class="text-center"><h1>VFD CONFIGURATION</h1></div>
  <div class="row">
    <div class='col-xs-12 text-center box-me'>
      <table class="table">
        <tbody>
          <tr>
              <td><h2>Motor Speed Reference (Hz)</h2></td>
              <td>
                <input class="form-control" data-channelId='<%= channels["vfdipp.vfdspeedref"].channelId %>'
                    data-techName='<%=channels["vfdipp.vfdspeedref"].techName %>'
                    data-name='<%= channels["vfdipp.vfdspeedref"].name %>'
                    data-val="<%=channels["vfdipp.vfdspeedref"].value %>"
                    type="number" step="any"
                    id="<%= channels["vfdipp.vfdspeedref"].channelId %>"
                    value="<%=channels["vfdipp.vfdspeedref"].value %>">
              </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-md-6 box-me">
        <h2>MOTOR NAMEPLATE DATA</h2>
        <table class="table">
            <tbody>
                <tr>
                    <td>Motor FLA (A)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplatefla"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplatefla"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplatefla"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplatefla"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplatefla"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplatefla"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Motor HP (HP)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplatehp"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplatehp"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplatehp"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplatehp"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplatehp"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplatehp"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Motor RPM (RPM)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplaterpm"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplaterpm"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplaterpm"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplaterpm"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplaterpm"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplaterpm"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Motor Frequency (Hz)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplatehz"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplatehz"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplatehz"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplatehz"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplatehz"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplatehz"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Motor Overload Current (A)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplateolcurrent"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplateolcurrent"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplateolcurrent"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplateolcurrent"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplateolcurrent"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplateolcurrent"].value %>">

                    </td>
                </tr>

                <tr>
                    <td>Motor Volts (V)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplatevolts"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplatevolts"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplatevolts"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplatevolts"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplatevolts"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplatevolts"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Motor Poles</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdmotorpoles"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdmotorpoles"].techName %>'
                          data-name='<%= channels["vfdipp.vfdmotorpoles"].name %>'
                          data-val="<%=channels["vfdipp.vfdmotorpoles"].value %>"
                          type="number"
                          id="<%= channels["vfdipp.vfdmotorpoles"].channelId %>"
                          value="<%=channels["vfdipp.vfdmotorpoles"].value %>">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="col-md-6 box-me">
        <h2>VFD SETTINGS</h2>
        <table class="table">
            <tbody>
                <tr>
                    <td>Min. Frequency (Hz)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdminfreq"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdminfreq"].techName %>'
                          data-name='<%= channels["vfdipp.vfdminfreq"].name %>'
                          data-val="<%=channels["vfdipp.vfdminfreq"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdminfreq"].channelId %>"
                          value="<%=channels["vfdipp.vfdminfreq"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Max. Frequency (Hz)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdmaxfreq"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdmaxfreq"].techName %>'
                          data-name='<%= channels["vfdipp.vfdmaxfreq"].name %>'
                          data-val="<%=channels["vfdipp.vfdmaxfreq"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdmaxfreq"].channelId %>"
                          value="<%=channels["vfdipp.vfdmaxfreq"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Accel. Time (sec)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdacceltime"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdacceltime"].techName %>'
                          data-name='<%= channels["vfdipp.vfdacceltime"].name %>'
                          data-val="<%=channels["vfdipp.vfdacceltime"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdacceltime"].channelId %>"
                          value="<%=channels["vfdipp.vfdacceltime"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Decel. Time (sec)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfddeceltime"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfddeceltime"].techName %>'
                          data-name='<%= channels["vfdipp.vfddeceltime"].name %>'
                          data-val="<%=channels["vfdipp.vfddeceltime"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfddeceltime"].channelId %>"
                          value="<%=channels["vfdipp.vfddeceltime"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Stop Mode</td>
                    <td><%= channels["vfdipp.vfdstopmode"].value %></td>
                </tr>

                <tr>
                    <td>Torque Perf. Mode</td>
                    <td><%= channels["vfdipp.vfdtorqueperfmode"].value %></td>
                </tr>
            </tbody>
        </table>
    </div>
  </div>

  <div class="text-center"><h1>DOWNHOLE CONFIGURATION</h1></div>
  <div class="row">
      <div class='col-xs-12 text-center box-me'>
        <h2>Downhole Sensor Enabled</h2>
        <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="downholetoolenabled" data-channelId='<%= channels["vfdipp.downholetoolenabled"].channelId %>' data-techName='<%=channels["vfdipp.downholetoolenabled"].techName %>' data-name='vfdipp.downholetoolenabled' id="<%= channels["vfdipp.downholetoolenabled"].channelId %>" name="<%= channels["vfdipp.downholetoolenabled"].channelId %>">
      </div>
      <div class='col-xs-6 text-center box-me'>
          <h2>Pressure Trip</h2>
          <div class="gauge-box">
              <table class="table">
                  <tbody>
                      <tr>
                          <td>Pressure Shutdown Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhpressureshutdownenabled" data-channelId='<%= channels["vfdipp.dhpressureshutdownenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhpressureshutdownenabled"].techName %>' data-name='vfdipp.dhpressureshutdownenabled' id="<%= channels["vfdipp.dhpressureshutdownenabled"].channelId %>" name="<%= channels["vfdipp.dhpressureshutdownenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Pressure Shutdown Limit (PSI)</td>
                          <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.dhpressureshutdownlimit"].channelId %>'
                                data-techName='<%=channels["vfdipp.dhpressureshutdownlimit"].techName %>'
                                data-name='<%= channels["vfdipp.dhpressureshutdownlimit"].name %>'
                                data-val="<%=channels["vfdipp.dhpressureshutdownlimit"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.dhpressureshutdownlimit"].channelId %>"
                                value="<%=channels["vfdipp.dhpressureshutdownlimit"].value %>">
                        </td>
                      </tr>

                      <tr>
                          <td>Pressure Restart Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhpressurestartupenabled" data-channelId='<%= channels["vfdipp.dhpressurestartupenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhpressurestartupenabled"].techName %>' data-name='vfdipp.dhpressurestartupenabled' id="<%= channels["vfdipp.dhpressurestartupenabled"].channelId %>" name="<%= channels["vfdipp.dhpressurestartupenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Pressure Startup Limit (PSI)</td>
                          <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.dhpressurestartup"].channelId %>'
                                data-techName='<%=channels["vfdipp.dhpressurestartup"].techName %>'
                                data-name='<%= channels["vfdipp.dhpressurestartup"].name %>'
                                data-val="<%=channels["vfdipp.dhpressurestartup"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.dhpressurestartup"].channelId %>"
                                value="<%=channels["vfdipp.dhpressurestartup"].value %>">
                          </td>
                      </tr>

                  </tbody>
              </table>
          </div>
      </div>

      <div class='col-xs-6 text-center box-me'>
          <h2>Temperature Trip</h2>
          <div class="gauge-box">
              <table class="table">
                  <tbody>
                      <tr>
                          <td>Temperature Shutdown Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhtempshutdownenabled" data-channelId='<%= channels["vfdipp.dhtempshutdownenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhtempshutdownenabled"].techName %>' data-name='vfdipp.dhtempshutdownenabled' id="<%= channels["vfdipp.dhtempshutdownenabled"].channelId %>" name="<%= channels["vfdipp.dhtempshutdownenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Temperature Shutdown Limit (deg F)</td>
                          <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.dhtempshutdown"].channelId %>'
                                data-techName='<%=channels["vfdipp.dhtempshutdown"].techName %>'
                                data-name='<%= channels["vfdipp.dhtempshutdown"].name %>'
                                data-val="<%=channels["vfdipp.dhtempshutdown"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.dhtempshutdown"].channelId %>"
                                value="<%=channels["vfdipp.dhtempshutdown"].value %>">
                        </td>
                      </tr>

                      <tr>
                          <td>Temperature Restart Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhtempstartupenabled" data-channelId='<%= channels["vfdipp.dhtempstartupenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhtempstartupenabled"].techName %>' data-name='vfdipp.dhtempstartupenabled' id="<%= channels["vfdipp.dhtempstartupenabled"].channelId %>" name="<%= channels["vfdipp.dhtempstartupenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Temperature Startup Limit (deg F)</td>
                          <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.dhtempstartuplimit"].channelId %>'
                                data-techName='<%=channels["vfdipp.dhtempstartuplimit"].techName %>'
                                data-name='<%= channels["vfdipp.dhtempstartuplimit"].name %>'
                                data-val="<%=channels["vfdipp.dhtempstartuplimit"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.dhtempstartuplimit"].channelId %>"
                                value="<%=channels["vfdipp.dhtempstartuplimit"].value %>">
                          </td>
                      </tr>

                  </tbody>
              </table>
          </div>
      </div>
  </div>
  <button class='btn btn-theme btn-block set_channel_btn' value='Save'>APPLY CHANGES</button>
</form>

<style>
  .box-me {
    position: relative;
    padding: 0.5em;
    padding-bottom: 1.5em;
    border: 1px solid #eee;
    /*margin: 1em 0;*/
  }
  .box-me .gauge-box {
    margin-top: -0.25em;
  }
  .box-me h2 {
      text-transform: uppercase;
      font-size: 14px;
      color: #666;
      font-weight: 400;
      letter-spacing: 1px;
      z-index: 100;
  }
  .dynamic-chart-form {
    background-color: whiteSmoke;
    padding: 1em 0.5em;
    margin-top: 1em;
  }

  .fill-vertically {
      height:261px;
  }

  #systemStatusTimelineContainer h2 {
  text-transform: uppercase;
  font-size: 14px;
  color: #666;
  font-weight: 400;
  letter-spacing: 1px;
  z-index: 100;
  }
</style>
