{%extends "base.html"%}

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

{%block contents%}
<h2 class="heading">{{filename}}: select platform</h2>

<form method="POST" action="{{url_for('dbinsert.select_study')}}"
      id="select-platform-form" data-genechips="{{genechips_data}}">
  <input type="hidden" name="filename" value="{{filename}}" />
  <input type="hidden" name="filetype" value="{{filetype}}" />
  <input type="hidden" name="totallines" value="{{totallines}}" />

  <fieldset>
    <label for="species" class="form-col-1">species</label>
    <select id="species" name="species" class="form-col-2">
      {%for row in species:%}
      <option value="{{row['SpeciesId']}}"
	      {%if row["Name"] == default_species:%}
	      selected="selected"
	      {%endif%}>
	{{row["MenuName"]}}
      </option>
      {%endfor%}
    </select>
  </fieldset>

  <table id="genechips-table">
    <thead>
      <tr>
	<th>Select</th>
	<th>GeneChip ID</th>
	<th>GeneChip Name</th>
      </tr>
    </thead>

    <tbody>
      {%for chip in genechips:%}
      <tr>
	<td>
	  <input type="radio" name="genechipid" value="{{chip['GeneChipId']}}"
		 required="required" />
	</td>
	<td>{{chip["GeneChipId"]}}</td>
	<td>{{chip["GeneChipName"]}}</td>
      </tr>
      {%else%}
      <tr>
	<td colspan="5">No chips found for selected species</td>
      </tr>
      {%endfor%}
    </tbody>
  </table>

  <fieldset>
    <input type="submit" class="btn btn-main form-col-2"
	   value="submit platform" />
  </fieldset>
</form>
{%endblock%}

{%block javascript%}
<script type="text/javascript" src="/static/js/utils.js"></script>
<script type="text/javascript" src="/static/js/select_platform.js"></script>
<script type="text/javascript">
  document.getElementById(
      "species").addEventListener("change", update_genechips);
  document.getElementById(
      "genechips-table").getElementsByTagName(
	  "tbody")[0].addEventListener(
	      "click",
	      function(event) {
		  if(event.target.tagName.toLowerCase() == "td") {
		      return select_row_radio(event.target.parentElement);
		  }
		  if(event.target.tagName.toLowerCase() == "td") {
		      return select_row_radio(event.target);
		  }
		  return false;
	      });
</script>
{%endblock%}