{% 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 %}