{% macro clinvar_howto_modal() %}
<div class="modal fade" id="howto" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-body">
            <h4>Submission of Variants to the ClinVar portal</h4>
            <h5>Requirements</h5>
            Make sure to <strong>register a user</strong> to the <a href="https://www.ncbi.nlm.nih.gov/clinvar/docs/submission_portal/" target="_blank" rel="noopener">ClinVar submission portal.</a><br>
                          If your Organization is not already present in ClinVar you should follow the instructions to <strong>register a submitting Organization</strong> to the same portal.
                          The first time an organization is registered in the ClinVar Submission Portal, the content will be reviewed, so it will take some time before getting approved in order to start a variant submission.
            <br><br>
            <h5>Automatic submission</h4>
            Once the requirements above are fulfilled you could submit manually using files uploaded to the ClinVar submission portal. See the heading below. You can avoid this extra file handling step by submitting directly via API instead. Submission by API requires a <strong>service account key</strong> for the submitting organization and an API key associated with it.
            Follow the instructions provided on the <a href="https://www.ncbi.nlm.nih.gov/clinvar/docs/api_http/" target="_blank" rel="noopener">API pages</a> to obtain a valid key for the service account.<br>
            Once you are satisfied with the content of your submission in Scout, you can submit your variants using the ClinVar API. If you obtained a submission ID from ClinVar (format: "SUB999999") and you want to use it for the submission, you can save it using the "Update ID manually" button:<br><br>

              <img class="img-fluid" width="875" alt="image" src="https://github.com/Clinical-Genomics/scout/assets/28093618/8289aae8-eb95-4f77-8abc-44c748f8406c"><br><br>

            Alternatively you can <strong>leave the Submission ID blank, so it will be retrieved directly from the ClinVar API once a successful submission has been processed.</strong>.

            To send the submission object to ClinVar using the API click on the <strong>Submit to ClinVar</strong> button:<br><br>

              <img width="264" alt="image" src="https://user-images.githubusercontent.com/28093618/208666318-0efac91e-c5d2-42a0-9ceb-d7fc68c6d920.png"><br><br>

            If the submission object is processed without errors then it will be marked as "submitted" in Scout, otherwise any validation errors should be displayed on top of the page.<br><br>

            If the submission object is processed without errors, it will be marked as "submitted" in Scout. Any validation errors detected by Scout's local validation will be displayed at the top of the page.

            <b>Please note that this is only a basic validation. The actual validation of the submission contents and processing of the submission is performed by the ClinVar portal and is not immediately available</b>.<br>

            After submitting, wait for some time and then click the "Submission status enquiry" button to check the processing status in ClinVar. Scout will display a message indicating whether the submission was processed successfully or resulted in an error. <br><br>

              <img width="400" alt="Submission status enquiry button" src="{{ url_for('clinvar.static', filename='clinvar/clinvar_status.png') }}"><br><br>

            If ClinVar reports an error, the message may also contain a link to a file provided by ClinVar with additional details about the error. This file can be downloaded and used to investigate and correct the submission.

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
    </div>
  </div>
{% endmacro %}