{% extends "layout_bs4.html" %}
{% from "utils.html" import comments_panel, activity_panel, pedigree_panel %}
{% from "variants/utils.html" import compounds_table, modal_causative %}
{% from "variant/utils.html" import rankscore_panel, overlapping_panel, genes_panel, transcripts_panel, proteins_panel,  pin_button, causative_button %}
{% from "variant/tx_overview.html" import disease_associated, transcripts_overview %}
{% from "variant/gene_disease_relations.html" import omim_phenotypes, inheritance_panel, autozygosity_panel, genemodels_panel %}
{% from "variant/variant_details.html" import frequencies, gtcall_panel, observations_panel, old_observations, severity_list, conservations, mappability %}
{% from "variant/buttons.html" import variant_tag_button, variant_tier_button, dismiss_variant_button, mosaic_variant_button %}

{% 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 %}
  {{ super() }}
  <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">
    {% if cancer %}
      <a class="nav-link text-nowrap" href="{{ url_for('variants.cancer_variants', institute_id=institute._id, case_name=case.display_name, variant_type=variant.variant_type) }}">
        {{ variant.variant_type|capitalize }} cancer variants
      </a>
    {% elif str %}
      <a class="nav-link text-nowrap" href="{{ url_for('variants.str_variants', institute_id=institute._id, case_name=case.display_name, variant_type=variant.variant_type) }}">
        {{ variant.variant_type|capitalize }} STR variants
      </a>
    {% else %}
      <a class="nav-link text-nowrap" href="{{ url_for('variants.variants', institute_id=institute._id, case_name=case.display_name, variant_type=variant.variant_type, gene_panels=case.panels|selectattr('is_default')|map(attribute='panel_name')|list) }}">
        {{ variant.variant_type|capitalize }} SNV and INDELs
      </a>
    {% endif %}
  </li>
  <li class="nav-item active">
    <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">{{ sanger_button() }}</li>
  {% endif %}
  <li class="nav-item">{{ pin_button(variant, case, institute) }}</li>
  <li class="nav-item text-nowrap">{{ causative_button(variant, case, institute) }}</li>
  {{ super() }}
{% endblock %}

{% block content_main %}
  <div class="container-float">
    {% if variant.missing_data %}
    <div class="row">
      <div class="alert alert-warning">Showing only first 30 genes!</div>
    </div>
    {% endif %}

    <div class="row">
      <div class="col-sm-12">{{ matching_variants() }}</div>
      <div class="col-sm-4">{{ panel_basics() }}</div>
      <div class="col-sm-8">
        <div class="col-sm-12">{{ panel_summary() }}</div>
        {% if variant.disease_associated_transcripts %}
          <div class="col-sm-12">{{ disease_associated(variant) }}</div>
        {% endif %}
        <div class="col-sm-12">{{ transcripts_overview(variant) }}</div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-4">
        <div class="col-sm-12">{{ inheritance_panel(variant) }}</div>
        {% if variant.azlength %}
          <div class="col-sm-12">{{ autozygosity_panel(variant) }}</div>
        {% endif %}
      </div>
      <div class="col-sm-4">{{ genemodels_panel(variant) }}</div>
      <div class="col-sm-4">{{ omim_phenotypes(variant) }}</div>
    </div>

    <div class="row">
      <div class="col">{{ frequencies(variant) }}</div>
        {% if config['LOQUSDB_SETTINGS'] %}
          <div class="col">{{ observations_panel(variant, observations, case) }}</div>
        {% endif %}
        <div class="col">{{ old_observations(variant) }}</div>
      </div>
    </div>

    <div class="row">
      <div class="col">{{ severity_list(variant) }}</div>
      <div class="col">{{ conservations(variant) }}</div>
      <div class="col">{{ mappability(variant) }}</div>
    </div>

    <div class="row">
      <div class="col-sm-4">
        {{ comments_panel(institute, case, current_user, variant.comments, variant_id=variant._id) }}
      </div>
      <div class="col-sm-5">{{ gtcall_panel(variant) }}</div>
      {% set has_pedigree = case.madeline_info and case.individuals|length > 1 %}
      {% if has_pedigree %}
        <div class="col-sm-3">{{ pedigree_panel(case) }}</div>
      {% endif %}
    </div>
    {% if variant.compounds %}
      <div class="row">
        <div class="col-12">{{ compounds_panel() }}</div>
      </div>
    {% endif %}
    <div class="row">
      <div class="col-12">{{ rankscore_panel(variant) }}</div>
    </div>
    <div class="row">
      <div class="col-12">{{ overlapping_panel(variant, overlapping_vars, case, institute) }}</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>
              <a class="nav-item nav-link" id="nav-proteins-tab" data-toggle="tab" href="#nav-proteins" role="tab" aria-controls="nav-proteins" aria-selected="false">Proteins</a>
            </div>

          </nav>
          <div class="tab-content" 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(variant) }}</div>
            <div class="tab-pane fade" id="nav-proteins" role="tabpanel" aria-labelledby="nav-proteins-tab">{{ proteins_panel(variant) }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">{{ external_links() }}</div>
    </div>
    <div class="row">
      <div class="col-12">{{ activity_panel(events|reverse) }}</div>
    </div>
    {% if config['MAIL_USERNAME'] %}
      {# Email setting must be setup #}
      {{ modal_sanger() }}
    {% endif %}

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

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

{% macro sanger_form() %}
  <ul class="list-group">
    <div class="list-group-item">
      <strong>Case {{ case.display_name }}</strong><br>
      <a href="{{ url_for('variant.variant', institute_id=institute._id,
                          case_name=case.display_name, variant_id=variant._id) }}">
        {{ variant.display_name }}
      </a>
    </div>
    <div class="list-group-item">
      <strong>HGNC symbols</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>Amino acid changes</strong></div>
    {% for gene in variant.genes %}
        {% for transcript in gene.primary_transcripts %}
          {% for refseq_id in transcript.refseq_identifiers %}
              {% if transcript.protein_sequence_name%}
                <div class="list-group-item">
                  {{ refseq_id }}<span class="text-muted"> ({{ transcript.transcript_id }})</span>:
                  {{ (transcript.protein_sequence_name or '')|url_decode }}
                </div>
              {% endif %}
            {% endfor %}
          {% endfor %}
    {% endfor %}
    <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>
    <div class="list-group-item">Comment: <input type="text" size=45 name="verification_comment"></div>
  </ul>
{% endmacro %}

{% macro matching_variants() %}
  <div class="card mt-3">
    <div class="card-body mt-1 ml-1" style="padding: 0;">
    {% if causatives %}
      <h6>Matching causatives from other cases</h6>
        <ul class="list-group list-group-flush">
          {% for other_variant in causatives %}
            <li class="list-group-item">
              <a href="{{ url_for('variant.variant',
                                  institute_id=institute._id,
                                  case_name=other_variant.case_display_name,
                                  variant_id=other_variant._id) }}">
                {{ other_variant.case_display_name }}
              </a>
            </li>
          {% endfor %}
        </ul>
    {% else %}
      <h6>No matching causative variants</h6>
    {% endif%}
    </div> <!--end of card body-->
  </div><!--end of card-->
{% endmacro %}

{% macro panel_basics() %}
  <div class="card panel-default">
    <div class="panel-heading">Basics</div>
    <div class="card-body">
      <table class="table table-sm">
        <tbody>
          <tr>
            <td>
              Position
              <span>
                <strong>{{ variant.chromosome }}:<span class="text-muted">{{ variant.position }}</span></strong>
                {% if variant.is_par %}
                  <span class="badge badge-info">PAR</span>
                {% endif %}
              </span>
            </td>
            <td>
              Change
              <span>
                {%- if variant.reference|length > 8 -%}
                  <strong>{{ variant.reference[:1] }}..{{variant.reference[-1:]}}</strong><button type="button" class="fa fa-file-text btn-xs js-tooltip js-copy"
                    style="background-color: Transparent;outline:none; border: none;" data-toggle="tooltip" data-placement="bottom" data-copy="{{variant.reference}}" title="Copy to clipboard">
                  </button>
                {%- else -%}
                  <strong>{{ variant.reference }}</strong>
                {%- endif -%}
                  →
                {%- if variant.alternative|length > 8 -%}
                  <strong>{{ variant.alternative[:1] }}..{{variant.alternative[-1:]}}</strong><button type="button" class="fa fa-file-text btn-xs js-tooltip js-copy"
                    style="background-color: Transparent;outline:none; border: none;" data-toggle="tooltip" data-placement="bottom" data-copy="{{variant.alternative}}" title="Copy to clipboard">
                    </button>
                {%- else -%}
                  <strong>{{ variant.alternative }}</strong>
                {%- endif -%}
                </span>
            </td>
          </tr>
          {% if variant.str_repid %}
          <tr>
            <td colspan="2">
              Repeat locus
              <span><strong>{{variant.str_repid}}</strong></span>
            </td>
          </tr>
          {% endif %}
        </tbody>
      </table>
      <div class="table-responsive">
        <table class="table table-sm"">
          <thead class="border-top">
            <tr class="active">
              <th>Gene</th>
              <th>Region</th>
              <th>Function</th>
            </tr>
          </thead>
          <tbody>
            {% for gene in variant.genes %}
              <tr>
                <th>
                  <a href="{{ url_for('genes.gene', hgnc_id=gene.hgnc_id) }}">
                    {{ gene.common.hgnc_symbol if gene.common else gene.hgnc_id }}
                  </a>
                </th>
                <td>{{ gene.region_annotation }}</td>
                <td>{{ gene.functional_annotation|truncate(20, True) }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <ul class="list-group">
        <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>
      </ul>
      {{ variant_tag_button(variant, institute, case, manual_rank_options) }}
      {% if cancer %}
       {{ variant_tier_button(variant, institute, case, cancer_tier_options) }}
      {% endif %}
        {{ dismiss_variant_button(variant, institute, case, dismiss_variant_options) }}
      {% if not cancer %}
        {{ mosaic_variant_button(variant, institute, case, mosaic_variant_options) }}
      {% endif %}
      {{ acmg_form(variant.acmg_classification.code if variant.acmg_classification) }}
      <div class="mt-3">
        <a href="{{ url_for('variant.variant_acmg', institute_id=institute._id, case_name=case.display_name, variant_id=variant._id) }}" class="btn btn-outline-secondary form-control">Classify</a>
        {% 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-outline-secondary 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-outline-secondary form-control">Modify clinvar submission</a>
        {% endif %}
      </div>
      {% if evaluations %}
        <div class="list-group mt-3">
          {% for evaluation in evaluations %}
            {{ acmg_classification_item(evaluation) }}
          {% endfor %}
        </div>
      {% endif %}
    </div>
  </div>
{% endmacro %}

{% macro panel_summary() %}
  <div class="card mt-3 panel-default">
      <div class="panel-heading">Summary</div>
    <div class="card-body">
      <table class="table table-bordered table-fixed table-sm">
        <tbody>
          <tr>
            <td>
              Rank
              <span><strong>{{ variant.variant_rank }}</strong></span>
            </td>
            <td>
              Rank score
              <span><strong>{{ variant.rank_score }}</strong></span>
            </td>
            <td>
              CADD score
              <span><strong>{{ variant.cadd_score or '-' }}</strong></span>
            </td>
          </tr>
        </tbody>
      </table>
      <table class="table table-bordered table-fixed table-sm">
        <tbody class="border-top">
          <tr>
            <td>
              Matches OMIM inhert.
              {% if variant.is_matching_inheritance %}
                <span class="badge badge-success float-right">Yes</span>
              {% else %}
                <div class="badge badge-warning float-right">No</div>
              {% endif %}
            </td>
            <td>
              Frequency
              <div class="badge badge-{% if variant.frequency == 'common' %}danger{% elif variant.frequency == 'uncommon' %}warning{% else %}success{% endif %} float-right">
                {{ variant.frequency }}
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      {% if variant.clinsig_human %}
        <table class="table table-bordered table-fixed table-sm">
          <thead>
            <thead>
              <tr class="active">
                <th>CLINSIG</th>
                <th>Accession</th>
                <th>Revstat</th>
              </tr>
            </thead>
          </thead>
          <tbody>
            {% for clinsig in variant.clinsig_human %}
              <tr>
                <td>{{ clinsig.human }}</td>
                <td>
                  <a href="{{ clinsig.link }}" target="_blank">{{ clinsig.accession }}</a>
                </td>
                <td>{{ clinsig.revstat }}</td>
              </tr>
            {% else %}
              <i>No annotations</i>
            {% endfor %}
          </tbody>
        </table>
      {% endif %}
      <ul class="list-group">
        {% if variant.dbsnp_id %}
          <li class="list-group-item">
            SNPedia
            <span class="float-right">
              <a target="_blank" href="http://snpedia.com/index.php/{{ variant.dbsnp_id }}">
                {{ variant.dbsnp_id }}
              </a>
            </span>
          </li>
        {% endif %}
      </ul>

      <form role="form" action="{{ url_for('alignviewers.igv') }}" target="_blank" method="POST">
        <!-- general hidden fields required to submit POST request to IGV viewer -->
        {% if case.mt_bams or case.bam_files %}
          <input type="hidden" name="sample" value="{{case.sample_names|join(',')}}">
          <input type="hidden" name="build" value="{{case.genome_build}}">
          <input type="hidden" name="contig" value="{{variant.chromosome}}">
          <input type="hidden" name="start" value="{{variant.position - 50}}">
          <input type="hidden" name="stop" value="{{variant.end_position + 50}}">
          <input type="hidden" name="center_guide" value="T">
          <!--<input type="hidden" name="now" values="{{now}}"-->
        {% endif %}
        <!-- end of general hidden form fields -->
        <div class="panel-heading">Gene coverage</div>
        <table class="table table-bordered table-fixed table-sm">
          <tbody>
            <tr>
              <td>
                {% if variant.chromosome == "MT" %}
                  {% if case.mt_bams %}
                    <input type="hidden" name="mt_bam" value="{{case.mt_bams|join(',')}}">
                    <input type="hidden" name="mt_bai" value="{{case.mt_bais|join(',')}}">
                    <button class="btn btn-outline-secondary btn-sm" name="align" value="mt_bam" type=submit>IGV viewer</button>
                  {% else %}
                    <span class="text-muted">MT BAM file(s) missing</span>
                  {% endif %}
                {% elif case.bam_files %}
                  <input type="hidden" name="bam" value="{{case.bam_files|join(',')}}">
                  <input type="hidden" name="bai" value="{{case.bai_files|join(',')}}">
                  {% if case.rhocall_beds %}
                    <input type="hidden" name="rhocall_bed" value="{{case.rhocall_beds|join(',')}}">
                    <input type="hidden" name="rhocall_wig" value="{{case.rhocall_wigs|join(',')}}">
                  {% endif %}
                  {% if case.tiddit_coverage_wigs %}
                    <input type="hidden" name="tiddit_coverage_wig" value="{{case.tiddit_coverage_wigs|join(',')}}">
                  {% endif %}
                  {% if case.upd_regions_beds %}
                    <input type="hidden" name="upd_regions_bed" value="{{case.upd_regions_beds|join(',')}}">
                  {% endif %}
                  {% if case.upd_sites_beds %}
                    <input type="hidden" name="upd_sites_bed" value="{{case.upd_sites_beds|join(',')}}">
                  {% endif %}
                  <button class="btn btn-outline-secondary btn-sm" name="align" value="bam" type="submit">IGV viewer</button>
                {% else %}
                  <span class="text-muted">BAM file(s) missing</span>
                {% endif %}
              </td>
              {% if config.SQLALCHEMY_DATABASE_URI %}
                {% for gene in variant.genes %}
                  <td>
                    <a target="_blank" href="{{ url_for('report.gene', gene_id=gene.hgnc_id, sample_id=variant.samples|map(attribute='sample_id')|list) }}">
                      {{ gene.common.hgnc_symbol if gene.common else gene.hgnc_id }}
                    </a>
                  </td>
                {% endfor %}
              {% endif %}
            </tr>
          </tbody>
        </table>
      </form>

      {% if variant.custom %}
      <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>
      {% endif %}

    </div> <!-- end of card body -->
  </div> <!--  end of card div -->
{% endmacro %}

{% macro compounds_panel() %}
  <div class="card panel-default">
    <div class="panel-heading">Compounds (top 20)</div>
    <div class="card-body">
      {{ compounds_table(institute, case, variant.compounds[:20]) }}
    </div>
  </div>
{% endmacro %}


{% macro modal_sanger() %}
  <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="sangerModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Order Sanger sequencing</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            {{ sanger_form() }}
          </div>
          <div class="modal-footer">
            <button class="btn btn-danger" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Send sanger order request</button>
          </div>
        </div>
      </div>
    </div>
  </form>
{% endmacro %}

{% macro modal_cancel_sanger() %}
  <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="cancelSangerModal">
      <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 Sanger sequencing</h4>
          </div>
          <div class="modal-body">
            {{ sanger_form() }}
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Send sanger cancellation request</button>
          </div>
        </div>
      </div>
    </div>
  </form>
{% endmacro %}

{% macro external_links() %}
  <div class="panel panel-default">
    {% for gene in variant.genes %}
      <div class="panel-heading">
        External links: {{ gene.common.hgnc_symbol if gene.common else gene.hgnc_id }}
      </div>
      <div class="panel-body">
        <div class="btn-group-justified">
          <a href="{{ gene.ensembl_link }}" class="btn btn-outline-secondary" target="_blank">Ensembl</a>
          <a href="{{ gene.hpa_link }}" class="btn btn-outline-secondary" target="_blank">HPA</a>
          <a href="{{ gene.string_link }}" class="btn btn-outline-secondary" target="_blank">STRING</a>
          <a href="{{ gene.genemania_link }}" class="btn btn-outline-secondary" target="_blank">GENEMANIA</a>
          <a href="{{ variant.ucsc_link }}" class="btn btn-outline-secondary" target="_blank">UCSC</a>
          {% if gene.entrez_link %}
            <a href="{{ gene.entrez_link }}" class="btn btn-outline-secondary" target="_blank">Entrez</a>
          {% endif %}
          <a href="http://tools.genes.toronto.edu/" class="btn btn-outline-secondary" target="_blank">SPANR</a>
          <a href="{{ gene.reactome_link }}" class="btn btn-outline-secondary" target="_blank">Reactome</a>
          <a href="{{ gene.expression_atlas_link }}" class="btn btn-outline-secondary" target="_blank">Expr. Atlas</a>
          <a href="{{ gene.clingen_link }}" class="btn btn-outline-secondary" target="_blank">ClinGen</a>
          {% if case.mt_bams or case.bam_files %}
            <a href="{{ variant.alamut_link }}" class="btn btn-outline-secondary" target="_blank">Alamut</a>
          {% endif %}
          <a href="{{ gene.ppaint_link }}" class="btn btn-outline-secondary" target="_blank">Protein Paint</a>
          {% if variant.chromosome == 'MT' %}
            <a href="https://www.mitomap.org/foswiki/bin/view////Main/SearchAllele" target="_blank">MitoMap</a>
          {% endif %}
        </div>
      </div>
      <div class="panel-body">
        <form action="http://marrvel.org/search" method="POST" target="_blank">
          <button type="submit" class="btn btn-outline-secondary">MARRVEL</button>
          <input type="hidden" name="variantGeneId" value="{{ variant.chromosome }}:{{ variant.position }} {{ variant.reference }}>{{ variant.alternative }}">
          <input type="hidden" name="inGeneSymbol" value="{{ gene.common.hgnc_symbol if gene.common }}">
          <input type="hidden" name="OMIMdbCheck" value="on">
          <input type="hidden" name="ExACdbCheck" value="on">
          <input type="hidden" name="Geno2MPdbCheck" value="on">
          <input type="hidden" name="DGVdbCheck" value="on">
          <input type="hidden" name="DECIPHERdbCheck" value="on">
        </form>
      </div>
    {% endfor %}
  </div>
{% endmacro %}

{% macro acmg_form(selected=None) %}
  <label class="mt-3">ACMG classification</label>
  <form action="{{ url_for('variant.variant_update', institute_id=institute._id, case_name=case.display_name, variant_id=variant._id) }}" method="POST">
    <div class="d-flex justify-content-between">
      {% for option in ACMG_OPTIONS %}
        <button class="btn btn-{{ option.color if (option.code == selected or not selected) else 'outline-secondary' }} form-control {{ 'mr-1' if not loop.last }}" name="acmg_classification" value="{{ option.code }}" title="{{ option.label }}">
          {{ option.short }}
        </button>
      {% endfor %}
    </div>
  </form>
{% endmacro %}

{% macro acmg_classification_item(data) %}
  {% set current_variant = (data.variant_specific == variant._id) %}
  <li class="list-group-item {{ 'list-group-item-info' if current_variant }}">
    <div class="d-flex">
      <span>
        <a href="{{ url_for('variant.evaluation', evaluation_id=data._id) }}">
          {{ data.classification.label }}
        </a>
        <span class="badge badge-info">{{ data.classification.short }}</span>
      </span>
      <span>
        {% if not current_variant %}
          <small>{{ data.case.display_name }}</small>
        {% endif %}
      </span>
    </div>
    <small class="text-muted">
      <form action="{{ url_for('variant.evaluation', evaluation_id=data._id) }}" method="POST">
      {{ data.user_name }} on {{ data.created_at.date() }}
      {% if current_variant %}
        <button class="btn btn-xs btn-link">Delete</button>
      {% endif %}
      </form>
    </small>
  </li>
{% endmacro %}

{% block scripts %}
  {{ super() }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.11/purify.min.js"></script>
  <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('transcript_overview_table')
    set_scrolly_table('proteins_panel_table')
    set_scrolly_table('transcripts_panel_table')


    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });

    $(function () {
      $('[data-toggle="tooltip"]').tooltip({
        container: 'body'
      });

    $('select[multiple]').selectpicker({
        width: '100%'
      });
    });

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

    $('.js-copy').click(function() {
      var text = $(this).attr('data-copy');
      var el = $(this);
      copyToClipboard(text, el);
    });

    // Code from https://codepen.io/nathanlong/pen/ZpAmjv
    function copyToClipboard(text, el) {
    var copyTest = document.queryCommandSupported('copy');
    var elOriginalText = el.attr('data-original-title');

    if (copyTest === true) {
      var copyTextArea = document.createElement("textarea");
      copyTextArea.value = text;
      document.body.appendChild(copyTextArea);
      copyTextArea.select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'Copied!' : 'Whoops, not copied!';
        el.attr('data-original-title', msg).tooltip('show');
      } catch (err) {
        console.log('Oops, unable to copy');
      }
      document.body.removeChild(copyTextArea);
      el.attr('data-original-title', elOriginalText);
    } else {
      // Fallback if browser doesn't support .execCommand('copy')
      window.prompt("Copy to clipboard: Ctrl+C or Command+C, Enter", text);
    }
  }

  </script>
{% endblock %}
