{% extends "layout.html" %}
{% from "variants/utils.html" import compounds_table %}
{% from "variants/components.html" import gene_cell, frequency_cell %}
{% from "utils.html" import flash_messages, comments_table %}

{% block title %}
  {{ super() }} - {{ institute.display_name }} - {{ case.display_name }} - STR variants
{% endblock %}

{% block top_nav %}
  {{ super() }}
  <li>
    <a href="{{ url_for('cases.index') }}">Institutes</a>
  </li>
  <li>
    <a href="{{ url_for('cases.cases', institute_id=institute._id) }}">
      {{ institute.display_name }}
    </a>
  </li>
  <li>
    <a href="{{ url_for('cases.case', institute_id=institute._id, case_name=case.display_name) }}">
      {{ case.display_name }}
    </a>
  </li>
  <li class="active">
    <span class="navbar-text">{{ form.variant_type.data|capitalize }} STRs</span>
  </li>
{% endblock %}

{% block top_nav_right %}
  {{ super() }}
{% endblock %}

{% block content %}
<form>
  <div class="container-fluid main">
    {{ flash_messages() }}
  </div>
  <div class="table-responsive">
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th class="col-xs-1" title="Rank position">Rank</th>
          <th class="col-xs-1" title="Rank score">Score</th>
          <th title="Chromosome">Chr.</th>
          <th title="Repeat ID" class="col-xs-2">Repeat ID</th>
          <th class="col-xs-1" title="Repeat unit">Repeat unit</th>
          <th title="ALT">Estimated size</th>
          <th class="col-xs-1" title="Reference">Reference</th>
          <th class="col-xs-1" title="Normal">Normal &le;</th>
          <th class="col-xs-1" title="Pathologic">Pathologic &ge;</th>
        </tr>
      </thead>
      <tbody>
        {% for variant in variants %}
          {% if variant.dismiss_variant %}
        <tr class="dismiss">
	  {% else %}
	<tr>
	  {% endif %}
          <td>{{ cell_rank(variant) }}</td>
          <td class="text-right">{{ variant.rank_score|int }}</td>
          <td>{{ variant.chromosome }}</td>
          <td>{{ variant.str_repid }}</td>
	        <td class="text-right">{{ variant.str_ru }}</td>
          <td>{{ variant.alternative }}</td>
          <td class="text-right">{{ variant.str_ref }}</td>
          <td>N</td>
          <td>P</td>
          </tr>
        {% else %}
          <tr>
            <td colspan="9">
              No matching variants
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>

    {{ footer() }}
  </div>
</form>
{% endblock %}

{% macro cell_rank(variant) %}
  <a class="variants-row-item flex-small layout"
     href="{{ url_for('variants.variant', institute_id=institute._id, case_name=case.display_name,
                      variant_id=variant._id) }}">
    {{ variant.variant_rank }}
  </a>
  {% set comment_count = variant.comments.count() %}
  {% if variant.manual_rank %}
    <span class="badge pull-right" title="Manual rank">{{ variant.manual_rank }}</span>
  {% endif %}
  {% if comment_count > 0 %}
    <a href="#"
       class="badge pull-right"
       data-toggle="popover"
       data-placement="right"
       data-html="true"
       data-trigger="hover click"
       data-content="{{ comments_table(institute, case, variant.comments, variant._id) }}"
       title=""
       >
      {{ comment_count }}
      <span class="glyphicon glyphicon-comment"></span>
    </a>
  {% endif %}
{% endmacro %}

{% macro footer() %}
  <div class="container-fluid">
    <div class="form-group text-center">
      {% if more_variants %}
        <a class="btn btn-default" href="{{ url_for('variants.variants', institute_id=institute._id, case_name=case.display_name, page=(page + 1), **form.data) }}">
          Next page
        </a>
      {% else %}
        <i class="text-muted">No more variants to display</i>
      {% endif %}
    </div>
  </div>
{% endmacro %}

{% block scripts %}
  {{ super() }}

  <script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-table-headers/0.1.19/js/jquery.stickytableheaders.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
  <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip();
      $('[data-toggle="popover"]').popover({
        container: 'body',
      });

      $('table').stickyTableHeaders({
        fixedOffset: $(".navbar-fixed-top")
      });

      $('select[multiple]').multiselect({
        buttonWidth: '100%'
      });
    })

    function add_export(){
      var the_form = document.forms['filters_form'];
      var hidden_export = document.createElement('input');

      hidden_export.type = 'hidden';
      hidden_export.name = 'export';
      hidden_export.value = 'True';
      hidden_export.id = 'export';
      the_form.appendChild(hidden_export);
      the_form.submit();
    }

    function remove_export(){
      var the_form = document.forms['filters_form'];
      var hidden_export = document.getElementById('export');
      the_form.removeChild(hidden_export);
      the_form.submit();
    }

  </script>
{% endblock %}
