{% extends "base.html" %}

{% block title %}Oozappa - Create Jobset{% endblock %}

{% block headline %}Create Jobset{% endblock %}

{% block body %}
<div class="row">
{% if form.errors %}
  <div>
    <ul class="errors">
        {% for field_name, field_errors in form.errors|dictsort if field_errors %}
            {% for error in field_errors %}
                <li class="danger alert">{{ form[field_name].label }}: {{ error }}</li>
            {% endfor %}
        {% endfor %}
    </ul>
  </div>
{% endif %}
{% if error_message %}
  <div>
    <ul class="errors">
      <li class="danger alert">{{ error_message }}</li>
    </ul>
  </div>
{% endif %}
<div>
 <form action="{{ url_for('create_jobset') }}" method="POST">
    <fieldset>
      <legend>Job information</legend>
        {{ form.csrf_token }}
      <ul>
        <li class="field">{{ form.title(size=10, class_='wide text input') }}: {{ form.title.label(class_='inline') }}</li>
        <li class="field">{{ form.description(size=50, class_='wide input textarea') }} : {{ form.description.label(class_='inline') }}</li>
        <li class="field">
          <div>
            {% for job in job_list %}
            <dl>
              <dt><a href="#" onclick="javascript:add_job('{{ job.id }}', '{{ job.environment.name}}', '{{ job.name }}');return false;">{{ job.name }} ({{ job.environment.name}})</a></dt>
              <dd>&nbsp;{{ job.description }}</dd>
            </dl>
            {% endfor %}
          </div>
        <li class="field">{{ form.job_id.label(class_='inline') }}
          <ul id="job_list"></ul>
        </li>
        <li class="field"><input type="submit" value="Go"></li>
      </ul>
    </fieldset>
  </form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    var selected_job = [];
    add_job = function(job_id, environment_name, job_name) {
      selected_job.push({id: job_id, environment_name: environment_name, job_name: job_name})
      $("#job_list").empty();
      $.each(selected_job, function(i, job) {
        $("#job_list").append('<li class="primary alert">' + job.environment_name + ' - ' + job.job_name + '</li><input type="checkbox" name="job_id" value="' + job.id + '" checked />');
      });
      // $("#job_id").val($.map(selected_job, function(job, i) {return job.id}));
    };
  });
</script>
{% endblock %}