{% extends "layout.html" %}
{% from "clinvar/components.html" import condition_identifiers, hgvs_choices, observations %}

{% block css %}
  {{ super() }}
  <link rel="stylesheet" href="{{ url_for('clinvar.static', filename='form_style.css') }}"/>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.3.0/select2-bootstrap-5-theme.min.css" integrity="sha512-z/90a5SWiu4MWVelb5+ny7sAayYUfMmdXKEAbpj27PfdkamNdyI3hcjxPxkOPbrXoKIm7r9V2mElt5f1OtVhqA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{% endblock %}

{% block title %}
  {{ super() }} - {{ institute.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('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">
    <p class="navbar-text text-nowrap">{{ variant_data.var_obj.display_name|truncate(20, True) }}</p>
  </li>
{% endblock %}

{% block content %}
{% if variant_data.var_obj.category in ["snv", "cancer"]%}
  {% set var_category = 'snv' %}
{% else %}
  {% set var_category = 'sv' %}
{% endif %}
<div class="container-fluid">
  <!-- MultiStep Form -->
  <div class="row d-flex justify-content-center">
      <div class="col-md-10">
          <form id="clinVarAdd" method="POST" action="{{ url_for('clinvar.clinvar_variant_save', institute_id=institute._id, case_name=case.display_name, subm_type='germline') }}" id="{{variant_data.var_id}}_form">
              <!-- progressbar -->
              <ul id="progressbar" class="steps-6">
                  <li class="active">Start</li>
                  <li>Germline Classification</li>
                  <li>Variant Details</li>
                  <li>Inheritance Model</li>
                  <li>Associated conditions</li>
                  <li>Observation Data</li>
              </ul>
              <!-- fieldsets -->
              <fieldset data-step="1">
                <legend class="text-dark">ClinVar variant submission form</legend>
                <p class="text-dark">
                The form present on this page mirrors the fields on the ClinVar submission spreadsheets.<br>
                After collecting the required fields, this variant gets saved in an open ClinVar submission object.<br>
                </p>
                <a href="{{url_for('cases.case',institute_id=institute._id, case_name=case.display_name)}}" class="previous action-button-previous" style="text-decoration: none;">Back to Case</a>
                <input type="button" name="next" class="next action-button" value="Start"/>
              </fieldset>

              <fieldset data-step="2">
                <legend class="text-dark">Germline Classification</legend>

                <!-- hidden fields -->
                {{ variant_data.var_form.csrf_token }}
                <!-- Variant data form -->
                {{ variant_data.var_form.case_id() }}
                {{ variant_data.var_form.category() }}
                {{ variant_data.var_form.local_id() }}
                {{ variant_data.var_form.linking_id() }}
                {{ variant_data.var_form.ref() }}
                {{ variant_data.var_form.alt() }}
                {{ variant_data.var_form.assembly() }}

                <!-- SNVs only -->
                {% if var_category == 'snv' %}
                  {{ variant_data.var_form.chromosome() }}
                  {{ variant_data.var_form.start() }}
                  {{ variant_data.var_form.stop() }}
                {% endif %}
                <!-- end hidden fields -->
                <br><br>
                <div class="mb-3">
                    {% set scout_classif = variant_data.var_obj.classification|replace("_"," ") if variant_data.var_obj.classification else "n.a." %}
                    {{variant_data.var_form.classification.label(class="fw-bold, text-dark")}} <span class="text-danger" data-bs-toggle='tooltip' title="Required field"><strong>*</strong></span>
                    <select name="classification" id="classification" class="form-control, btn-secondary">
                      {% for classif, classif_value in variant_data.var_form.classification.choices %}
                        <option value="{{classif_value}}" {% if classif==scout_classif|capitalize %} selected {% endif %}>{{classif}}</option>
                      {% endfor %}
                    </select>
                  </div>
                  <br><br>
                  <div class="mb-3 col-md-2 offset-md-5">
                    {{ variant_data.var_form.last_evaluated.label(class="fw-bold, text-dark") }}
                    {{ variant_data.var_form.last_evaluated(class="bg-white") }}
                  </div>

                  <div class="mb-3 col-md-6 offset-md-3">
                    {{ variant_data.var_form.clinsig_comment.label(class="fw-bold, text-dark") }} <span data-bs-toggle='tooltip' title="Optional, but highly encouraged. Free text describing the rationale for the classification."><strong>*</strong></span>
                    {{ variant_data.var_form.clinsig_comment(rows=4, class="bg-white") }}
                  </div>
                  <br><br>
                  <div class="mb-3">
                    {{ variant_data.var_form.assertion_method_cit_db.label(class="fw-bold, text-dark") }}
                    {{ variant_data.var_form.assertion_method_cit_db(class="form-control, btn-secondary") }}
                    <span class="text-danger" data-bs-toggle='tooltip' title="This citation is specific to this variant only. Leave blanc if unsure. Note the whole submission, containing one or more variants, will be already containing the following citation reference: 'Standards and guidelines for the interpretation of sequence variants: a joint consensus recommendation of the American College of Medical Genetics and Genomics and the Association for Molecular Pathology. Genet Med. 2015 (Pubmed:25741868)'."><strong>?</strong></span>
                    <span data-bs-toggle='tooltip' title="Optional field"><strong>*</strong></span>
                  </div>

                  <div class="mb-3 col-md-6 offset-md-3">
                    {{ variant_data.var_form.assertion_method_cit_id.label(
                        class="fw-bold, text-dark",
                        id="citation_tooltip",
                        **{'data-bs-toggle': 'tooltip', 'title': 'Original tooltip text'}
                    ) }}
                    {{ variant_data.var_form.assertion_method_cit_id(class="bg-white") }}
                  </div>

                <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                <input type="button" name="next" class="next action-button" value="Next"/>
              </fieldset>
              <fieldset data-step="3">
                  <legend class="text-dark">Variant Details</legend>
                  {{variant_data.var_form.gene_symbol.label(class="fw-bold, text-dark")}} <span class="text-danger" data-bs-toggle='tooltip' title="Gene symbol should be provided only to indicate the gene-disease relationship supporting the variant interpretation. Gene symbol is not expected for SVs, except to make a statement that a specific gene within the variant has a relationship to the interpreted condition."><strong>?</strong></span>
                  {{variant_data.var_form.gene_symbol(class="bg-white")}}
                  <br>
                  {% if var_category == 'snv' %}
                    <br><br>
                    {{hgvs_choices(variant_data.var_form.tx_hgvs)}}
                    <br><br>
                    <!-- dbSNP identifier -->
                    {{variant_data.var_form.variations_ids.label(class="fw-bold, text-dark")}}
                    {{variant_data.var_form.variations_ids(class="bg-white")}}
                    <br>
                  {% else %} <!-- SV variant -->
                    {{ variant_data.var_form.length() }}

                    <div class="row">
                      <div class="col-6">
                        <!-- Variant type -->
                        {{ variant_data.var_form.var_type.label(
                            class="fw-bold text-dark d-inline-block",
                            style="width: 180px;"
                        ) }}
                        {{ variant_data.var_form.var_type(
                            class="form-control d-inline-block btn-secondary",
                            style="width: 200px;"
                        ) }}
                        <br><br>

                        <!-- Reference copy number -->
                        {{ variant_data.var_form.ref_copy.label(
                            class="fw-bold text-dark d-inline-block",
                            style="width: 180px;"
                        ) }}
                        {{ variant_data.var_form.ref_copy(
                            size=5,
                            class="bg-white w-auto",
                            style="width: 100px;"
                        ) }}
                        <br><br>

                        <!-- Copy number -->
                        {{ variant_data.var_form.ncopy.label(
                            class="fw-bold text-dark d-inline-block",
                            style="width: 180px;"
                        ) }}
                        <span
                          class="text-danger"
                          data-bs-toggle="tooltip"
                          title="For copy number variants, both the reference copy number and the observed copy number can be provided."
                        >
                          <strong>?</strong>
                        </span>
                        {{ variant_data.var_form.ncopy(
                            size=5,
                            class="bg-white w-auto",
                            style="width: 100px;"
                        ) }}
                        <br><br>

                        <!-- Chromosome -->
                        {{ variant_data.var_form.chromosome.label(
                            class="fw-bold text-dark d-inline-block",
                            style="width: 180px;"
                        ) }}
                        {{ variant_data.var_form.chromosome(
                            size=5,
                            class="bg-white d-inline-block",
                            style="width: 100px;"
                        ) }}
                        <br><br>
                      </div>

                      <div class="col-6">
                        <!-- Coordinate type -->
                        <div class="mb-3">
                          <span class="fw-bold text-dark d-inline-block" style="width: 180px;">
                            Coordinates
                          </span>

                          <div class="btn-group" role="group" aria-label="Coordinate type">
                            <input
                              type="radio"
                              class="btn-check"
                              name="coordinate_type"
                              id="precise_coordinates"
                              value="precise"
                              autocomplete="off"
                              checked
                            >
                            <label
                              class="btn btn-outline-secondary"
                              for="precise_coordinates"
                            >
                              Precise
                            </label>

                            <input
                              type="radio"
                              class="btn-check"
                              name="coordinate_type"
                              id="approximate_coordinates"
                              value="approximate"
                              autocomplete="off"
                            >
                            <label
                              class="btn btn-outline-secondary"
                              for="approximate_coordinates"
                            >
                              Approximate
                            </label>
                          </div>
                        </div>

                        <!-- Precise coordinates -->
                        <div id="precise-coordinate-fields">
                          <!-- Start -->
                          {{ variant_data.var_form.breakpoint1.label(class="fw-bold text-dark me-2") }}
                          {{ variant_data.var_form.breakpoint1(class="bg-white", style="width: 300px;") }}
                          <br><br>

                          <!-- Stop -->
                          {{ variant_data.var_form.breakpoint2.label(class="fw-bold text-dark me-2") }}
                          {{ variant_data.var_form.breakpoint2(class="bg-white", style="width: 300px;") }}
                        </div>

                        <!-- Approximate coordinates -->
                        <div id="approximate-coordinate-fields" class="d-none">
                          <!-- Outer start -->
                          {{ variant_data.var_form.outer_start.label(class="fw-bold text-dark me-2") }}
                          {{ variant_data.var_form.outer_start(
                              size=20,
                              class="bg-white",
                              style="width: 300px;"
                          ) }}
                          <br><br>

                          <!-- Inner start -->
                          {{ variant_data.var_form.inner_start.label(class="fw-bold text-dark me-2") }}
                          {{ variant_data.var_form.inner_start(
                              size=20,
                              class="bg-white",
                              style="width: 300px;"
                          ) }}
                          <br><br>

                          <!-- Inner stop -->
                          {{ variant_data.var_form.inner_stop.label(class="fw-bold text-dark me-2") }}
                          {{ variant_data.var_form.inner_stop(
                              size=20,
                              class="bg-white",
                              style="width: 300px;"
                          ) }}
                          <br><br>

                          <!-- Outer stop -->
                          {{ variant_data.var_form.outer_stop.label(class="fw-bold text-dark me-2") }}
                          {{ variant_data.var_form.outer_stop(
                              size=20,
                              class="bg-white",
                              style="width: 300px;"
                          ) }}
                        </div>
                      </div>
                    </div>
                  {% endif %} <!-- End of SV coordinates fields -->
                  <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                  <input type="button" name="next" class="next action-button" value="Next"/>
              </fieldset>

              <fieldset data-step="4">
                <legend class="text-dark">Inheritance model</legend>
                <h3 class="fs-subtitle">The mode of inheritance specific to the variant-disease pair, not generally for the disease</h3>
                {{variant_data.var_form.inheritance_mode.label(class="fw-bold, text-dark")}}
                {{variant_data.var_form.inheritance_mode(class="form-control, btn-secondary")}}
                <br>
                <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                <input type="button" name="next" class="next action-button" value="Next"/>
              </fieldset>

              <fieldset data-step="6">
                <legend class="text-dark">Associated Conditions</legend>
                <h3 class="fs-subtitle">The condition for which the variant is interpreted. Examples available at <a href="https://www.ncbi.nlm.nih.gov/clinvar/docs/spreadsheet/#condition" target="_blank" rel="noopener">ClinVar</a></h3>

                {{ condition_identifiers(variant_data.var_form) }}

                <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                <input type="button" name="next" class="next action-button" value="Next"/>
              </fieldset>

              <fieldset data-step="7">
                <legend class="text-dark">Observation Data</legend>
                <h3 class="fs-subtitle">Information provided by filling in these fields will be used to create the CaseData.csv file. Observations from at least one individuals are required.</h3>

                {{ observations(variant_data.cdata_forms) }}

                <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                <input type="submit" name="submit" class="submit action-button" value="Add to submission"/>
              </fieldset>

          </form>
      </div>
  </div>
  <!-- /.MultiStep Form -->
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/js/bootstrap-select.min.js" integrity="sha512-yrOmjPdp8qH8hgLfWpSFhC/+R9Cj9USL8uJxYIveJZGAiedxyIxwNw4RsLDlcjNlIRR4kkHaDHSmNHAkxFTmgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  document.querySelectorAll('input[name="coordinate_type"]').forEach(function (radio) {
    radio.addEventListener("change", function () {
      const preciseFields = document.getElementById("precise-coordinate-fields");
      const approximateFields = document.getElementById("approximate-coordinate-fields");
      const precise = this.value === "precise";

      preciseFields.classList.toggle("d-none", !precise);
      approximateFields.classList.toggle("d-none", precise);

      preciseFields.querySelectorAll("input").forEach(function (input) {
        input.disabled = !precise;
      });

      approximateFields.querySelectorAll("input").forEach(function (input) {
        input.disabled = precise;
      });
    });
  });
</script>
{% include "clinvar/scripts.html" %}
{% endblock %}