: cascade base
: around page_header -> {
<div class="row">
  <div class="col-md-8">
    <h1>Add Complex Graph</h1>
  </div>
</div>
: }

: around content -> {

: block form |  fillinform( $c.request ) -> {

<form id="complex-form" class="hxrpost form-horizontal" method="post" action="<: $c.req.uri_for('/add_complex') :>" role="form">

<fieldset>

<div class="form-group">
  <label for="" class="control-label col-sm-3">Path</label>
  <div class="col-sm-8">
    <div class="input-group">
      <span class="input-group-addon">/</span>
      <input type="text" class="form-control" name="service_name" />
      <span class="input-group-addon">/</span>
      <input type="text" class="form-control" name="section_name" />
      <span class="input-group-addon">/</span>
      <input type="text" class="form-control" name="graph_name" />
    </div>
    <p class="help-block">Graph's URI(service name/section name/graph name)</p>
  </div>
</div>

<div class="form-group">
  <label for="" class="col-sm-3 control-label">Description</label>
  <div class="col-sm-9">
    <input type="text" class="form-control" name="description" />
  </div>
</div>

<div class="form-group">
  <label for="" class="control-label col-sm-3">Display sum up value</label>
  <div class="col-sm-4">
    <select name="sumup" class="form-control">
    <option value="0">disable</option>
    <option value="1">enable</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label for="" class="control-label col-sm-3">Display order</label>
  <div class="col-sm-4">
    <select name="sort" class="form-control">
    <option value="19">19</option>
    <option value="18">18</option>
    <option value="17">17</option>
    <option value="16">16</option>
    <option value="15">15</option>
    <option value="14">14</option>
    <option value="13">13</option>
    <option value="12">12</option>
    <option value="11">11</option>
    <option value="10">10</option>
    <option value="9">9</option>
    <option value="8">8</option>
    <option value="7">7</option>
    <option value="6">6</option>
    <option value="5">5</option>
    <option value="4">4</option>
    <option value="3">3</option>
    <option value="2">2</option>
    <option value="1">1</option>
    <option value="0">0</option>
    </select>
  </div>
</div>

</fieldset>

<fieldset>
<legend>Data</legend>

<div id="service_tree" data-endpoint="<: $c.req.uri_for('/json/list/graph_tree') :>"></div>

<div class="form-group">
<label for="" class="control-label col-sm-2">Series-1</label>
<div class="col-sm-10">

<table class="table table-bordered table-striped">
<tr>
<th style="width: 12%;">Type</th>
<th style="width: 76%;">Path</th>
<th style="width: 12%; text-align: center">Mode</th>
</tr>
<tr>
<td><select name="type-1" class="form-control">
<option value="AREA">AREA</option>
<option value="LINE1">LINE</option>
<option value="LINE2">LINE(Bold)</option>
</select></td>
<td>
<div class="input-group">
<span class="input-group-addon">/</span>
<select name="path-1-service" class="form-control">
: for $service_tree -> $service {
<option value="<: $service.name :>"><: $service.name :></option>
: }
</select>
<span class="input-group-addon">/</span>
<select name="path-1-section" class="form-control">
: for $service_tree.first().sections -> $section {
<option value="<: $section.name :>"><: $section.name :></option>
: }
</select>
<span class="input-group-addon">/</span>
<select name="path-1" class="form-control">
: for $service_tree.first().sections.first().graphs -> $graph {
<option value="<: $graph.id :>"><: $graph.graph_name :></option>
: }
</select>
</div>
</td>
<td style="text-align: center"><select name="gmode-1" class="form-control">
<option value="gauge">Gauge</option>
: if !$disable_subtract {
<option value="subtract">Subtract</option>
: }
</select></td>
</tr>
</table>
</div>
</div>

<div class="form-group">
<label for="" class="control-label col-sm-2">Series-2 and more</label>
<div class="col-sm-10">

<table class="table table-bordered table-striped" id="add-data-tbl">
<tr>
<th style="width: 12%;">Type</th>
<th style="width: 51%;">Path</th>
<th style="width: 12%; text-align: center;">Mode</th>
<th style="width: 12%; text-align: center;">Stack</th>
<th style="width: 12%; text-align: center;">&nbsp;</th>
</tr>

<tr>
<td><select name="type-add" id="type-add" class="form-control">
<option value="AREA">AREA</option>
<option value="LINE1">LINE</option>
<option value="LINE2">LINE(Bold)</option>
</select></t>
<td>

<div class="input-group">
<span class="input-group-addon">/</span>
<select name="path-add-service" class="form-control">
: for $service_tree -> $service {
<option value="<: $service.name :>"><: $service.name :></option>
: }
</select>
<span class="input-group-addon">/</span>
<select name="path-add-section" class="form-control">
: for $service_tree.first().sections -> $section {
<option value="<: $section.name :>"><: $section.name :></option>
: }
</select>
<span class="input-group-addon">/</span>
<select name="path-add" id="path-add" class="form-control">
: for $service_tree.first().sections.first().graphs -> $graph {
<option value="<: $graph.id :>"><: $graph.graph_name :></option>
: }
</select>
</div>
</td>
<td style="text-align: center"><select name="gmode-add" id="gmode-add" class="form-control">
<option value="gauge">Gauge</option>
: if !$disable_subtract {
<option value="subtract">Subtract</option>
: }
</select></td>
<td style="text-align:center;"><select name="stack-add" id="stack-add" class="form-control">
<option value="1">enable</option>
<option value="0">disable</option>
</select>
</td>
<td style="text-align:center;"><button id="add-new-row" class="btn btn-default" style="padding: 3px 14px 4px;">Add</button></td>
</tr>
</table>
</div>
</div>

</fieldset>

<fieldset>
<legend>Preview</legend>

<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div id="preview-graph"></div>
  </div>
</div>

</fieldset>

<hr />

<div class="form-group">
  <div class="col-sm-offset-3 col-sm-9">
    <input type="submit" class="btn btn-primary" value="Add" />
  </div>
</div>

</form>
: }
<br />
<br />

: }