{% extends "layout_bs4.html" %}
{% from "cases/collapsible_actionbar.html" import action_bar, research_modal, rerun_modal %}
{% from "utils.html" import comments_panel, activity_panel %}
{% from "cases/case_ideograms.html" import case_ideograms %}

{% block title %}
  {{ super() }} - {{ institute.display_name }} - {{ case.display_name }}
{% 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 }}
    </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) }} <!-- 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 col-md-12">
    <h4 class="mt-3">Case: {{case.display_name}}</h4><p class="text-muted {% if case.status == 'solved' %} bg-success {% elif case.status == 'archived' %} bg-danger-light {% endif %}">status: <strong>{{case.status}}</strong></p>
    <div class="card-body">
      <div class="row text-center"> <!-- variants buttons -->
        <div class="col-sm-12">{{ variants_buttons() }}</div>
      </div>
      <div class="row ">
          <div class="col-xs-12 col-md-6">{{ candidates_list() }}</div>
          <div class="col-xs-12 col-md-6">{{ related_causatives_list() }}</div>
      </div>
      <div class="row">
          {% if case.track == 'cancer' %}
            <div class="col-xs-12 col-md-8">{{ cancer_individuals_table() }}</div>
          {% else %}
            <div class="col-xs-12 col-md-8">{{ individuals_table() }}</div>
            <div class="col-xs-12 col-md-4">
              {% if case.madeline_info and case.individuals|length > 1 %}
                {{ pedigree_panel() }}
              {% else %}
                <p>No pedigree picture available.</p>
              {% endif %}
            </div> <!-- end of <div class="col-xs-12 col-md-4"> -->
          {% endif %}
        </div> <!-- <div class="row" -->
        <div class="row">
          <div class="col-sm-12">{{ roh_panel() }}</div>
        </div>


        <div class="row">
          <div class="col-xs-12 col-md-6">{{ synopsis_panel() }}</div>
          <div class="col-xs-12 col-md-6">
            {{ comments_panel(institute, case, current_user, comments) }}
          </div>
        </div> <!-- end of   <div class="row"> -->
        <div class="row">
          <div class="col-xs-12 col-md-6">{{ cohort_panel() }}</div>
          <div class="col-xs-12 col-md-6">{{ diagnosis_panel() }}</div>
        </div>

        <div class="row">
          <div class="col-md-6">{{ phenotype_groups_panel() }}</div>
          <div class="col-md-6">{{ phenotypes_panel() }}</div>
        </div>

        <div class="row">
          <div class="col-md-6">{{ genepanels_table() }}</div>
          <div class="col-md-6">{{ hpo_genelist_panel() }}</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) }}
    </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">
  <div class="btn-group" style="width:100%;">
    {% 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', gene_panels=case.panels|selectattr('is_default')|map(attribute='panel_name')|list) }}">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', gene_panels=case.panels|selectattr('is_default')|map(attribute='panel_name')|list) }}">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.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', gene_panels=case.panels|selectattr('is_default')|map(attribute='panel_name')|list) }}">Clinical cancer variants</a>
    {% endif %}

  </div>
</div>
{% if case.is_research %}
  <div class="form-group">
    <div class="btn-group">
      <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>
    </div>
  </div>
{% endif %}
{% endmacro %}

{% macro related_causatives_list() %}
  <div class="card panel-default">
    <div data-toggle='tooltip' class="panel-heading" title="If there are any variants in this case
      that have been marked as causative in another case for this insitute">
      Matching causatives from other cases
    </div>
    <ul class="list-group">
      {% for variant in other_causatives %}
        <li class="list-group-item">
          <a href="{{ url_for('variant.variant', institute_id=institute._id,
                              case_name=case.display_name, variant_id=variant._id) }}">
            {{ variant.hgnc_symbols|join(', ') }}
          </a>
        </li>
      {% else %}
        <li class="list-group-item">No matching causative variants.</li>
      {% endfor %}
    </ul>
  </div>
{% endmacro %}

{% macro individuals_table() %}
  <div class="card panel-default">
    <div class="panel-heading">Individuals</div>
    <div class="table-responsive">
      <table class="table table-sm">
        <thead>
          <tr>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="Display name of sample">Sample</th>
            <th class="col-xs-1" title="Sample sex">Sex</th>
            <th class="col-xs-1" title="Phenotype of sample">Phenotype</th>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="Type of sequencing (e.g wes, wgs)">Sequencing</th>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="Ancestry prediction from peddy">Ancestry (pred.)</th>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="If parenthood is confirmed by peddy">Parenthood</th>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="Downloadable CytoSure file ">CGH</th>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="Tissue origin for the sample">Tissue</th>
          </tr>
        </thead>
        <tbody>
          {% for ind in case.individuals %}
            <tr {% if ind.phenotype_human == 'affected' %} class="bg-danger-light" {% endif %}>
              <td>{{ ind.display_name }}</td>
              <td>
                {% if ind.sex_human in ['female','male'] %}
                  <i class="fa fa-{{ind.sex_human}}" aria-hidden="true"></i>
                {% else %}
                  {{ind.sex_human}}
                {% endif %}
                {% if ind.confirmed_sex %}
                  <i class="fa fa-check"></i>
                {% endif %}
              </td>
              <td>{{ ind.phenotype_human }}</td>
              <td>{{ ind.analysis_type|upper }}</td>
              <td>{{ ind.predicted_ancestry or 'N/A' }}</td>
              <td>
                {% if ind.confirmed_parent == True %}
                  <i class="fa fa-check"></i>
                {% elif ind.confirmed_parent == False %}
                  <i class="fa fa-exclamation-circle"></i>
                {% else %}
                  N/A
                {% endif %}
              </td>
              <td>
                {% if ind.vcf2cytosure %}
                <a href="{{ url_for('cases.vcf2cytosure', institute_id=institute._id,
                      case_name=case.display_name, individual_id=ind.individual_id) }}" class="btn">
                  <i class="fa fa-download"></i>
                </a>
                {% else %}
                  N/A
                {% endif %}
                <td>{{ ind.tissue_type or 'unknown' }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endmacro %}

{% macro cancer_individuals_table() %}
  <div class="card panel-default">
    <div class="panel-heading">Individuals</div>
    <div class="table-responsive">
      <table class="table table-sm">
        <thead>
          <tr>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="Sample display name">Sample</th>
            <th class="col-xs-1" title="Tumor type">Tumor Type</th>
            <th class="col-xs-1" title="Phenotype">Phenotype</th>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="Type of sequencing (e.g panel, wes)">Sequencing</th>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="Measure of the tumor mutational burden">TMB</th>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="Measure of microsatellite instability">MSI</th>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="Measure of tumor purity">Tumor Purity</th>
            <th data-toggle='tooltip' data-container='body' class="col-xs-1"
             title="Tissue origin for the sample">Tissue</th>
          </tr>
        </thead>
        <tbody>
          {% for ind in case.individuals %}
            <tr {% if ind.phenotype_human == 'tumor' %} class="bg-danger-light" {% endif %}>
              <td>{{ ind.display_name }}</td>
              <td>{{ ind.tumor_type or 'Unknown'}}</td>
              <td>{{ ind.phenotype_human }}</td>
              <td>{{ ind.analysis_type|upper }}</td>
              <td>{{ ind.tmb or 'N/A' }}</td>
              <td>{{ ind.msi or 'N/A' }}</td>
              <td>{{ ind.tumor_purity or 'N/A' }}</td>
              <td>{{ ind.tissue_type or 'unknown' }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endmacro %}


{% macro pedigree_panel() %}
  <div class="card panel-default">
    <div class="panel-heading">Pedigree</div>
    <div class="card-body text-center">
      {{ case.madeline_info|safe }}
    </div>
  </div>
{% 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">
      Synopsis
    </div>
    <div class="card-body">
      {{ case.synopsis|markdown if case.synopsis else 'Nothing written yet...' }}
    </div>
    <div class="card-footer">
      <button type="button" class="btn btn-outline-secondary form-control" data-toggle="modal" data-target="#edit-synopsis">
        Edit
      </button>
    </div>
  </div>
{% endmacro %}

{% macro roh_panel() %}
  {% if case.chromograph_prefixes %}
  <div class="d-flex p-2 ">
    <div class="card panel-default" id="rohPanel">
      <div class="panel-heading">Ideogram, UPD, ROH</div>
      <br>
      <div class="panel-body">
        <svg id="roh_svg" width="1500" height="1250"></svg>
      </div>
    </div>
  </div>
  {% endif %}
{% 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 candidates_list() %}
  <div class="card panel-default">
    <div data-toggle='tooltip' class="panel-heading" title="Displays all variants that have been marked causative for this case">
      Causative variants
    </div>
    <ul class="list-group">
      <!--causative variants -->
      {% for variant in causatives %}
        <li class="list-group-item">
          {% if variant._id %}
            <div class="row align-items-between align-items-center">
              <div class="col-10">
                <i class="fa fa-check-circle-o"></i>
		            {% if variant.category == "snv" %}
                  <a href="{{ url_for('variant.variant',
                                      institute_id=variant.institute,
                                      case_name=case.display_name,
                                      variant_id=variant._id) }}">
                        {{ variant.hgnc_symbols|join(', ') }}
		             {% else %}
        		      <a href="{{ url_for('variant.sv_variant',
                                            institute_id=variant.institute,
                                            case_name=case.display_name,
                                            variant_id=variant._id) }}">
		              {{ variant.sub_category|upper }}({{ variant.chromosome }}{{ variant.cytoband_start }}-{{ variant.chromosome }}{{ variant.cytoband_end }})
		             {% endif %}
                </a>
                {% if variant.sanger_ordered and not variant.validation in ['True positive','False positive'] %}
                  <span class="badge badge-default">Verification ordered</span>
                {% elif variant.sanger_ordered %}
                  <span class="badge badge-success">Validated</span>
                {% endif %}
              </div>
              <div class="col-2">
                {{ remove_form(url_for('cases.mark_causative',
                                       institute_id=institute._id,
                                       case_name=case.display_name,
                                       variant_id=variant._id,
                                       partial_causative=False),
                               button_name='action', button_value='DELETE') }}
              </div>
            </div>
          {% else %} <!-- no variant._id -->
            {{ variant }} <small class="text-muted">(not loaded)</small>
          {% endif %}
        </li>
      {% endfor %}
      <!-- End of causative variants -->
      <!-- Partial causative variants -->
      {% for variant_phenotypes in partial_causatives %}
        {% set variant = variant_phenotypes.variant %}
        <div class="list-group-item">
          {% if variant._id %}
            <div class="row align-items-between align-items-center">
              <div class="col-10">
                <i class="fa fa-check-circle-o"></i>
                {% if variant.category == "snv" %}
                  <a href="{{ url_for('variant.variant',
                                      institute_id=variant.institute,
                                      case_name=case.display_name,
                                      variant_id=variant._id) }}">
                        {{ variant.hgnc_symbols|join(', ') }} (partial causative)
		             {% else %}
        		      <a href="{{ url_for('variant.sv_variant',
                                            institute_id=variant.institute,
                                            case_name=case.display_name,
                                            variant_id=variant._id) }}">
		              {{ variant.sub_category|upper }}({{ variant.chromosome }}{{ variant.cytoband_start }}-{{ variant.chromosome }}{{ variant.cytoband_end }})
                  (partial causative)
		             {% endif %}
                 </a>
              </div>
              <div class="col-2">
                {{ remove_form(url_for('cases.mark_causative',
                                       institute_id=institute._id,
                                       case_name=case.display_name,
                                       variant_id=variant._id,
                                       partial_causative=True),
                               button_name='action', button_value='DELETE') }}
              </div>
            </div>
            <div class="row">
              <div class="col-sm-4">
                OMIM diagnoses
              </div>
              <div class="col-sm-8">
                {% for omim in variant_phenotypes.omim_terms %}
                  <span class="badge badge-sm badge-secondary">
                    <a class="text-white" target="_blank" href="http://omim.org/entry/{{omim}}">
                      {{omim}}
                    </a>
                  </span>
                {% endfor %}
              </div>
            </div>
            <div class="row">
              <div class="col-sm-4">
                HPO terms
              </div>
              <div class="col-sm-8">
                {% for hpo in variant_phenotypes.hpo_terms %}
                  <a class="text-white" target="_blank" href="http://hpo.jax.org/app/browse/term/{{hpo.phenotype_id}}">
                    <span class="badge badge-sm badge-info">{{hpo.phenotype_id}}</span>
                  </a>

                {% endfor %}
              </div>
            </div>

          {% else %}
            {{ variant }} <small class="text-muted">(not loaded)</small>
          {% endif %}
        </div>
      {% endfor %}
      <!-- end of partial causative variants -->
      {% if not case.causatives|length and not case.partial_causatives|length %}
        <div class="card-body">No variants marked causative</div>
      {% endif %}
    </ul>

    <div data-toggle='tooltip' class="panel-heading panel-heading-secondary"
         title="Displays all variants that has been pinned for this case">
      Pinned variants
    </div>

    <ul class="list-group">
      {% for variant in suspects %}
        <li class="list-group-item">
          {% if variant._id %}
            <div class="row">
              <div class="col-sm-8">
                <div class="form-group row justify-content-between align-items-center">
                <div class="ml-3">
                  <i class="fa fa-bookmark"></i>
                  {% if variant.category == "snv" %}
                    <a href="{{ url_for('variant.variant',
                                        institute_id=variant.institute,
                                        case_name=case.display_name,
                                        variant_id=variant._id) }}">
                          {{ variant.hgnc_symbols|join(', ') }}
                  {% else %}
                    <a href="{{ url_for('variant.sv_variant',
                                              institute_id=variant.institute,
                                              case_name=case.display_name,
                                              variant_id=variant._id) }}">
                    {{ variant.sub_category|upper }}({{ variant.chromosome }}{{ variant.cytoband_start }}-{{ variant.chromosome }}{{ variant.cytoband_end }})
                  {% endif %}
                  </a>
                </div>
                {% if variant.sanger_ordered and not variant.validation in ['True positive','False positive'] %}
                  <span class="badge badge-default">Verification ordered</span>
                {% elif variant.sanger_ordered %}
                  <span class="badge badge-success">Validated</span>
                {% elif variant.manual_rank %}
                  <span class="badge badge-default">{{ variant.manual_rank }}</span>
                {% endif %}
                {% if variant.mosaic_tags %}
                  <span class="badge badge-info">mosaic</span>
                {% endif %}
                <form action="{{ url_for('cases.mark_validation',
                                         institute_id=variant.institute,
                                         case_name=case.display_name,
                                         variant_id=variant._id) }}"
                      method="POST" accept-charset="utf-8">
                  <select class="form-control form-control-sm" onchange="this.form.submit()" name="type">
                    {% for type in ('Not validated', 'True positive', 'False positive') %}
                      <option value="{{ type }}" {% if type == variant.validation %}selected{% endif %}>{{ type }}</option>
                    {% endfor %}
                  </select>
                </form>
              </div>
            </div>

            <div class="col-sm-4">
              {{ remove_form(url_for('cases.pin_variant',
                                     institute_id=institute._id,
                                     case_name=case.display_name,
                                     variant_id=variant._id),
                             button_name='action', button_value='DELETE') }}
            </div>
          </div>
          {% else %}
            {{ variant }} <small class="text-muted">(not loaded)</small></t
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
{% endmacro %}

{% macro diagnosis_panel() %}
  <div class="card panel-default">
    <div class="panel-heading">Diagnosis phenotypes</div>
    <div class="card-body">{{ diagnosis_form('phenotype') }}</div>
    <ul class="list-group">
      {% for omim_id in case.diagnosis_phenotypes %}
        <li class="list-group-item">
          <a target="_blank" href="http://omim.org/entry/{{ omim_id }}">
            {{ omim_id }}
          </a>
          <span class="pull-right">
            {{ remove_form(url_for('cases.case_diagnosis', institute_id=institute._id,
                                  case_name=case.display_name, remove='yes'),
                         hidden_input=('omim_id', omim_id), button_name='phenotype') }}
          </span>
        </li>
      {% else %}
        <li class="list-group-item">No phenotypes added</li>
      {% endfor %}
    </ul>
    <div class="panel-heading panel-heading-secondary">Diagnosis genes</div>
    <div class="card-body">{{ diagnosis_form('gene') }}</div>
    <ul class="list-group">
      {% for omim_id in case.diagnosis_genes %}
        <li class="list-group-item">
          <a target="_blank" href="http://omim.org/entry/{{ omim_id }}">
            {{ omim_id }}
          </a>
          <span class="pull-right">
            {{ remove_form(url_for('cases.case_diagnosis', institute_id=institute._id,
                                   case_name=case.display_name, remove='yes'),
                           hidden_input=('omim_id', omim_id), button_name='gene') }}
          </span>
        </li>
      {% else %}
        <li class="list-group-item">No genes added</li>
      {% endfor %}
    </ul>
  </div>
{% endmacro %}

{% macro diagnosis_form(type) %}
  <form action="{{ url_for('cases.case_diagnosis', institute_id=institute._id, case_name=case.display_name) }}" method="POST">
    <div class="row">
      <div class="col-xs-8">
        <input class="form-control" name="omim_id" placeholder="OMIM:XXX" required pattern="OMIM:[0-9]+">
      </div>
      <div class="col-xs-4">
        <button class="btn btn-outline-secondary form-control" type="submit" name="{{ type }}">
          Add
        </button>
      </div>
    </div>
  </form>
{% endmacro %}

{% macro cohort_panel() %}
  <div class="card panel-default">
    <div class="panel-heading">Cohort tag</div>
    <ul class="list-group">
      {% for cohort_tag in case.cohorts %}
        <li class="list-group-item">
          {{ cohort_tag }}
          <span class="pull-right">
            {{ remove_form(url_for('cases.cohorts', institute_id=institute._id,
                                   case_name=case.display_name, remove='yes'),
                           hidden_input=('cohort_tag', cohort_tag)) }}
          </span>
        </li>
      {% else %}
        <li class="list-group-item">No cohort tags added yet.</li>
      {% endfor %}
    </ul>
    <div class="card-body">
      <form method="POST"
            action="{{ url_for('cases.cohorts', institute_id=institute._id,
                               case_name=case.display_name) }}">
        <div class="row">
          <div class="col-xs-7">
            <select class="form-control" name="cohort_tag">
              <option>Add cohort tag...</option>
              {% for cohort_tag in cohort_tags %}
                <option value="{{ cohort_tag }}">{{ cohort_tag }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-xs-5">
            <button class="btn btn-outline-secondary form-control" type="submit">Add</button>
          </div>
        </div>
      </form>
    </div>
  </div>
{% 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 aready submitted to MatchMaker -->
        <p>This case is in MatchMaker!</p>
        <p>
          <div class="text-center">
            <div class="btn-group" role="group" aria-label="...">
              <a href="{{url_for('cases.matchmaker_matches', institute_id=institute._id, case_name=case.display_name)}}" class="btn btn-outline-secondary" role="button">Matches</a>
              <div class="btn-group">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Match against&nbsp;<span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="{{ url_for('cases.matchmaker_match', institute_id=institute._id, case_name=case.display_name, target='internal') }}">Scout patients in MatchMaker</a></li>
                  {% if mme_nodes|length >1 %}
                    <li><a href="{{ url_for('cases.matchmaker_match', institute_id=institute._id, case_name=case.display_name, target='external') }}">All external nodes</a></li>
                  {% endif %}
                  {% for node in mme_nodes %}
                    <li><a href="{{ url_for('cases.matchmaker_match', institute_id=institute._id, case_name=case.display_name, target=node.id) }}">External node-> {{node.description}}</a></li>
                  {% endfor %}
                </ul>
              </div>
              <a class="btn btn-outline-secondary" href="#mme_form" data-toggle="collapse">Modify submission</a>
            </div>
          </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 phenotype_groups_panel() %}
  <div class="card panel-default">
    <div class="panel-heading">Phenotype groups</div>
    <ul class="list-group">
      {% for hpo_term in case.phenotype_groups %}
        {{ hpo_group_item(hpo_term) }}
      {% else %}
        <li class="list-group-item">No HPO groups added yet.</li>
      {% endfor %}
    </ul>
    <div class="card-body">
      <form method="POST"
            action="{{ url_for('cases.phenotypes', institute_id=institute._id,
                               case_name=case.display_name, is_group='yes') }}">
        <div class="form-inline">
          <div class="form-group mb-2">
            <select class="form-control" name="hpo_term">
              <option>Add HPO group...</option>
              {% for hpo_id, group in hpo_groups.items() %}
                <option value="{{ hpo_id }}">
                  {{ group.name }} ({{ group.abbr }})
                </option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group mb-2">
            <button class="btn btn-outline-secondary btn-sm form-control" type="submit">Add</button>
          </div>
        </div>
      </form>
    </div>
    {% set url = 'http://hpo.jax.org/app/browse/term/HP:0000018' %}
    <div class="panel-heading panel-heading-secondary">
      Phenotype terms (<a target="_blank" href="{{ url }}" class="text-white">HPO web</a>)
    </div>
    <div class="card-body">
      <form method="POST"
            action="{{ url_for('cases.phenotypes', institute_id=institute._id,
                               case_name=case.display_name) }}">
        <div class="row">
          <div class="col-xs-7">
            <input name="hpo_term" class="typeahead_hpo form-control" data-provide="typeahead" autocomplete="off" required placeholder="Search...">
          </div>
          <div class="col-xs-5">
            <button class="btn btn-outline-secondary form-control">Add</button>
          </div>
        </div>
      </form>
    </div>
  </div>
{% endmacro %}

{% macro hpo_group_item(hpo_term) %}
  <li class="list-group-item">
    <div class="row d-flex justify-content-between">
      <div class="flex-fill">
        {{ hpo_term.feature }}
        <span class="badge badge-info">
          <a href="{{ hpo_term.hpo_link }}" target="_blank" class="text-white">
            {{ hpo_term.phenotype_id }}
          </a>
        </span>
      </div>
      {{ remove_form(url_for('cases.phenotypes', institute_id=institute._id,
                             case_name=case.display_name, phenotype_id=hpo_term.phenotype_id, is_group='yes')) }}
    </div>
  </li>
{% endmacro %}

{% macro phenotypes_panel() %}
  <form action="{{ url_for('cases.phenotypes_actions', institute_id=institute._id, case_name=case.display_name)+'#phenotypes_panel' }}" method="POST">
    <div id="phenotypes_panel" class="card panel-default">
      <div class="panel-heading">Added phenotypes</div>
        <ul class="list-group">
        {% for hpo_term in case.phenotype_terms %}
          {{ hpo_item(hpo_term) }}
        {% else %}
          <li class="list-group-item">No phenotypes added yet</li>
        {% endfor %}
      </ul>
      <div class="card-body">
        <div class="form-inline">
          <div class="form-group mb-2 col-3">
            <button class="btn btn-sm btn-secondary" type="submit" name="action" value="GENERATE">HPO panel</button>
          </div>
          <div class="form-group mb-2 mx-sm-3 col-4">
            <input name="min_match" type="number" min="0" step="1" class="form-control" placeholder="Min matches">
          </div>
          {% if config.PHENOMIZER_USERNAME %}
            <div class="form-group mb-2 mx-sm-3 col-3">
              <button class="btn btn-outline-secondary btn-sm form-control" type="submit" name="action" value="PHENOMIZER">Phenomizer</button>
            </div>
          {% endif %}
          <div class="form-group mb-2 mx-sm-3 col-2">
            <button class="btn btn-danger btn-sm form-control" type="submit" name="action" value="DELETE">Delete</button>
          </div>
        </div>
      </div>
      <div class="panel-heading panel-heading-secondary"  data-toggle='tooltip' title="Manually add a gene to the dynamic (HPO) panel.
      To remove, use the HPO panel button to regenerate a list without them.">
          Add gene to the dynamic panel
      </div>
      <div class="card-body">
        <div class="form-inline">
          <div class="form-group col-8">
            <input name="genes" class="typeahead_gene form-control" data-provide="typeahead" autocomplete="off" placeholder="Search...">
          </div>
          <div class="form-group col-4">
            <button class="btn btn-secondary form-control" type="submit" name="action" value="ADDGENE">Add gene</button>
          </div>
        </div>
      </div>
  </div>
  </form>
{% endmacro %}

{% macro hpo_item(hpo_term) %}
  <li class="list-group-item">
    <input type="checkbox" name="hpo_id" value="{{ hpo_term.phenotype_id }}"
           {% if selected_ids and hpo_term.phenotype_id in selected_ids %}checked{% endif %}>
    {{ hpo_term.feature }}
    <span class="badge badge-info">
      <a href="{{ hpo_term.hpo_link }}" target="_blank" class="text-white">
        {{ hpo_term.phenotype_id }}
      </a>
    </span>
  </li>
{% 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 %}

{% macro hpo_genelist_panel() %}
  <div class="card panel-default">
    <div class="panel-heading">
      HPO gene panel ({{ case.dynamic_gene_list|length }} genes)
      {%- if case.dynamic_panel_phenotypes %},
      <span data-toggle="tooltip" data-placement="bottom" title="{{ case.dynamic_panel_phenotypes|join(', ') }}">
          {{ case.dynamic_panel_phenotypes|length }} phenotypes</span>
      {% endif %})
      {% if config.SQLALCHEMY_DATABASE_URI and case.dynamic_gene_list|length > 0 %}
        <a class="pull-right text-white" href="#" onclick="document.getElementById('hpo-report-form').submit();">Coverage</a>
        <form id="hpo-report-form" action="{{ url_for('report.report', sample_id=case.individuals|map(attribute='individual_id')|list, panel_name="HPO panel", level=institute.coverage_cutoff) }}" method="POST" target="_blank">
          <input type="hidden" name="gene_ids" value="{{ case.dynamic_gene_list|map(attribute='hgnc_id')|join(',') }}">
        </form>
      {% endif %}
    </div>
    <ul class="list-group fixed-panel">
      {% for hpo_gene in case.dynamic_gene_list %}
        <li class="list-group-item" title="{{ hpo_gene.description }}">
          {{ hpo_gene.hgnc_symbol }}
        </li>
      {% else %}
        <li class="list-group-item">No gene list generated</li>
      {% endfor %}
    </ul>
    {% if case.dynamic_gene_list %}
      <div class="card-footer">
        <div class="d-flex mt-1">
          <div class="mr-2">
            <form action="{{ url_for('cases.update_clinical_filter_hpo', institute_id=institute._id, case_name=case.display_name)+'#hpo_clinical_filter' }}" method="POST">
              <input type="checkbox" class="ios8-switch" id="hpo_clinical_filter" onChange="this.form.submit()" name="hpo_clinical_filter"{% if case.hpo_clinical_filter %}checked{% endif %}>
              <label for="hpo_clinical_filter"></label>
            </form>
          </div>
          <div data-placement="top" data-toggle='tooltip' title="Toggle on to use dynamic (HPO) panel instead of default gene panel for searching with clinical filter.">
            Use HPO list for clinical filter</div>
        </div>
        <div>
          <a class="btn btn-outline-secondary form-control"
            href="{{ url_for('variants.variants', institute_id=institute._id,
                             case_name=case.display_name, variant_type='clinical',
                             gene_panels=['hpo']) }}">
             Clinical HPO SNV variants
           </a>
        </div>
      </div>
    {% endif %}
  </div>
{% endmacro %}

{% macro genepanels_table() %}
  <div class="card panel-default">
    <div class="panel-heading">Gene panels</div>
    <div class="table-responsive fixed-panel">
      <table id="panel-table" class="table">
        <thead>
          <tr>
            <th>Panel</th>
            <th>Version</th>
            <th>Genes</th>
          </tr>
        </thead>
        <tbody>
          {% for panel in case.panels %}
            <tr {% if panel.is_default %} class="bg-info-light" {% endif %}>
              <td>
                <a href="{{ url_for('panels.panel', panel_id=panel.panel_id, case_id=case._id, institute_id=institute._id) }}">
                  {{ panel.display_name|truncate(30, True) }}
                </a>
                {% if panel.is_default %}
                  <span class="badge badgel-default pull-right">Default</span>
                {% endif %}
              </td>
              <td>{{ panel.version }} <small class="text-muted">({{ panel.updated_at.date() }})</small></td>
              <td>{{ panel.nr_genes }}</td>
            </tr>
          {% else %}
            <tr>
              <td colspan="5">No panels linked to case</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="card-body">
      <form action="{{ url_for('cases.default_panels', institute_id=institute._id, case_name=case.display_name) }}" method="POST">
        <div class="form-group">
          <label>Change default gene panels</label>
        </div>
        <div class="row">
          <div class="col-xs-8">
            <select name="panel_ids" class="form-control" multiple>
              {% for panel in case.panels %}
                <option value="{{ panel.panel_id }}" {% if panel.is_default %} selected {% endif %}>{{ panel.display_name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-xs-4">
            <button class="btn btn-outline-secondary form-control">Save</button>
          </div>
        </div>
      </form>
    </div>
  </div>
{% endmacro %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('cases.static', filename='madeline.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://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<script>
$(function () {
      function getTerms(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)
        });
      }

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

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

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

      $('select[multiple]').multiselect({
        buttonWidth: '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>

{% if case.chromograph_prefixes %}
  {{ case_ideograms(institute, case) }}
{% endif %}

{% endblock %}
