{% 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 %}
{% 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 %}
{% from "cases/case_ideograms.html" import case_ideograms %}

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

{% block css %}
{{ super() }}

{% 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">
    <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></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 > 1%}
        <div class="row ">
          <div class="col-xs-12 col-md-12">{{ matching_causatives(other_causatives, 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>

      <div class="row">
        <!-- <div class="col-sm-12">{{ roh_panel() }}</div> -->
      </div>

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

        <div class="{% if case.track != 'cancer' %}col-8{%else%}col-12{%endif%}">
          {{ 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, omim_terms) }}
                  </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) }}
    </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', 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.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', gene_panels=case.panels|selectattr('is_default')|map(attribute='panel_name')|list) }}">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', gene_panels=case.panels|selectattr('is_default')|map(attribute='panel_name')|list) }}">Clinical structural variants</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">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 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) }}">{{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 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="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 src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>


<script>
 $('#panel-table').DataTable({
    scrollY: 350,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: true,
    info: false
        });
</script>


<script>
$(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)
        });
      }

      $(".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();

      $('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 %}
