{% extends "layout.html" %}
{% from "cases/actionbar.html" import action_bar, research_modal, rerun_modal %}
{% from "utils.html" import flash_messages, comments_panel, activity_panel %}

{% block title %}
  {{ super() }} - {{ institute.display_name }} - {{ case.display_name }}
{% endblock %}

{% block top_nav %}
  {{ super() }}
  <li>
    <a href="{{ url_for('cases.index') }}">Institutes</a>
  </li>
  <li>
    <a href="{{ url_for('cases.cases', institute_id=institute._id) }}">
      {{ institute.display_name }}
    </a>
  </li>
  <li class="active">
    <span class="navbar-text">{{ case.display_name }}</span>
  </li>
{% endblock %}

{% block content %}
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2 sidebar {{ status_class }}">
        {{ action_bar(institute, case, collaborators) }}
      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        {{ flash_messages() }}

        <div class="row">
          <div class="col-xs-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">
          <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>
        </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>

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

        <div class="row">
          <div class="col-md-6">{{ activity_panel(events) }}</div>
          {% if case.clinvar_variants %}
            <div class="col-md-6">{{ clinvar_panel() }}</div>
          {% endif %}
        </div>
      </div>
    </div>

    {{ modal_synopsis() }}
    {{ rerun_modal(institute, case) }}
    {{ research_modal(institute, case) }}
  </div>
{% endblock %}

{% macro variants_buttons() %}
  <div class="form-group">
    <div class="btn-group btn-group-justified">
      {% if case.vcf_files.vcf_snv %}
        <a class="btn btn-default" 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-default" 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-default" 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-default" 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 btn-group-justified">
        <a class="btn btn-default" 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-default" 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="panel 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('variants.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="panel panel-default">
    <div class="panel-heading">Individuals</div>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Sample</th>
            <th>Sex</th>
            <th>Phenotype</th>
            <th>Sequencing</th>
            <th>Ancestry (pred.)</th>
            <th>Parenthood</th>
            <th>CGH</th>
          </tr>
        </thead>
        <tbody>
          {% for ind in case.individuals %}
            <tr {% if ind.phenotype_human == 'affected' %} class="bg-danger" {% endif %}>
              <td>{{ ind.display_name }}</td>
              <td>
                {{ ind.sex_human }}
                {% if ind.confirmed_sex %}
                  <span class="glyphicon glyphicon-ok"></span>
                {% 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 %}
                  <span class="glyphicon glyphicon-ok text-success"></span>
                {% elif ind.confirmed_parent == False %}
                  <span class="glyphicon glyphicon-remove text-danger"></span>
                {% 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">
                  <span class="glyphicon glyphicon-download">
                  </span></a>
                {% else %}
                  N/A
                {% endif %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endmacro %}

{% macro pedigree_panel() %}
  <div class="panel panel-default">
    <div class="panel-heading">Pedigree</div>
    <div class="panel-body">
      {{ case.madeline_info|safe }}
    </div>
  </div>
{% endmacro %}

{% macro synopsis_panel() %}
  <div class="panel 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="panel-body">
      {{ case.synopsis|markdown if case.synopsis else 'Nothing written yet...' }}
    </div>
    <div class="panel-footer">
      <button class="btn btn-default form-control" data-toggle="modal" data-target="#edit-synopsis">Edit</button>
    </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">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Edit synopsis</h4>
          </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-default" 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="panel panel-default">
    <div data-toggle='tooltip' class="panel-heading" title="Displays all variants that has been 
                                                            marked causative for this case">
      Causative variants
    </div>
    <ul class="list-group">
      {% for variant in causatives %}
        <li class="list-group-item">
          {% if variant._id %}
            <div class="row">
              <div class="col-xs-8">
                <span class="glyphicon glyphicon-ok-circle"></span>
		  {% if variant.category == "snv" %}
                <a href="{{ url_for('variants.variant',
                                    institute_id=variant.institute,
                                    case_name=case.display_name,
                                    variant_id=variant._id) }}">
                      {{ variant.hgnc_symbols|join(', ') }}
		  {% else %}
		      <a href="{{ url_for('variants.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="label label-default">Verification ordered</span>
                {% elif variant.sanger_ordered %}
                  <span class="label label-success">Validated</span>
                {% endif %}
              </div>
              <div class="col-xs-4">
                {{ remove_form(url_for('cases.mark_causative',
                                       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>
          {% endif %}
        </li>
      {% else %}
        <div class="panel-body">No variants marked causative</div>
      {% endfor %}
    </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>
    <table class="table table-hover">
      <colgroup>
        <col class="col-xs-5">
        <col class="col-xs-2">
        <col class="col-xs-4">
        <col class="col-xs-1">
      </colgroup>
      <tbody>
        {% for variant in suspects %}
          <tr>
            {% if variant._id %}
              <td>
                <span class="glyphicon glyphicon-bookmark"></span>

		  {% if variant.category == "snv" %}
                <a href="{{ url_for('variants.variant',
                                    institute_id=variant.institute,
                                    case_name=case.display_name,
                                    variant_id=variant._id) }}">
                      {{ variant.hgnc_symbols|join(', ') }}
		  {% else %}
		      <a href="{{ url_for('variants.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>
              </td>
              <td>
                {% if variant.sanger_ordered and not variant.validation in ['True positive','False positive'] %}
                  <span class="label label-default">Verification ordered</span>
                {% elif variant.sanger_ordered %}
                  <span class="label label-success">Validated</span>
                {% elif variant.manual_rank %}
                  <span class="label label-default">{{ variant.manual_rank }}</span>
                {% endif %}
                {% if variant.mosaic_tags %}
                  <span class="label label-info">mosaic</span>
                {% endif %}
              </td>
              <td>
                <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 input-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>
              </td>
              <td>
                {{ 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') }}
              </td>
            {% else %}
              <td colspan="4">{{ variant }} <small class="text-muted">(not loaded)</small></td>
            {% endif %}
          </tr>
        {% else %}
          <div class="panel-body">No variants suspected yet</div>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endmacro %}

{% macro diagnosis_panel() %}
  <div class="panel panel-default">
    <div class="panel-heading">Diagnosis phenotypes</div>
    <div class="panel-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="panel-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-default form-control" type="submit" name="{{ type }}">
          Add
        </button>
      </div>
    </div>
  </form>
{% endmacro %}

{% macro cohort_panel() %}
  <div class="panel 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="panel-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-default form-control" type="submit">Add</button>
          </div>
        </div>
      </form>
    </div>
  </div>
{% endmacro %}

{% macro clinvar_panel() %}
  <div class="panel panel-default">
    <div class="panel-heading">Variants in Clinvar submissions</div>
    <ul>
      {% for var_id, submission_data in case.clinvar_variants.items() %}
        <li>
          {% if submission_data.category == 'snv' %}
            <a href="{{ url_for('variants.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('variants.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>
{% endmacro %}


{% macro phenotype_groups_panel() %}
  <div class="panel 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="panel-body">
      <form method="POST"
            action="{{ url_for('cases.phenotypes', institute_id=institute._id,
                               case_name=case.display_name, is_group='yes') }}">
        <div class="row">
          <div class="col-xs-7">
            <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="col-xs-5">
            <button class="btn btn-default form-control" type="submit">Add</button>
          </div>
        </div>
      </form>
    </div>
    {% set url = 'http://compbio.charite.de/hpoweb/showterm?id=HP:0000018' %}
    <div class="panel-heading panel-heading-secondary">
      Phenotype terms (<a target="_blank" href="{{ url }}">HPO web</a>)
    </div>
    <div class="panel-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 form-control" data-provide="typeahead" autocomplete="off" required placeholder="Search...">
          </div>
          <div class="col-xs-5">
            <button class="btn btn-default form-control">Add</button>
          </div>
        </div>
      </form>
    </div>
  </div>
{% endmacro %}

{% macro hpo_group_item(hpo_term) %}
  <li class="list-group-item">
    <div class="flex">
      <div class="flex-fill">
        {{ hpo_term.feature }}
        <span class="label label-info">
          <a href="{{ hpo_term.hpo_link }}" target="_blank">
            {{ 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) }}" method="POST">
    <div class="panel 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="panel-footer">
        <div class="row">
          <div class="col-xs-5">
            <div class="input-group">
              <span class="input-group-btn">
                <button class="btn btn-default" type="submit" name="action" value="GENERATE">HPO panel</button>
              </span>
              <input name="min_match" type="number" min="0" step="1" class="form-control" placeholder="Min matches">
            </div>
          </div>
          {% if config.PHENOMIZER_USERNAME %}
            <div class="col-xs-4">
              <button class="btn btn-default form-control" type="submit" name="action" value="PHENOMIZER">Phenomizer</button>
            </div>
          {% endif %}
          <div class="col-xs-3">
            <button class="btn btn-danger form-control" type="submit" name="action" value="DELETE">Delete</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="label label-info">
      <a href="{{ hpo_term.hpo_link }}" target="_blank">
        {{ 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">
        <span class="glyphicon glyphicon-remove"></span>
      </button>
    </div>
  </form>
{% endmacro %}

{% macro hpo_genelist_panel() %}
  <div class="panel 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 %})
    </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="panel-footer">
         <a class="btn btn-default form-control"
            href="{{ url_for('variants.variants', institute_id=institute._id,
                             case_name=case.display_name, variant_type='clinical',
                             gene_panels=['hpo']) }}">
             Clinical HPO variants
           </a>
       </div>
    {% endif %}
  </div>
{% endmacro %}

{% macro genepanels_table() %}
  <div class="panel 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" {% 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="label label-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="panel-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-default 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)
        });
      }

      $(".typeahead").typeahead({
        source: getTerms,
        minLength: 3,
      });

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

      $('select[multiple]').multiselect({
        buttonWidth: '100%'
      });

      $('table').stickyTableHeaders({
        scrollableArea: $(".fixed-panel")[0]
      });
    })
  </script>
{% endblock %}
