{%extends "base.html"%}

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

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

<div class="row">
  <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}}" />

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

    <table id="genechips-table" class="table">
      <caption>select platform</caption>
      <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>

    <button type="submit" class="btn btn-primary">submit platform</button>
  </form>
</div>
{%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%}