{% extends sitebase.html %}
{% autoescape None %}

{%block head%}

<script>
  function check_selection(){
    if($('.command:checkbox:checked').length > 0){
       return true;
   }else {
        $('#error').text('Please select at least one command.');
       return false;
   }
  }

  $(function () {
    $('#data-types-tabs a:first').tab('show')
  })
</script>
{%end%}

{%block content %}

<h1>Select Commands</h1>
<span id="error" style="color:red"></span>
<form role="form" action="{% raw qiita_config.portal_dir %}/analysis/wait/{{aid}}" method="post" onsubmit="return check_selection()">

<div>
<table class="table">
  <tr>
    <td style="width:100px;">
      Rarefaction Depth: <input type="number" min="10" id="rarefaction-depth" name="rarefaction-depth" class="form-control" style="width:10em;">
    </td>
    <td style="width:10px;">&nbsp;</td>
    <td style="text-align:left;vertical-align:middle;">
      <table>
        <tr>
          <td style="width:20px;">
            <input type="checkbox" id="merge-duplicated-sample-ids" name="merge-duplicated-sample-ids" class="form-control">
          </td>
          <td>
            <label style="font-weight:normal;" for="merge-duplicated-sample-ids">Merge same sample ids</label>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <small>
              Merging sample ids is useful for when you have the same sample in different preparations of the
              same data, i.e. a sample processed twice in 16S. When the samples are not merged, they are prefixed
              with the artifact id.
            </small>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</div>

<ul class="nav nav-tabs" id="data-types-tabs">
  {% for data_type in data_types %}
    <li><a href="#{{ data_type }}" data-toggle="tab">{{ data_type }}</a></li>
  {% end %}
</ul>

<div class="tab-content">
{% for data_type in data_types %}
  <div class="tab-pane" id="{{ data_type }}">
        <table class="table">
          <tr>
            <th style="width:20px;"></th>
            <th>Command</th>
          </tr>
          {% for command in commands[data_type] %}
            <tr>
              <td style="width:20px;">
                <input id="{{data_type}}#{{command.name}}" type="checkbox" name="commands" class="command" value="{{data_type}}#{{command.name}}">
              </td>
              <td>
                <label style="font-weight:normal;" for="{{data_type}}#{{command.name}}">{{command.name}}</label>
              </td>
            </tr>
          {% end %}
        </table>
  </div>
{% end %}
</div>
  <button type="submit" class="btn btn-default">Start Processing</button>
</form>
{% end %}