{% extends "layout.html" %}
{% from "utils.html" import clickable_table_row_script %}
{% from "variants/utils.html" import dismiss_variants_block, enable_variants_hotkeys, filters_form_header, filter_script_main, pagination_footer, pagination_hidden_div, update_stash_filter_button_status %}
{% from "variants/components.html" import external_scripts, external_stylesheets %}

{% block title %}
  {{ super() }} - {{ institute.display_name }} - {{ case.display_name }} - {{ form.variant_type.data|capitalize }} {% block category_title %}{% endblock %} variants
{% endblock %}

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

{% block top_nav %}
  {{ super() }}
  <li class="nav-item">
    <a class="nav-link text-nowrap" href="{{ url_for('cases.index') }}">Institutes</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-nowrap" href="{{ url_for('overview.cases', institute_id=institute._id) }}">
      {{ institute.display_name }}
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-nowrap" href="{{ url_for('cases.case', institute_id=institute._id, case_name=case.display_name) }}">
      {{ case.display_name }}
    </a>
  </li>
  <li class="nav-item active d-flex align-items-center">
    <span class="navbar-text">{{ form.variant_type.data|capitalize }} {{ self.category_title() }}</span>
  </li>
{% endblock %}

{% block top_nav_right %}
  <li class="nav-item text-nowrap"><p class="navbar-text">Panels: {{ (form.gene_panels.data if form.gene_panels.data and form.gene_panels.data != [""] else ['All'])|join(',') }}</p></li>
  {{ super() }}
{% endblock %}

{% block content_main %}
  <div class="container-float">
   <div class="card panel-default" id="accordion">
      <form method="POST" id="filters_form" action="{% block variants_form_action %}{% endblock %}"
       enctype="multipart/form-data" onsubmit="return validateForm()">
        {{ pagination_hidden_div(page, result_size) }}
        <input type="hidden" name="scroll_pos" id="scroll_pos">
        {{ filters_form_header(result_size, total_variants) }}
        <!--Expand filters form if filters were used in a previous POST request-->
        <div class="card-body panel-collapse collapse {{ 'show' if expand_search is sameas true }}" id="collapseFilters">
          {% block variants_filter %}{% endblock %}
        </div>
        {% block variants_filter_form_footer %}{% endblock %}
      </form> <!-- end of form containing filters and variants' table elements. Further use needs form id. -->
    </div>
   <div class="card mt-3">
     <table class="table table-hover table-bordered" aria-label="{{ self.category_title() }} table">
       <thead class="table-light thead">
       {% block variants_table_header %}{% endblock %}
       </thead>
       <tbody>
        {% block variants_table_rows %}{% endblock %}
       </tbody>
     </table>
   </div> <!-- end of card -->
  </div> <!-- end of container-float -->
  {{ dismiss_variants_block(dismiss_variant_options, institute, case, show_dismiss_block) }}

  <div class="container-fluid" style="padding-bottom: 100px">
    {{ pagination_footer(page, result_size) }}
  </div>
{% endblock %}

{% block scripts %}
  {{ super() }}

  {{ external_scripts() }}
  <script src="{{ url_for('variants.static', filename='form_scripts.js') }}"></script>
  {{ filter_script_main(cytobands) }}
  <script type="text/javascript">
    window.onload=function() {
      populateCytobands({{cytobands|safe}});
      {{ update_stash_filter_button_status(current_user, filters) }}
      const pos = {{ scroll_pos|default(0) }};
      if (pos > 0) {
          window.scrollTo(0, pos);
      }
    }

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

    $("#filters").change(function () {
      {{ update_stash_filter_button_status(current_user, filters) }}
    });

    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl, {
        sanitizeFn: function (content) {
          return DOMPurify.sanitize(content)
        },
        container: 'body',
      })
    })

    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })

    {{ clickable_table_row_script() }}

    document.querySelector("#filters_form").addEventListener("submit", function (event) {
      const submitter = event.submitter;
      if (submitter && submitter.id && submitter.id.startsWith("paginate-")) {
        document.getElementById("scroll_pos").value = 0;
      } else {
        document.getElementById("scroll_pos").value = window.scrollY;
      }
    });

  </script>
  {{ enable_variants_hotkeys() }}
{% endblock %}