{{template "header.tpl" .}}
{{template "controlbar.tpl" .}}
      <div class="cf-container container">

        <div class="row">
          <div class="col-sm-12">
            <div class="cf-graph-wide" style="width: 100%" id="chart"></div>
          </div>
        </div><!-- /row -->

        <div class="row" id="id-errormsg-container" style="margin-top: 18px; display: none">
          <div class="col-sm-6 col-sm-offset-3">
            <div class="alert alert-danger" role="alert">
              <p>Please fix the following errors to continue:</p>
              <p><span id="id-errormsg"></span></p>
            </div>
          </div>
        </div><!-- /row -->

        <div class="row" style="margin-top: 18px; margin-left: 12px; padding-bottom: 36px">

          <div class="col-sm-5" style="border-left: 1px solid #bbb">
            <p><strong>Data series and alerting thresholds:</strong></p>

            <ul id="id-plotlist" style="list-style-type: none; padding: 0 20px">
            </ul>

            <ul style="list-style-type: none; padding-left: 20px; padding-top: 5px">
              <li><a class="plotwhat" onclick="addOneMore();return false;" href="#"><em class="icon icon-plus cf-vcenter"></em> add another</a></li>
            </ul>

            <p></p>
          </div><!-- /div col -->

          <div class="col-sm-4" style="border-left: 1px solid #bbb">
            <p><strong>Show:</strong></p>

            <form id="id-gtype-form">
              <div class="radio form-group" style="padding-left: 20px; margin-bottom: 14px">
                <label>
                  <input type="radio" name="n-gtype" id="id-gtype-0" value="0">
                  The raw data
                </label>
              </div>

              <div class="radio form-group" style="padding-left: 20px">
                <label>
                  <input type="radio" name="n-gtype" id="id-gtype-1" value="1">
                  <span>The change per</span>
                </label>
                <select id="id-sel-rate" class="form-control" data-width="auto">
                  <option value="1">second</option>
                  <option selected value="60">minute</option>
                  <option value="3600">hour</option>
                  <option value="86400">day</option>
                </select>
              </div>

              <div class="radio form-group" style="padding-left: 20px">
                <label>
                  <input type="radio" name="n-gtype" id="id-gtype-2" value="2" style="vertical-align: baseline">
                  The
                </label>
                <select id="id-sel-func" class="form-control" data-width="auto">
                  <option value="0">sum</option>
                  <option value="1">min</option>
                  <option value="2">max</option>
                  <option value="3">average</option>
                </select>
                <label for="id-gtype-2" style="padding-left: 2px"><span>over each</span></label>
                <select id="id-sel-total" class="form-control" data-width="auto">
                  <option value="60">minute</option>
                  <option value="3600">hour</option>
                  <option selected value="86400">day</option>
                </select>
              </div>
            </form><!-- id-gtype-form -->

            <p>&nbsp;</p>
            <p><strong>Plot:</strong></p>
            <form id="id-ptype-form" class="form-inline">
              <div class="form-group radio" style="padding-left: 20px">
                <label>
                  <input type="radio" name="n-ptype" id="id-ptype-0" value="0">
                  <span>Lines</span>
                </label>
              </div>

              <div class="form-group radio" style="padding-left: 10px">
                <label>
                  <input type="radio" name="n-ptype" id="id-ptype-1" value="1">
                  <span>Stacked area</span>
                </label>
              </div>
            </form><!-- id-ptype-form -->

            <p></p>

          </div><!-- /div col -->

          <div class="col-sm-3" style="border-left: 1px solid #bbb; margin-left: -30px">
            <div class="form-group" style="margin-bottom: 0">
              <p><strong>Title:</strong></p>
              <input type="text" class="form-control" id="id-title">
            </div>

            <p>&nbsp;</p>
            <p><strong>Your Changes:</strong></p>
            <button type="button" id="id-apply" class="btn btn-default mat-button">PREVIEW</button>
            <button type="button" id="id-save" class="btn btn-default mat-button">SAVE</button>

            <p>&nbsp;</p>
            <p><strong>This Graph:</strong></p>
            <button type="button" id="id-delete" class="btn btn-default mat-button">DELETE</button>
            <button type="button" id="id-addinto" class="btn btn-default mat-button">CLONE&hellip;</button>

          </div><!-- /div col -->

        </div><!-- /row -->

      </div>


      <!-- Clone -->
      <div class="modal fade" id="id-modal-clone" tabindex="-1" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Clone Graph</h4>
            </div>
            <div class="modal-body">
              <div id="id-modal-clone-start">
                <div class="container-fluid">
                  <form class="form-horizontal" id="id-addinto-form">

                    <div class="form-group">
                      <div class="radio col-sm-6" style="padding-left: 20px">
                        <label>
                          <input type="radio" name="n-dash" id="id-newdash" checked value="0">
                          Add to a new dashboard
                        </label>
                      </div>
                      <div class="col-sm-6">
                        <input id="id-newdash-name" style="width: 186px" type="text" class="form-control" placeholder="new dash name">
                      </div>
                    </div><!-- /row -->

                    <div class="form-group">
                      <div class="radio col-sm-6" style="padding-left: 20px">
                        <label>
                          <input type="radio" name="n-dash" id="id-olddash" value="1">
                          Add to an existing dashboard
                        </label>
                      </div>
                      <div class="col-sm-6">
                        <select id="id-olddash-name" disabled data-live-search="true">
                        </select>
                      </div>
                    </div><!-- /row -->

                  </form>
                  <div class="row" id="id-err-container" style="display: none">
                    <div class="col-sm-8 col-sm-offset-2">
                      <div class="alert alert-danger" role="alert">
                        <span id="id-err-msg"></span>
                      </div>
                    </div>
                  </div>
                </div><!-- container -->
              </div>
              <div id="id-modal-clone-prog">
                <div style="text-align: center">
                  <i style="font-size: 48px" class="fa fa-spinner fa-pulse"></i>
                </div>
              </div>
              <div id="id-modal-clone-success">
                The graph was cloned successfully.
              </div>
              <div id="id-modal-clone-failed">
                An error occured while processing the request. Please check the
                server logs for more information.
              </div>
            </div>
            <div class="modal-footer" id="id-modal-clone-btns-start">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
              <button id="id-addinto-ok" type="button" class="btn btn-default">Clone</button>
            </div>
            <div class="modal-footer" id="id-modal-clone-btns-done">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

{{template "footer-pre.tpl" .}}
    <script type="text/javascript">var request={{.request}};</script>
    <script src="/js/graph-min.js" type="text/javascript"></script>
{{template "footer-post.tpl" .}}