{% extends 'layout.jinja2.html' %}

{% block title %}Schedule Test{% endblock %}


{% block style %}
#schedule-test textarea {
   height: 5em;
}
span.help-block {
   font-size: 0.9em;
   text-align: right;
}
a.remove-revision, a.remove-operation {
   font-size: 0.8em;
}
span.panel-title {
   font-size: 1em;
}
button#submit-job {
   width: 100%;
   font-size: 2em;
}
#schedule-left-col {
   padding-right: 50px;
   border-right: 1px dotted #ccc;
}
#schedule-test legend {
   font-size: 1.2em;
}
legend {
   font-weight: bold;
}
label {
   font-weight: normal;
}
.kill-nodes-dropdown {
   width: 60px;
}
.kill-nodes-delay {
   width: 50px;
}
#schedule-test td {
   padding-bottom: 10px;
}
#schedule-test .panel {
   -webkit-box-shadow: none;
}
{% endblock %}



{% block body %}

<h2>Schedule New Test</h2>
<hr>
<form id="schedule-test" class="form-horizontal">
  <fieldset>
    <!-- Form Name -->
    <!-- Left Column -->

    <div id="schedule-left-col" class="col-md-6">
      <legend>Cluster Configuration</legend>
      <div class="form-group">
        <label class="col-md-4 control-label" for="testname">Test Name</label>  
        <div class="col-md-8">
          <input id="testname" name="testname" type="text"
          placeholder="Your Test Title" class="form-control input-md" required>        
        </div>
      </div>

      <div class="form-group">
        <label class="col-md-4 control-label" for="description">Test Description</label>
        <div class="col-md-8">
          <textarea class="form-control" id="description"
                    name="description" placeholder="Description of your test"></textarea>
        </div>
      </div>

      <div class="form-group">
        <label class="col-md-4 control-label" for="cluster">Cluster</label>
        <div class="col-md-8"> 
         <select id="cluster" name="cluster" class="form-control">
           {% for cluster in clusters %}
            <option value="{{cluster}}">{{cluster}}</option>
           {% endfor %}
          </select>
          <span class="help-block"><a href="#">See cluster specs here</a></span>
        </div>
      </div>

      <div class="form-group">
        <label class="col-md-4 control-label" for="numnodes">Number of Nodes</label>
        <div class="col-md-8">
          <select id="numnodes" name="numnodes" class="form-control" disabled=disabled>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected=selected>3</option>
            <option value="4">4</option>
          </select>
        </div>
      </div>

      <div id="schedule-revisions">
      </div>

      <div class="form-group">
        <div class="col-md-3 pull-right">
          <button id="add-revision" name="add-revision" class="btn
          btn-primary">Add a revision</button>
        </div>
      </div>      
    </div>


    <!-- Right Column -->
    <div id="schedule-right-col" class="col-md-6">
      <legend>Test Configurations</legend>
      <p>These operations will be run on each cluster revision in order:</p>
      <div id="schedule-operations">
      </div>

      <div class="form-group">
        <div class="col-md-4 pull-right">
          <button id="add-operation" name="add-operation" class="btn
          btn-primary">Add an operation</button>
        </div>
      </div>


      <hr/>
      <div class="form-group">
        <div class="col-md-12">
          <button id="submit-job" name="submit-job" class="btn
                                                           btn-success">Run
                                                           this test</button>
        </div>
      </div>
    </div>


  </fieldset>
</form>

<script src="/static/js/schedule.js"></script>
{% endblock %}
