{% extends "layout_bs4.html" %}
{% from "cases/collapsible_actionbar.html" import action_bar, research_modal, rerun_modal %}
{% from "utils.html" import comments_panel, activity_panel, pedigree_panel %}
{% from "cases/utils.html" import causatives_list, suspects_list, remove_form, matching_causatives, matching_managed_variants, beacon_modal %}
{% from "cases/individuals_table.html" import cancer_individuals_table, individuals_table %}
{% from "cases/phenotype.html" import cohort_panel, diagnosis_phenotypes, diagnosis_genes, phenotype_groups_panel, phenotype_terms_panel, phenotypes_panel %}
{% from "cases/gene_panel.html" import genepanels_table, hpo_genelist_panel %}


{% block title %}
  {{ super() }} - {{ institute.display_name }} - {{ case.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">
<style>
/*Matchmaker card styling*/
.matchmaker-grid {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
}

.matchmaker-grid-item1 {
  grid-column: 1;
  grid-row: 1;
}

.matchmaker-grid-item2 {
  grid-column: 2;
  grid-row: 1;
}

.matchmaker-grid-item3 {
  grid-column: 2;
  grid-row: 2;
}
</style>
{% 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('overview.cases', institute_id=institute._id) }}">
      {{ institute.display_name }} cases
    </a>
  </li>
  <li class="nav-item active">
    <span class="navbar-text">{{ case.display_name }}</span>
  </li>
{% endblock %}

{% block content_main %}
<div class="container-float">
  <div class="row" id="body-row"> <!--sidebar and main container are on the same row-->
    {{ action_bar(institute, case, collaborators, current_user) }} <!-- This is the sidebar -->
    {{ case_page() }}
  </div> <!-- end of div id body-row -->
</div>
{% endblock %}

{% macro case_page() %}
<div class="col {% if case.status == 'solved' %} bg-success {% elif case.status == 'archived' %} bg-danger-light {% endif %}"> <!-- This is the main container -->
<div class="container_spaced">
  <div class="card">
    <h4 class="card-header">Case: {{case.display_name}}</h4>
    <p class="card-title {% if case.status == 'solved' %} bg-success {% elif case.status == 'archived' %} bg-danger-light {% endif %}">Status: <strong>{{case.status}}</strong>
      <br>
      Internal ID: <strong>{{case._id}}</strong></p>
    <div class="card-body">

      <div class="row text-center"> <!-- variants buttons -->
        <div class="col-sm-12">{{ variants_buttons() }}</div>
      </div>

      {% if other_causatives|length > 0%}
        <div class="row">
          <div class="col-xs-12 col-md-12">{{ matching_causatives(other_causatives, institute, case) }}</div>
        </div>
      {% endif %}

      {% if managed_variants|length > 0%}
        <div class="row">
          <div class="col-xs-12 col-md-12">{{ matching_managed_variants(managed_variants, institute, case) }}</div>
        </div>
      {% endif %}

      <div class="row ">
        <div class="col-xs-12 col-md-6">{{ causatives_list(causatives, partial_causatives, institute, case) }}</div>
        <div class="col-xs-12 col-md-6">{{ suspects_list(suspects, institute, case, manual_rank_options, cancer_tier_options) }}</div>
      </div>

      <div class="row">
        {% if case.track == 'cancer' %}
          <div class="col-xs-12 col-md-12">{{ cancer_individuals_table(case, institute, tissue_types) }}</div>
        {% else %}
          <div class="col-xs-12 col-md-12">{{ individuals_table(case, institute, tissue_types) }}</div>
        {% endif %}
      </div>

      {{ insert_multi_image_panel() }}

      <div class="row">
        <div class="col-md-4">
        {% if case.track != 'cancer' %}
          {% if case.madeline_info and case.individuals|length > 1 %}
            {{ pedigree_panel(case) }}
          {% else %}
            <p>No pedigree picture available.</p>
          {% endif %}
        {% endif %}
          {{ group_panel() }}
        </div>

        <div class="col-8">
          {{ synopsis_panel() }}
          {{ comments_panel(institute, case, current_user, comments) }}
        </div>
      </div>

        <!-- OMIM diagnoses-related code-->
        <div class="row">
          <div class="col-sm-12">
            <div class="card panel-default ">
                <div class="panel-heading"><i class="fa fa-user-md"></i>&nbsp;Diagnoses</div>
                <div class="card-body d-flex flex-row">
                  <div class="col-sm-6">
                    {{ diagnosis_phenotypes(case, institute, omim_terms) }}
                  </div>
                  <div class="col-sm-6">
                    {{ diagnosis_genes(case, institute) }}
                  </div>
                </div><!--end of card body-->
            </div><!--end of card-->
          </div>
        </div>
        <!-- end of OMIM diagnoses-related code-->
        <div class="row">
          <div class="col-md-6">{{ cohort_panel(case, institute, cohort_tags) }}</div>
          <div class="col-md-6">{{ phenotype_groups_panel(case, institute, hpo_groups) }}</div>
        </div>
        <div class="row">
          <div class="col-md-6">{{ phenotype_terms_panel(case, institute) }}</div>
          <div class="col-md-6">{{ phenotypes_panel(case, institute, config) }}</div>
        </div>

        <div class="row">
          <div class="col-md-6">{{ genepanels_table(case, institute) }}</div>
          <div class="col-md-6">{{ hpo_genelist_panel(case, institute, config) }}</div>
        </div>

        <!-- data sharing panels -->
        <div class="row">
          {% if case.clinvar_variants %}
            <div class="col-md-6">{{ clinvar_panel() }}</div>
          {% endif %}
          {% if 'mme_submitter' in current_user.roles %}
            <div class="col-md-6">{{ matchmaker_panel() }}</div>
          {% endif %}
        </div>
        <!-- end of data sharing panels -->
        <div class="row">

          <div class="col-sm-12">{{activity_panel(events)}}</div>
        </div>

        {{ modal_synopsis() }}
        {{ rerun_modal(institute, case) }}
        {{ research_modal(institute, case) }}
        {{ beacon_modal(case) }}
    </div> <!-- end of card body -->
  </div> <!-- end of card div-->
</div>
</div> <!-- end of <div class="col"> -->
{% endmacro %}


{% macro variants_buttons() %}
  <div class="form-group">
    {% if case.vcf_files.vcf_snv %}
      <a class="btn btn-outline-dark" href="{{ url_for('variants.variants', institute_id=institute._id, case_name=case.display_name, variant_type='clinical') }}">Clinical SNV and INDELs</a>
    {% endif %}
    {% if case.vcf_files.vcf_sv %}
      <a class="btn btn-outline-dark" href="{{ url_for('variants.sv_variants', institute_id=institute._id, case_name=case.display_name, variant_type='clinical') }}">Clinical structural variants</a>
    {% endif %}
    {% if case.vcf_files.vcf_str %}
      <a class="btn btn-outline-dark" href="{{ url_for('variants.str_variants', institute_id=institute._id, case_name=case.display_name, variant_type='clinical') }}">Clinical STR variants</a>
    {% endif %}
    {% if case.smn_tsv %}
      <a class="btn btn-outline-dark" href="{{ url_for('cases.sma', institute_id=institute._id, case_name=case.display_name) }}">SMN CN</a>
    {% endif %}
    {% if case.vcf_files.vcf_cancer %}
      <a class="btn btn-outline-dark" href="{{ url_for('variants.cancer_variants', institute_id=institute._id, case_name=case.display_name, variant_type='clinical') }}">Clinical SNV and INDELs</a>
    {% endif %}
    {% if case.vcf_files.vcf_cancer_sv %}
      <a class="btn btn-outline-dark" href="{{ url_for('variants.cancer_sv_variants', institute_id=institute._id, case_name=case.display_name, variant_type='clinical') }}">Clinical structural variants</a>
    {% endif %}
    {% if gens_info.display %}
      <a class="btn btn-outline-dark" target="_blank" href="http://{{gens_info.host}}/{{case.display_name}}?&hg_type={{case.genome_build}}">View CN profile</a>
    {% endif %}
  </div>
  {% if case.is_research%}
  <div class="form-group">
    <div class="btn-group">
    {% if case.track=="cancer" %}
      <a class="btn btn-outline-dark" href="{{ url_for('variants.cancer_variants', institute_id=institute._id, case_name=case.display_name, variant_type='research') }}">Research SNV and INDELs</a>
      <a class="btn btn-outline-dark" href="{{ url_for('variants.cancer_sv_variants', institute_id=institute._id, case_name=case.display_name, variant_type='research') }}">Research structural variants</a>
    {% else %}
      <a class="btn btn-outline-dark" href="{{ url_for('variants.variants', institute_id=institute._id, case_name=case.display_name, variant_type='research') }}">Research SNV and INDELs</a>
      <a class="btn btn-outline-dark" href="{{ url_for('variants.sv_variants', institute_id=institute._id, case_name=case.display_name, variant_type='research') }}">Research structural variants</a>
    {% endif %}
    </div>
  </div>
  {% endif %}
{% endmacro %}

{% macro synopsis_panel() %}
  <div class="card panel-default">
    <div data-toggle='tooltip' class="panel-heading" title="Free text field. Write a summary about the case! Markdown format"><i class="fa fa-id-card-o"></i>&nbsp;Synopsis</div>
      <div class="card-body">
        <div class="row">
          <div class="col-10">
           {{ case.synopsis|markdown if case.synopsis else 'Nothing written yet...' }}
          </div>
          <div class="col-2">
            <button type="button" class="btn btn-outline-secondary form-control" data-toggle="modal" data-target="#edit-synopsis">
              Edit
            </button>
          </div>
        </div>
      </div>
  </div>
{% endmacro %}

{% macro group_panel() %}
  <div class="card panel-default" id="case_groups">
    <div class="panel-heading" data-toggle='tooltip' title="Group cases to share user variant assessments like comments, classification and dismissal. A case can be in multiple groups.">
      <span>
        <i class="fa fa-users mr-1"></i>Group connected cases ({{case_groups|length}} groups)
      </span>
      <span class="float-sm-right" data-toggle='tooltip' data-placement="right" title="Create a new group containing case {{case.display_name}}"><a href="{{ url_for('cases.add_case_group',institute_id=institute._id, case_name=case.display_name) }}" class="text-white"><span class="fas fa-plus text-white mr-1"></span>New group</a></span>
    </div>
    <div class="card-body">
      <div class="list-group" style="max-height:200px; overflow-y: scroll;">
      {% if case_groups %}
        {% for group_id, case_group in case_groups.items() %}
          {% if loop.index > 1 %}
            <span><hr style="height:10px;"></span>
          {% endif %}

          {{ modal_add_to_group(group_id, case_group, case_group_label[group_id]) }}
          <form class="form-inline" action="{{ url_for('cases.case_group_update_label', case_group=group_id)}}" method="POST">
            <div class="input-group mb-2 mr-sm-2">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fa fa-users"></i></div>
              </div>
              <input type="text" class="form-control" name="label" id="case_group_label-{{group_id}}" placeholder="{{ case_group_label[group_id] }}">
            </div>
            <button type="submit" class="btn btn-secondary btn-sm mb-2">Save label</button>
            <button type="button" class="btn btn-secondary btn-sm mb-2 ml-3 text-right" data-toggle="modal" data-target="#add-case-group-{{group_id}}">
              <i class="fas fa-user-plus" data-toggle='tooltip' title="Add other case to this group"></i>
            </button>
          </form>

          <div class="col-12">
            {% for grouped_case in case_group %}
              <span class="badge badge-pill badge-light">
                <a href="{{ url_for('cases.case', institute_id=grouped_case.owner, case_name=grouped_case.display_name) }}"">{{ grouped_case.display_name }}</a>
                  <span>
                    <a href="{{ url_for('cases.remove_case_group', institute_id=institute._id, case_name=grouped_case.display_name, case_group=group_id) }}" class="btn btn-link btn-sm">
                        <span class="fa fa-remove"></span></a>
                  </span>
              </span>
            {% endfor %}
          </div>

        {% endfor %}
      {% endif %}
      </div> <!-- end of <div class="list-group" style="max-height:200px; overflow-y: scroll;" -->
    </div>
  </div>
{% endmacro %}

{% macro modal_add_to_group(group_id, case_group, label) %}
  <form action="{{ url_for('cases.add_case_group', institute_id=institute._id, case_name="unused") }}" method="POST">
    <div class="modal fade" id="add-case-group-{{group_id}}" role="dialog">
      <input type="hidden" name="group_id" value="{{ group_id }}">
      <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="case_pick_dialog">Add other case to case group ({{ label }})</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Cases already in this group:
          <ul class="list-group">
          {% for grouped_case in case_group %}
            <li class="list-group-item">{{ grouped_case.display_name }}</li>
          {% endfor %}
          Add case:
          <input type="text" name="other_case_name" class="typeahead_cases form-control" data-provide="typeahead" autocomplete="off" placeholder="Search for case name..." cols="30" rows="10"></input>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Add case</button>
        </div>
        </div>
      </div>
    </div>
  </form>
{% endmacro %}

<!-- Iterate through Individuals, if chromograph_files is presenet add a panel for images -->
{% macro insert_multi_image_panel() %}
  {% for i in case.individuals %}
  {% if i.chromograph_images %}
  {% if i.chromograph_images.coverage or i.chromograph_images.autozygous or i.chromograph_images.upd_sites %}
     {{ add_collapsable_panel(i.individual_id, i.display_name) }}
  {% endif  %}
  {% endif %}
  {% endfor %}
{% endmacro %}


<!-- Create a collapsing panel. Used for -->

{% macro add_collapsable_panel(id_tag, display_name) %}
  <div class="row">
    <div class="col-12">
      <div id={{"collapse_" + id_tag}}>
	<div class="card panel-default">
	  <div class="panel-heading" >
      <div class="panel-heading" href={{"#collapsing_" + id_tag}} data-toggle="collapse" datatarget={{"#collapsing_" + id_tag}} aria-expanded="true" aria-controls={{"collapsing_" + id_tag}} data-parent={{"#collapse_" + id_tag}}>Images {{display_name}} &gt	<span class="pull-right clickable"><span class="glyphicon glyphicon-chevron-up"></span></span></div>
          </div>
          <div id={{"collapsing_" + id_tag}} style="width:100%" class="collapse" data-parent={{"#collapse_" + id_tag}}>
            <div class="card-body" style="max-height: 80vh; overflow-y: scroll;">
              <svg id={{"svg_"+id_tag}} class="img-fluid" width="1200" height="1700"></svg>
	          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endmacro %}



{% macro modal_synopsis() %}
  <form action="{{ url_for('cases.case_synopsis', institute_id=institute._id, case_name=case.display_name) }}" method="POST">
    <div class="modal fade" id="edit-synopsis" role="dialog">
      <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Edit synopsis</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <textarea name="synopsis" class="form-control" cols="30" rows="10">{{ case.synopsis }}</textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
        </div>
      </div>
    </div>
  </form>
{% endmacro %}

{% macro clinvar_panel() %}
  <div class="card panel-default">
    <div class="panel-heading">Variants in ClinVar submissions</div>
    <div class="card-body">
      <ul>
        {% for var_id, submission_data in case.clinvar_variants.items() %}
          <li>
            {% if submission_data.category == 'snv' %}
              <a href="{{ url_for('variant.variant', institute_id=institute._id, case_name=case.display_name, variant_id=var_id) }}">chr{{submission_data.chromosome}}:{{submission_data.start}}_{{submission_data.ref}}>{{submission_data.alt}}</a> ({{submission_data.clinsig}})
            {% else %}
              <a href="{{ url_for('variant.sv_variant', institute_id=institute._id, case_name=case.display_name, variant_id=var_id) }}">chr{{submission_data.chromosome}}:{{submission_data.breakpoint1}}_{{submission_data.var_type}}</a> ({{submission_data.clinsig}})
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </div> <!--end of <div class="panel-body">-->
  </div>
{% endmacro %}

{% macro matchmaker_panel() %}
<div class="card panel-default">
    <div class="panel-heading">Matching patients</div>
    <div class="card-body">
      {% if case.mme_submission %} <!-- case was already submitted to MatchMaker -->
        <p>This case is in MatchMaker!</p>
        <p>
          <div class="text-center matchmaker-grid">
              <select class="custom-select matchmaker-grid-item1" onchange="window.open(this.value,'_self');">
                   <option selected>Match against</option>
                    <option value="{{ url_for('cases.matchmaker_match', institute_id=institute._id, case_name=case.display_name, target='internal') }}">Scout patients in MatchMaker</option>
                    {% if mme_nodes|length >1 %}
                    <option value="{{ url_for('cases.matchmaker_match', institute_id=institute._id, case_name=case.display_name, target='external') }}">All external nodes</option>
                    {% endif %}
                    {% for node in mme_nodes %}
                    <option value="{{ url_for('cases.matchmaker_match', institute_id=institute._id, case_name=case.display_name, target=node.id) }}">{{node.description}}</option>
                 {% endfor %}
              </select>
              <a href="{{url_for('cases.matchmaker_matches', institute_id=institute._id, case_name=case.display_name)}}" class="btn btn-outline-secondary matchmaker-grid-item2" role="button">Matches</a>
              <a class="btn btn-outline-secondary matchmaker-grid-item3" href="#mme_form" data-toggle="collapse">Modify submission</a>
          </div>
        </p>
      {% else %} <!-- display option to submit case to MatchMaker -->
        <p>This case is not yet in MatchMaker!&nbsp;<a href="#mme_form" data-toggle="collapse">Submission form</a></p>
      {% endif %}
      <form id="mme_submit" method="POST" action="{{ url_for('cases.matchmaker_add', institute_id=institute._id, case_name=case.display_name )}}" >
          <div id="mme_form" class="collapse w-75">
            <div class="d-flex justify-content-center">
              <ul class="list-group">
                <li class="list-group-item">
                  <div class="d-flex justify-content-between">
                    <div data-placement="top" title="hpo">
                      Include patient gender
                    </div>
                    <div>
                      <input type="checkbox" class="ios8-switch" id="sex" name="sex" {% if not case.mme_submission or case.mme_submission.sex %}checked{% endif %}>
                      <label for="sex"></label>
                    </div>
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex justify-content-between">
                    <div data-placement="top" title="hpo">
                      Include HPO terms
                    </div>
                    <div>
                      <input type="checkbox" class="ios8-switch" id="features" name="features" {% if not case.mme_submission or case.mme_submission.features %}checked{% endif %}>
                      <label for="features"></label>
                    </div>
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex justify-content-between">
                    <div data-placement="top" title="disorders">
                      Include OMIM diagnoses
                    </div>
                    <div>
                      <input type="checkbox" class="ios8-switch" id="disorders" name="disorders" {% if not case.mme_submission or case.mme_submission.disorders %}checked{% endif %}>
                      <label for="disorders"></label>
                    </div>
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex justify-content-between">
                    <div data-placement="top" title="genomicfeatures">
                      Share variants
                    </div>
                    <div>
                      <input type="radio" class="ios8-switch" id="genomicfeatures" name="genomicfeatures" value="variants" checked>
                      <label for="genomicfeatures"></label>
                    </div>
                  </div>
                </li>
                <li class="list-group-item">
                  <div class="d-flex justify-content-between">
                    <div data-placement="top" title="genomicfeatures">
                      Gene names only
                    </div>
                    <div>
                      <input type="radio" class="ios8-switch" id="genomicfeatures" name="genomicfeatures" value="genes" {% if case.mme_submission and case.mme_submission.genes_only %}checked{% endif %}>
                      <label for="genomicfeatures"></label>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div>
              <br>
              <button class="btn btn-outline-secondary mx-auto d-block" data-toggle="modal" type="submit">
                {% if case.mme_submission %}
                  Update case in MatchMaker
                {% else %}
                  Share to MatchMaker
                {% endif %}</button>
            </div>
          </div>
        </form>
        {% if case.mme_submission %}
          {{ modal_mme_delete() }}
        {% endif %}
    </div>
</div>
{% endmacro %}


{% macro modal_mme_delete() %}
  <form id="mme_delete" method="POST" action="{{ url_for('cases.matchmaker_delete', institute_id=institute._id, case_name=case.display_name )}}">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-danger form-control" data-toggle="modal" data-target="#mme_delete_confirm">
    Remove case from MatchMaker
    </button>
    <!-- Modal -->
    <div class="modal fade" id="mme_delete_confirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          Confirm delete case from Matchmaker?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-danger">Delete</button>
        </div>
      </div>
    </div>
    </div>
  </form>
{% endmacro %}

{% macro remove_form(url, hidden_input=None, button_name=None, button_value=None) %}
  <form action="{{ url }}" method="POST">
    {% if hidden_input %}
      <input type="hidden"
             name="{{ hidden_input[0] }}"
             value="{{ hidden_input[1] }}">
    {% endif %}
    <div class="pull-right">
      <button class="btn btn-link btn-sm"
              name="{{ button_name if button_name }}"
              value="{{ button_value if button_value }}"
              type="submit">
        <i class="fa fa-remove"></i>
      </button>
    </div>
  </form>
{% endmacro %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('cases.static', filename='madeline.js') }}"></script>
<script src="{{ url_for('cases.static', filename='case_images.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://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.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 src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.11/purify.min.js"></script>

<script>
  window.onload= add_image_panels();
  window.onresize= function(){
      console.log("Width '%s' ", $(window).width())
      add_image_panels();
  }


  function add_image_panels(){
      add_image_to_individual_panel( {{case.individuals|tojson}},
                                     "{{institute._id}}",
                                     "{{case.display_name}}"
                                   );
  }

  {% if case.panels %}
    $('#panel-table').DataTable({
      scrollY: 350,
      scrollCollapse: true,
      paging: false,
      searching: false,
      ordering: true,
      info: false
    });
  {% endif %}

  $(function(){
      function getHpoTerms(query, process) {
        $.get("{{ url_for('cases.hpoterms') }}", {query: query}, function(data) {
          process(data)
        });
      }
      function getNameTerms(query, process) {
        $.get("{{ url_for('genes.api_genes') }}", {query: query}, function(data) {
          process(data)
        });
      }
      function getOmimTerms(query, process) {
        $.get("{{ url_for('cases.omimterms') }}", {query: query}, function(data) {
          process(data)
        });
      }
      function getCases(query, process) {
        $.get("{{ url_for('cases.caselist', institute_id=institute._id) }}", {query: query}, function(data) {
          process(data)
        });
      }

      $(".typeahead_cases").typeahead({
        name: 'cases_list',
        source: getCases,
        minLength: 3,
      });

      $(".typeahead_hpo").typeahead({
        name: 'hpo_term',
        source: getHpoTerms,
        minLength: 3,
      });

      $(".typeahead_gene").typeahead({
        name: 'dynamic_gene_add',
        source: getNameTerms,
        minLength: 3,
      });

      $(".typeahead_omim").typeahead({
        name: 'omim_term',
        source: getOmimTerms,
        minLength: 3,
      });

      $('[data-toggle="tooltip"]').tooltip();

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

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

      $('table').stickyTableHeaders({
        scrollableArea: $(".fixed-panel")[0]
      });
  });

function SidebarCollapse () {
    $('.menu-collapsed').toggleClass('d-none');
    $('.sidebar-submenu').toggleClass('d-none');
    $('.submenu-icon').toggleClass('d-none');
    $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');

    // Treating d-flex/d-none on separators with title
    var SeparatorTitle = $('.sidebar-separator-title');
    if ( SeparatorTitle.hasClass('d-flex') ) {
        SeparatorTitle.removeClass('d-flex');
    } else {
        SeparatorTitle.addClass('d-flex');
    }

    // Collapse/Expand icon
    $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
}

// Hide submenus
$('#body-row .collapse').collapse('hide');

// Collapse/Expand icon
$('#collapse-icon').addClass('fa-angle-double-left');

// Collapse click
$('[data-toggle=sidebar-collapse]').click(function() {
  SidebarCollapse();
});
</script>
{% endblock %}
