{% extends "layout_bs4.html" %}
{% from "variants/components.html" import gene_cell, frequency_cell %}
{% from "utils.html" import comments_table %}
{% from "variants/utils.html" import cell_rank, dismiss_variants_block, filter_form_footer, pagination_footer, pagination_hidden_div, str_filters %}
{% from "variant/buttons.html" import igv_button %}

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

{% block css %}
{{ super() }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
{% endblock %}

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

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

{% block content_main %}
<div class="container-float">
  <form method="POST" id="filters_form" action="{{url_for('variants.str_variants', institute_id=institute._id, case_name=case.display_name)}}"
     enctype="multipart/form-data" onsubmit="return validateForm()">
     {{ pagination_hidden_div(page) }}
    <div class="card panel-default" id="accordion">
      <div class="card-header">
        <strong><a data-toggle="collapse" data-parent="#accordion" href="#collapseFilters">Filters</a></strong>
      </div>
      <!--Expand filters form if filters were used in a previous POST request-->
      <div class="card-body panel-collapse collapse {{ 'show' if expand_search is sameas true }}" id="collapseFilters">
          {{ str_filters(form, institute, case) }}
      </div>
    {{ filter_form_footer(form, result_size, total_variants, more_variants, page, variants|length) }}
    </div>
  </form>
  <div class="card mt-3">
    <table class="table table-bordered table-hover" style="table-layout: fixed">
      <thead>
        <tr>
          <th style="width:8%" title="Index">Index</th>
          <th title="Repeat ID">Repeat locus</th>
          <th title="Repeat unit">Reference repeat unit</th>
          <th title="ALT">Estimated size</th>
          <th title="ReferenceSize">Reference size</th>
          <th title="Status">Status</th>
          <th title="GT">Genotype</th>
          <th title="Chromosome">Chr.</th>
          <th title="Position">Position</th>
        </tr>
      </thead>
      <tbody>
        {% set ns = namespace(allele0='') %}
        {% for variant in variants %}
          {% if variant.chromosome + variant.position|string != ns.allele0 %}
            <tr style="height:10px;"></tr>
          {% endif %}
          {% set ns.allele0 = variant.chromosome + variant.position|string %}
          {% if variant.dismiss_variant %}
              <tr class="dismiss">
          {% elif variant._id in case.causatives %}
             <tr class="causative">
          {% elif variant.str_status == 'normal' %}
              <tr class="bg-primary">
          {% elif variant.str_status == 'full_mutation' %}
              <tr class="bg-danger">
          {% elif variant.str_status == 'pre_mutation' %}
              <tr class="bg-warning">
	        {% else %}
	            <tr>
	        {% endif %}
            <td>{{ cell_rank(variant, institute, case, form, manual_rank_options) }}</td>
            <td>{{ str_locus_info(variant) }}</td>
	          <td class="text-right">{{ variant.str_display_ru or variant.str_ru  }}</td>
            <td class="text-right"><b>{{ variant.alternative|replace("STR", "")|replace("<", "")|replace(">", "") }}</b></td>
            <td class="text-right">{{ variant.str_ref }}</td>
            <td>{{ str_status(variant) }}</td>
            <td>{% for sample in variant.samples %}
                  {% if sample.genotype_call != "./." %}
                    <div class="float-left">{{ sample.display_name }}</div>
                    <div class="float-right">{{ sample.genotype_call }}</div><br>
                  {% endif %}
                {% endfor %}
            </td>
            <td>{{ variant.chromosome }}</td>
            <td>
              {{ variant.position }}
              {{ igv_button(case,variant,case_groups) }}
              </td>
        </tr>
        {% else %}
          <tr>
            <td colspan="9">
              No matching variants
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div> <!-- end of class="container-float"> -->
<div class="container-fluid">
  {{ pagination_footer(more_variants, page) }}
</div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.11/purify.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-table-headers/0.1.19/js/jquery.stickytableheaders.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
  <script src="{{ url_for('variants.static', filename='form_scripts.js') }}"></script>
  <script>
    var startElem = document.getElementById("start");
    var endElem = document.getElementById("end");

    var chromSel = document.getElementById("chrom");
    chromSel.addEventListener("change", function() {
      populateCytobands({{cytobands|safe}});
    });

    var cytoStart = document.getElementById("cytoband_start");
    initSearchConstraints(cytoStart, startElem)

    var cytoEnd = document.getElementById("cytoband_end");
    initSearchConstraints(cytoEnd, endElem)

    document.getElementById('hide_dismissed').onchange = function() {
      document.getElementById('expand_search').value = "False";
      var the_form = document.forms['filters_form'];
      the_form.submit();
    };

    window.onload=function() {
      populateCytobands({{cytobands|safe}});
    }

    $(function () {
      $('[data-toggle="tooltip"]').tooltip();
      $('[data-toggle="popover"]').popover({
        sanitizeFn: function (content) {
          return DOMPurify.sanitize(content)
        },
        container: 'body',
      });

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

  </script>
{% endblock %}

{% macro str_status(variant) %}
<a class="badge badge-secondary text-white"
  data-toggle="popover"
  data-html="true"
  data-trigger="hover click"
  data-content="{% if variant.str_normal_max %}
    <table>
      <tr><td>Normal max</td><td>{{ variant.str_normal_max }}</td></tr>
      <tr><td>Pathologic min</td><td>{{ variant.str_pathologic_min }}</td><tr>
      <tr><td colspan=2>&nbsp;</td></tr>
      {% if variant.str_swegen_mean %}
        <tr><td>SweGen Z-score</td><td>
          {{ ((variant.alternative|replace("STR", "")|replace("<", "")|replace(">", "")|int - variant.str_swegen_mean ) / variant.str_swegen_std) | round(2) }}
        </td></tr>
        <tr><td>SweGen mean</td><td>{{variant.str_swegen_mean|round(2)}}</td></tr>
        <tr><td>SweGen std</td><td>{{variant.str_swegen_std|round(2)}}</td></tr>
      {% endif %}
    </table>
    {% endif %}
    {% if not variant.str_normal_max %}
      <div>Normal range not provided. Consider updating to a new version of Stranger.</div>
    {% endif %}"
  title="">{{ variant.str_status }}</a>
{% endmacro %}

{% macro str_locus_info(variant) %}
  <a
  href="{{ variant.str_source_link }}"
  class="link text-black"
  target="_blank"
  data-toggle="popover"
  data-html="true"
  data-trigger="hover"
  data-content="
  <div class='text-left'>
    {% if variant.str_disease %}
      <div><strong>Disease:</strong> {{ variant.str_disease }} ({{ variant.str_inheritance_mode }})</div>
    {% else %}
      <div>Disease information not provided with locus. Consider updating to a new version of Stranger.</div>
    {% endif %}
    {% if variant.str_source is defined %}
      <div><strong>Source:</strong> {{ variant.str_source.display }} </div>
      <div>Click to visit {{ variant.str_source.type }}
    {%endif%}
  </div>"
  title="">{{ variant.str_repid }}
  </a>
{% endmacro %}
