{%extends "base.html"%}

{%block title%}Select Dataset{%endblock%}

{%block contents%}
<h1 class="heading">{{job_name}}: select dataset</h2>

<form method="POST" data-menu-content="{{menu_contents}}">
  <input type="hidden" name="job_id" value="{{job_id}}" />

  <fieldset>
    <label for="species">species:</label>
    <select id="species" name="species">
      {%for row in species:%}
      <option value="{{row[0]}}"
	      {%if row[0] == default_species:%}
	      selected="selected"
	      {%endif%}>
	{{row[1]}}
      </option>
      {%endfor%}
    </select>
  </fieldset>

  <fieldset>
    <label for="group">group:</label>
    <select id="group" name="group">
      {%for grouping, grps in groups.items():%}
      <optgroup label="{{grouping}}">
	{%for group in grps:%}
	<option value="{{group[0]}}">{{group[1]}}</option>
	{%endfor%}
      </optgroup>
      {%endfor%}
    </select>
  </fieldset>

  <fieldset>
    <label for="type">type:</label>
    <select id="type" name="type">
      {%for grouping, typs in types.items():%}
      <optgroup label="{{grouping}}">
	{%for type in typs:%}
	<option value="{{type[0]}}">{{type[1]}}</option>
	{%endfor%}
      </optgroup>
      {%endfor%}
    </select>
  </fieldset>

  <fieldset>
    <label for="dataset">dataset:</label>
    <select id="dataset" name="dataset">
      {%for dataset_id, name1, name2 in datasets:%}
      <option value="{{dataset_id}}">[{{name1}}] {{name2}}</option>
      {%endfor%}
    </select>
  </fieldset>

  <fieldset>
    <input type="submit" class="btn btn-main" value="update database" />
  </fieldset>

</form>

{%endblock%}

{%block javascript%}
<script type="text/javascript" src="/static/js/dbinsert.js"></script>
<script type="text/javascript">
  document.getElementById("species").addEventListener("change", update_menu);
  document.getElementById("group").addEventListener("change", update_menu);
  document.getElementById("type").addEventListener("change", update_menu);
</script>
{%endblock%}