{% extends "layout_bs4.html" %}
{% from "utils.html" import comments_panel, pedigree_panel %}
{% from "variants/utils.html" import modal_causative %}

{% block title %}
  {{ super() }} - {{ institute.display_name }} - {{ case.display_name }} - {{ variant.display_name }}
{% 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 %}
  <li class="nav-item">
    <a class="nav-link text-nowrap" href="{{ url_for('cases.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">
    <a class="nav-link text-nowrap" href="{{ url_for('variants.sv_variants', institute_id=institute._id, case_name=case.display_name, variant_type=variant.variant_type) }}">
      {{ variant.variant_type|capitalize }} structural variants
    </a>
  </li>
  <li class="active nav-item">
    <p class="navbar-text text-nowrap">{{ variant.display_name|truncate(20, True) }}</p>
  </li>
{% endblock %}

{% block top_nav_right %}
  {% if config['MAIL_USERNAME'] %}
    {# Email setting must be setup #}
    <li class="nav-item text-nowrap">{{ verify_button() }}</li>
  {% endif %}
  <li class="nav-item text-nowrap">{{ pin_button() }}</li>
  <li class="nav-item text-nowrap">{{ causative_button() }}</li>
  {{ super() }}
{% endblock %}

{% block content_main %}
  {% if variant.missing_data %}
    <div class="alert alert-warning">Showing only first 30 genes!</div>
  {% endif %}
  <div class="row">
    <div class="col-md-6">
      <div class="card mt-3">
        <div class="class-body">
          <ul class="list-group">
            <li class="list-group-item">Rank <span class="badge badge-pill badge-secondary float-right">{{ variant.variant_rank }}</span></li>
            <li class="list-group-item">
              Rank score
              <span class="badge badge-pill badge-secondary float-right">{{ variant.rank_score }}</span>
            </li>

            <li class="list-group-item">
              Category
              <span class="badge badge-pill badge-secondary float-right">{{ variant.sub_category|upper }}</span>
            </li>

            <div class="list-group-item">
              <strong>Gene panels:</strong><br>
              {% for panel_id in variant.panels %}
                <a href="{{ url_for('panels.panel', panel_id=panel_id) }}">{{ panel_id }}</a>&nbsp;&nbsp;
              {% endfor %}
            </div>
            <div class="list-group mt-3">
              <div>
                <form action="{{ url_for('variant.variant_update', institute_id=institute._id, case_name=case.display_name, variant_id=variant._id) }}" method="POST">
                  <label class="ml-3">Variant tag</label>
                  <div class="row">
                    <div class="col-8">
                      <select name="manual_rank" class="form-control ml-3">
                        <option value="-1">Select a tag...</option>
                        {% for rank, data in manual_rank_options.items() %}
                          <option {% if rank == variant.manual_rank %} selected {% endif %} value="{{ rank }}">
                            {{ data.label }}
                          </option>
                        {% endfor %}
                      </select>
                    </div>
                    <div class="col-4">
                      <button type="submit" class="btn btn-outline-secondary form-control">Save</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <div class="list-group mt-3">
              <div>
                <form action="{{ url_for('variant.variant_update', institute_id=institute._id, case_name=case.display_name, variant_id=variant._id) }}" method="POST">
                  <label class="ml-3">Dismiss variant</label>
                  <div class="row">
                    <div class="col-8 d-flex">
                        <select multiple class="selectpicker ml-3" title="Select categories..." data-style="btn-custom-select" name="dismiss_variant" id="dismiss_variant" >
                        {% for rank, data in dismiss_variant_options.items() %}
                          <option {% if rank~"" in variant.dismiss_variant %} selected {% endif %} value="{{ rank }}">
                            {{ data.label }}
                          </option>
                        {% endfor %}
                      </select>
                    </div>
                    <div class="col-4">
                      <button type="submit" class="btn btn-outline-secondary form-control">Save</button>
                    </div>
                  </div>
                </form>
            </div>
          </ul>
        </div> <!-- end of card -->
      </div> <!-- end of col -->
    </div> <!-- end of row -->

    <div class="col-md-6">
      <div class="card mt-3">
        <ul class="list-group">
          <li class="list-group-item">
            Position
            <div class="float-right">
              {{ variant.chromosome }}:{{ variant.position }} {{ "-" if variant.end_chrom == variant.chromosome else " / "+variant.end_chrom+":" }}{{ variant.end }}
            </div>
          </li>
          <li class="list-group-item">
            Breakpoint 1
            <div class="float-right">
              {{ variant.chromosome }}:{{ variant.position }}
              {% if variant.chromosome == "MT" and case.mt_bams %}
                - Alignment:
                <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('alignviewers.igv', sample=case.sample_names, build=case.genome_build, bam=case.mt_bams, bai=case.mt_bais, contig=variant.chromosome, start=(variant.position - 500), stop=(variant.position + 500)) }}" target="_blank">IGV viewer</a>
              {% elif case.bam_files %}
                - Alignment:
                <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('alignviewers.igv', bam=case.bam_files, bai=case.bai_files, sample=case.sample_names, build=case.genome_build, contig=variant.chromosome, start=(variant.position - 500), stop=(variant.position + 500)) }}" target="_blank">IGV</a>
              {% else %}
                - BAM file(s) missing
              {% endif %}
              - <a class="btn btn-outline-secondary btn-sm" href="http://genome.ucsc.edu/cgi-bin/hgTracks?db=hg19&position=chr{{ variant.chromosome }}:{{ variant.position }}&dgv=pack&knownGene=pack&omimGene=pack" target="_blank">UCSC</a>
            </div>
          </li>
          <li class="list-group-item">
            Breakpoint 2
            <div class="float-right">
              {{ variant.end_chrom }}:{{ variant.end }}
              {% if variant.end_chrom == "MT" and case.mt_bams %}
                - Alignment:
                <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('alignviewers.igv', sample=case.sample_names, build=case.genome_build, bam=case.mt_bams, bai=case.mt_bais, contig=variant.end_chrom, start=(variant.end - 500), stop=(variant.end + 500)) }}" target="_blank">IGV viewer</a>
              {% elif case.bam_files %}
                - Alignment:
                <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('alignviewers.igv', bam=case.bam_files, bai=case.bai_files, sample=case.sample_names, build=case.genome_build, contig=variant.end_chrom, start=(variant.end - 500), stop=(variant.end + 500)) }}" target="_blank">IGV</a>
              {% else %}
                - BAM file(s) missing
              {% endif %}
                - <a class="btn btn-outline-secondary btn-sm" href="http://genome.ucsc.edu/cgi-bin/hgTracks?db=hg19&position=chr{{ variant.end_chrom }}:{{ variant.end }}&dgv=pack&knownGene=pack&omimGene=pack" target="_blank">UCSC</a>
            </div>
          </li>
  	      <li class="list-group-item">
  	        Cytoband
            <div class="float-right">
              {% if variant.chromosome == variant.end_chrom and variant.cytoband_start == variant.cytoband_end %}
                {{ variant.chromosome }}{{ variant.cytoband_start }}
              {% elif variant.chromosome == variant.end_chrom %}
                {{ variant.chromosome }}{{ variant.cytoband_start }}{{ variant.cytoband_end }}
              {% else %}
                {{ variant.chromosome }}{{ variant.cytoband_start }}-{{variant.end_chrom}}{{ variant.cytoband_end }}
              {% endif %}
            </div>
  	      </li>
  	      <li class="list-group-item">
  	        Length
            <div class="float-right">
              {{ variant.length }}
              {% if variant.chromosome == "MT" and case.mt_bams %}
                - Alignment:
                <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('alignviewers.igv', sample=case.sample_names, build=case.genome_build, bam=case.mt_bams, bai=case.mt_bais, contig=variant.chromosome, start=(variant.position - 500), stop=(variant.end + 500)) }}" target="_blank">IGV viewer</a>
              {% elif case.bam_files and variant.chromosome == variant.end_chrom %}
                - Alignment:
                <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('alignviewers.igv', bam=case.bam_files, bai=case.bai_files, sample=case.sample_names, build=case.genome_build, contig=variant.chromosome, start=(variant.position - 500), stop=(variant.end + 500)) }}" target="_blank">IGV</a>
              {% elif case.bam_files %}
                - Complex rearrangement: check breakpoint alignments.
              {% else %}
                - BAM file(s) missing
              {% endif %}
              {% if variant.chromosome == variant.end_chrom %}
              - <a class="btn btn-outline-secondary btn-sm" href="http://genome.ucsc.edu/cgi-bin/hgTracks?db=hg19&position=chr{{ variant.chromosome }}:{{ variant.position }}-{{ variant.end }}&dgv=pack&knownGene=pack&omimGene=pack" target="_blank">UCSC</a>
              {% endif %}
            </div>

  	      </li>
  	      <li class="list-group-item">
  	        Type <div class="float-right">{{ variant.sub_category|upper }}</div>
  	      </li>
          {% if variant._id in case.suspects and not variant.clinvar_clinsig %}
            <a href="{{ url_for('variant.clinvar', institute_id=institute._id, case_name=case.display_name, variant_id=variant._id) }}"
              class="btn btn-default form-control" target="_blank">Submit to ClinVar</a>
          {% endif %}
          {% if variant.clinvar_clinsig%}
            <a href="{{ url_for('cases.clinvar_submissions', institute_id=institute._id) }}" class="btn btn-default form-control">Modify clinvar submission</a>
          {% endif %}
        </ul>
      </div>
      {% if variant.custom %}
      <div class="card mt-1 pt-2">
	<table class="table table-bordered table-sm">
          <thead>
            <th>Custom annotation</th>
            <th>Value</th>
          </thead>
          <tbody>
            {% for pair in variant.custom %}
            <tr>
              <td>
		{{ pair[0] }}
              </td>
              <td>
		{{ pair[1] }}
              </td>
            </tr>
            {% endfor %}
          </tbody>
	</table>
      </div>
      {% endif %}


    </div>
  </div>

  <div class="row">
    <div class="col-md-4">
      {{ frequencies(variant) }}
    </div>
    <div class="col-md-8">
      {{ gt_calls(variant.samples) }}
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-9 {{ 'col-md9' if has_pedigree }}">
      {{ comments_panel(institute, case, current_user, variant.comments, variant_id=variant._id) }}
    </div>
    {% set has_pedigree = case.madeline_info and case.individuals|length > 1 %}
    {% if has_pedigree %}
      <div class="col-xs-12 col-md-3">{{ pedigree_panel(case) }}</div>
    {% endif %}
  </div>

  <div class="row">
    <div class="col-md-12">
      {{ overlapping(overlapping_vars, variant.rank_score) }}
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <div class="card">
        <nav>
          <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-genes-tab" data-toggle="tab" href="#nav-genes" role="tab" aria-controls="nav-genes" aria-selected="true">Genes</a>
            <a class="nav-item nav-link" id="nav-transcripts-tab" data-toggle="tab" href="#nav-transcripts" role="tab" aria-controls="nav-transcripts" aria-selected="false">Transcripts</a>
          </div>
        </nav>
        <div class="tab-content mt-3" id="nav-tabContent">
          <div class="tab-pane fade show active" id="nav-genes" role="tabpanel" aria-labelledby="nav-genes-tab">{{ genes_panel(variant) }}</div>
          <div class="tab-pane fade" id="nav-transcripts" role="tabpanel" aria-labelledby="nav-transcripts-tab">{{ transcripts_panel() }}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      {{ ext_links(variant) }}
    </div>
  </div>

  {% if config['MAIL_USERNAME'] %}
    {# Email setting must be setup #}
    {{ verify_modal() }}
  {% endif %}

  {% if config['MAIL_USERNAME'] %}
    {# Email setting must be setup #}
    {{ modal_cancel_verify() }}
  {% endif %}
{{ modal_causative(case, institute, variant) }}
{% endblock %}

{% macro pin_button() %}
  {% if variant._id not in case.suspects %}
    <form action="{{ url_for('cases.pin_variant',
                             institute_id=institute._id,
                             case_name=case.display_name,
                             variant_id=variant._id) }}"
          method="POST">
      <button name="action" value="ADD" type="submit" class="btn btn-light navbar-btn" title="Pin variant">Pin</button>
    </form>
  {% else %}
    <form action="{{ url_for('cases.pin_variant',
                             institute_id=institute._id,
                             case_name=case.display_name,
                             variant_id=variant._id) }}"
          method="POST">
      <button name="action" value="DELETE" type="submit" class="btn btn-light navbar-btn" title="Unpin variant">Unpin</button>
    </form>
  {% endif %}
{% endmacro %}

{% macro causative_button() %}
  {% if variant._id in case.causatives %}
      <form action="{{ url_for('cases.mark_causative',
                               institute_id=institute._id,
                               case_name=case.display_name,
                               variant_id=variant._id,
                               partial_causative=False) }}"
            method="POST">
        <button name="action" value="DELETE" type="submit" class="btn btn-light navbar-btn" title="Reset causative">
          Reset causative
        </button>
      </form>
      {% elif variant._id in case.partial_causatives %}
        <form action="{{ url_for('cases.mark_causative',
                                 institute_id=institute._id,
                                 case_name=case.display_name,
                                 variant_id=variant._id,
                                 partial_causative=True) }}"
              method="POST">
        <button name="action" value="DELETE" type="submit" class="btn btn-light navbar-btn" title="Reset causative">
          Reset partial causative
        </button>
      </form>
      {% else %}
      <button class="btn btn-light navbar-btn" data-toggle="modal" data-target="#causativeModal">
        Mark causative
      </button>
  {% endif %}
{% endmacro %}

{% macro frequencies(variant) %}
  <div class="card panel-default mt-3">
    <div class="panel-heading">Frequencies</div>
    <ul class="list-group">
      {% for freq_name, value in variant.frequencies %}
        <li class="list-group-item">
          {{ freq_name }}
          {% if value %}
            <span class="badge badge-secondary float-right">{{ value|human_decimal }}</span>
          {% else %}
            <span class="float-right">-</span>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
{% endmacro %}

{% macro gt_calls(samples) %}
  <div class="card mt-3">
    <table class="table table-bordered table-sm">
      <thead>
        <tr>
          <th rowspan="2">Sample</th>
          <th rowspan="2">Genotype</th>
          <th colspan="2">Alleles</th>
          <th rowspan="2">GQ</th>
        </tr>
        <tr>
          <th>1st</th>
          <th>2nd</th>
        </tr>
      </thead>
      <tbody>
        {% for sample in samples %}
          <tr>
            <td>{{ sample.display_name }}</td>
            <td>{{ sample.genotype_call }}</td>
            {% for allele in sample.allele_depths %}
              <td>{{ allele }}</td>
            {% endfor %}
            <td>{{ sample.genotype_quality }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if variant.callers %}
      <div class="panel-footer">
        {% for name, caller in variant.callers %}
          <span class="badge badge-secondary">{{ name }}: {{ caller }}</span>
        {% endfor %}
      </div>
    {% endif %}
  </div>
{% endmacro %}

{% macro genes_panel(variant) %}
  <div class="card panel-default">
    <div class="table-responsive">
      <table id="genes_table" class="table table-bordered">
        <thead>
          <tr>
            <th>Gene</th>
            <th>Ensembl</th>
            <th>Region</th>
            <th>Function</th>
            <th>Description</th>
            <th>OMIM</th>
          </tr>
        </thead>
        <tbody>
          {% for gene in variant.genes %}
            <tr>
              {% if gene.common %}
              <td>
                <a href="{{ url_for('genes.gene', hgnc_id=gene.hgnc_id) }}">
                  {{ gene.common.hgnc_symbol if gene.common else gene.hgnc_id }}
                </a>
              </td>
              <td>
                <a target="_blank" href="{{ gene.ensembl_link }}">
                  {{ gene.common.ensembl_id }}
                </a>
              </td>
              <td>{{ gene.region_annotation }}</td>
              <td>{{ gene.functional_annotation }}</td>
              <td>{{ gene.common.description|replace('_', ' ') }}</td>
              <td>
                {% if gene.common.omim_id %}
                  <a href="http://omim.org/entry/{{ gene.common.omim_id }}" target="_blank">
                    {{ gene.common.omim_id }}
                  </a>
                {% endif %}
              </td>
              {% else %}
                <td>
                  <a href="https://www.genenames.org/tools/search/#!/all?query={{ gene.hgnc_id }}" target="_blank">
                    {{ gene.hgnc_id }}
                  </a>
                </td>
                <td></td>
                <td>{{ gene.region_annotation }}</td>
                <td>{{ gene.functional_annotation }}</td>
                <td></td>
                <td></td>
              {% endif %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endmacro %}

{% macro transcripts_panel() %}
<div class="card panel-default">
  <div class="table-responsive">
    <table id="transcripts_table" class="table table-bordered">
      <thead>
        <tr>
          <th>Gene</th>
          <th>Transcript</th>
          <th>RefSeq</th>
          <th>Biotype</th>
          <th>Mutation type</th>
          <th>Strand</th>
          <th>Exon</th>
          <th>Intron</th>
        </tr>
      </thead>
      <tbody>
        {% for gene in variant.genes %}
          {% for transcript in gene.transcripts %}
            <tr class="{{ 'danger' if transcript.is_disease_associated }}">
              <td>
                <a href="{{ url_for('genes.gene', hgnc_id=gene.hgnc_id) }}">
                  {{ gene.common.hgnc_symbol if gene.common else gene.hgnc_id }}
                </a>
              </td>
              <td class="d-flex justify-content-around align-items-center">
                <a target="_blank" href="{{ transcript.ensembl_link }}">
                  {{ transcript.transcript_id }}
                </a>
                {% if transcript.is_canonical %}
                  <span class="badge badge-info">C</span>
                {% endif %}
              </td>
              <td>
                {{ transcript.refseq_identifiers|join(',') }}
              </td>
              <td>{{ transcript.biotype or '' }}</td>
              <td data-toggle="tooltip" data-placement="right" title="{{ transcript.functional_annotations|join(', ') }}">
                {{ transcript.functional_annotations
                      |join(', ')
                      |truncate(20, True) }}
              </td>
              <td class="text-center">{{ transcript.strand }}</td>
              <td>{{ transcript.exon or '' }}</td>
              <td>{{ transcript.intron or '' }}</td>
            </tr>
          {% endfor %}
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endmacro %}

{% macro ext_links(variant) %}
  {# External links #}
  <div class="card">
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <a class="btn btn-outline-secondary form-control" href="http://grch37.ensembl.org/Homo_sapiens/Location/View?db=core;r={{ variant.chromosome }}:{{ variant.position }}-{{ variant.end }}" target="_blank">Ensembl</a>
          </td>
	  <td>
	    <a class="btn btn-outline-secondary form-control" href="https://decipher.sanger.ac.uk/browser#q/{{ variant.chromosome }}:{{ variant.position }}-{{ variant.end }}%20/location/{{ variant.chromosome }}:{{ variant.position }}-{{ variant.end }}" target ="_blank">DECIPHER</a>
	  </td>
        </tr>
      </tbody>
    </table>
  </div>
{% endmacro %}


{% macro overlapping(other_variants, rank_score) %}
  <div class="card panel-default">
    <div class="panel-heading">Overlapping SNVs</div>
    <table id="overlapping_snvs_table" class="table table-bordered">
      <thead>
        <tr>
          <th>Variant</th>
          <th>Gene</th>
          <th>Combined score</th>
          <th>Rank score</th>
          <th>Region</th>
          <th>Function</th>
        </tr>
      </thead>
      <tbody>
        {% for variant in other_variants %}
          <tr>
            <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>{{ variant.hgnc_symbols|join(', ') }}</td>
            <td class="text-right">{{ rank_score + variant.rank_score }}</td>
            <td class="text-right">{{ variant.rank_score }}</td>
            <td>{{ variant.region_annotations|join(',') }}</td>
            <td>{{ variant.functional_annotations|join(',') }}</td>
          </tr>
        {% else %}
          <tr>
            <td colspan="6">No overlapping SNVs found</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

{% endmacro %}

{% macro verify_button() %}
  {% if variant.sanger_ordered %}
    {% if variant.validation in ['True positive', 'False positive']%}
      <p class="navbar-text">Validation: {{ variant.validation }}</p>
    {% else %}
      <button class="btn btn-light navbar-btn" data-toggle="modal" data-target="#cancelVerifyModal">
        Verification pending...
      </button>
    {% endif %}
  {% else %}
    <button class="btn btn-light navbar-btn" data-toggle="modal" data-target="#svVerifyModal">
      Verify
    </button>
  {% endif %}
{% endmacro %}

{% macro verify_modal() %}
<form action="{{ url_for('variant.verify', institute_id=institute._id,
                         case_name=case.display_name, variant_id=variant._id, variant_category=variant.category, order=True) }}"
      method="POST">
  <div class="modal fade" id="svVerifyModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Order verification</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {{ verify_form() }}
        </div>
        <div class="modal-footer">
          <button class="btn btn-danger" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Send verification order request</button>
        </div>
      </div>
    </div>
  </div>
</form>
{% endmacro %}

{% macro modal_cancel_verify() %}
  <form action="{{ url_for('variant.verify', institute_id=institute._id,
                           case_name=case.display_name, variant_id=variant._id, variant_category=variant.category, order=False) }}"
        method="POST">
    <div class="modal fade" id="cancelVerifyModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Cancel variant verification</h4>
          </div>
          <div class="modal-body">
            {{ verify_form() }}
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Send cancellation request</button>
          </div>
        </div>
      </div>
    </div>
  </form>
{% endmacro %}

{% macro verify_form() %}
<ul class="list-group">
  <div class="list-group-item">
    <strong>Case {{ case.display_name }}</strong><br>
    <a href="{{ url_for('variant.sv_variant', institute_id=institute._id,
                        case_name=case.display_name, variant_id=variant._id) }}">
      {% if variant.end_chrom and variant.end_chrom == variant.chromosome %}
        {{variant.chromosome}}:{{variant.position}}-{{variant.end}}
      {% elif variant.end_chrom %}
        {{variant.chromosome}}:{{variant.position}} - {{variant.end_chrom}}:{{variant.end}}
      {% endif %}
      {{ variant.sub_category|upper }}
    </a>
  <div class="list-group-item"><strong>Variant type</strong>: {{variant.sub_category|upper}}</div>
  <div class="list-group-item"><strong>Breakpoint 1</strong>: chr{{variant.chromosome}}:{{variant.position}}</div>
  <div class="list-group-item"><strong>Breakpoint 2</strong>: chr{{variant.end_chrom if variant.end_chrom else variant.chromosome}}:{{variant.end}}</div>
  <div class="list-group-item"><strong>Lenght</strong>: {{variant.length}}</div>
  </div>
  <div class="list-group-item">
    <strong>Encompassing genes</strong>:
    {{ variant.hgnc_symbols|join(', ') }}
  </div>
  <div class="list-group-item">
    <strong>Gene panels</strong>:
    {{ variant.panels|join(', ') }}
  </div>
  <div class="list-group-item disabled"><strong>GT call</strong></div>
  {% for individual in variant.samples %}
    <div class="list-group-item">
      {{ individual.display_name }}: {{ individual.genotype_call }}
    </div>
  {% endfor %}
  <div class="list-group-item">
    <strong>Ordered by</strong>:
    {{ current_user.name }}
  </div>
</ul>
{% endmacro %}

{% block scripts %}
  {{ super() }}
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
  <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

  <script>
    function set_scrolly_table(table_id) {
    if (document.getElementById(table_id).rows.length > 5) {
      $('#' + table_id).DataTable({
        scrollY: 350,
        stripeClasses: [],
        scrollCollapse: true,
        paging: false,
        searching: false,
        ordering: true,
        info: false})
      }
    }

    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
      $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
    });

    set_scrolly_table('genes_table')
    set_scrolly_table('transcripts_table')
    set_scrolly_table('overlapping_snvs_table')

    function validate_causative_form(){
      var partial_checkbox = document.getElementById("partial_causative");
      if (partial_checkbox.checked == true){
        var nOmimTerms = $('#omim_select option:selected').length;
        var nHpoTerms = $('#hpo_select option:selected').length;
        if ( nOmimTerms== 0 & nHpoTerms==0){
          alert('Select at least a phenotype term or diagnosis')
          return false
        }
      }
    }
  </script>
{% endblock %}
