{% extends "layout_bs4.html" %}

{% block title %}
{{ super() }} - Institutes
{% endblock %}

{% block css %}
{{ super() }}
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.min.css">
{% endblock %}

{% block top_nav %}
{{ super() }}
<li class="nav-item">
  <a class="nav-link" href="{{ url_for('cases.index') }}">Institutes</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="{{ url_for('cases.cases', institute_id=institute._id) }}">{{ institute.display_name }}
    Cases</a>
</li>
<li class="nav-item active">
  <a class="nav-link" href="{{ url_for('cases.causatives', institute_id=institute._id) }}">Causatives</a>
</li>
<li class="nav-item">
  <a class="nav-link"
    href="{{ url_for('cases.gene_variants', institute_id=institute._id, variant_type=['clinical'], rank_score=15) }}">All
    SNVs and INDELs</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="{{ url_for('cases.clinvar_submissions', institute_id=institute._id) }}">Clinvar
    submissions</a>
</li>
{% endblock %}
{% block content_main %}
<div class="card mt-3">
  <div class="card-body">
      <table id="causatives_table" class="table display table-sm" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th style="width:5%">Gene</th>
            <th style="width:10%">Variant Name</th>
            <th style="width:20%">Change</th>
            <th style="width:3%">Category</th>
            <th style="width:3%" data-toggle='tooltip' data-container='body' title="score(model version)">Rank score</th>
            <th style="width:5%" data-toggle='tooltip' data-container='body' title="ref/alt-GQ">Zygosity</th>
            <th style="width:3%">Inheritance</th>
            <th style="width:5%">ACMG</th>
            <th style="width:5%">Case Name</th>
            <th style="width:3%">Case Status</th>
          </tr>
        </thead>
        <tbody>
          {% for _, group in variant_groups.items() %}
          {% set group_variant = group[0][1] %}
          {% for case, variant in group %}
          {% if variant._id in case.causatives %}
          <tr>
            <td>
              <h5 class="mb-1">{{ variant.hgnc_symbols|join(', ') if variant.hgnc_symbols else '--'}}</h5>
            </td>
            <td><a href="{{ url_for('variant.variant',
                institute_id=institute._id,
                case_name=case.display_name,
                variant_id=variant._id) }}">{{ variant.display_name|truncate(20, True) }}
              </a>
            </td>
            <td><span class="text-muted" style="display: inline-block; margin-left: 10px;">
                {{ group_variant.reference|truncate(20, True) }} → {{ group_variant.alternative|truncate(20, True) }}
              </span>
            </td>
            <td><span class="badge badge-secondary">{{ variant.category|upper }}</span></td>
            <td><a href="#"><span class="badge badge-pill badge-secondary">
              {{ variant.rank_score }}
              {% if variant.category == 'sv' %}
                (v. {{case.sv_rank_model_version or 'na'}})
              {% else %}
                (v. {{case.rank_model_version or 'na'}})
              {% endif %}
            </span></a></td>
            <td>
              {%- for sample in variant.samples -%}
                {%- for ind in case.individuals -%}
                  {%- if sample.sample_id == ind.individual_id -%}
                    {% set allele_depths = ['ref depth', sample.allele_depths[0]]|join(":") + ' - ' + ['alt depth', sample.allele_depths[1]]|join(":") %}
                    <span data-toggle='tooltip' data-container='body' title="{{allele_depths}}" class="badge badge-{{'danger' if ind.phenotype == 2 else 'success' }}">{{sample.genotype_call}} GQ:{{sample.genotype_quality}}</span>
                  {%- endif -%}
                {%- endfor -%}
              {%- endfor -%}
            </td>
            <td>{% for model in variant.genetic_models %}
              <span class="badge badge-info">{{model}}</span>
              {% endfor %}
            </td>
            <td>
              <a href="#" data-toggle="tooltip" title="ACMG classification assigned by Scout users (not Clinvar)"
                style="text-decoration: none; color: #000;">ACMG:
                {% if 'acmg_classification' in variant %}
                <span class="badge badge-{{acmg_map[variant.acmg_classification].color}}">{{acmg_map[variant.acmg_classification].short}}</span>
                {% else %}
                -
                {% endif %}
              </a>
            </td>
            <td>
              <a href="{{ url_for('cases.case',
                                        institute_id=institute._id,
                                        case_name=case.display_name) }}">
                {{ case.display_name }}
              </a>
            </td>
            <td>
              <span class="badge badge-{{ 'success' if case.status == 'solved' else 'default' }} pull-right">
                {{ case.status }}
              </span>
            </td>
          </tr>
          {% endif %}
          {% endfor %}
          {% endfor %}
        </tbody>
      </table>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.min.js"></script>
<script>
  $(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });
  $(document).ready(function() {
    $('#causatives_table').DataTable( {
        paging: false,
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
        ]
    } );
} );
</script>
{% endblock %}
