{% extends 'tabbed.html' %}

{% block tabcontent %}
  <br>
  <div class="row">
      <div class="col-lg-4" style="display: flex; align-items: center">
          <label style="white-space:nowrap; margin-right:10px">Sample ID: </label>
          <select class="form-control" id="sample-id" style="margin-right:7px" onchange="updateHTMLLink()"> </select>
      </div>
  </div>

  <br>
  <div class="row">
    <div class="col-lg-12">
      <iframe src="quast_data/krona_charts/summary_taxonomy_chart.html" style="width:100%; height:1500px; border:none;" id="krona_plot"></iframe>
    </div>
  </div>

  <script id="sample-names" type="application/json">
      {{ samples }}
  </script>

  <script type="text/javascript">
      var updateHTMLLink = function() {
          // Get the string representing the selection in the dropdown menu
          var currentOption = document.getElementById("sample-id").value

          // Get the HTML element to modify it
          var kronaHTML = document.getElementById("krona_plot")

          // Check weather the chosen option is a sample of the summary
          if (currentOption.includes("sample")) {
              var filename = currentOption + "_contigs";
          } else {
              var filename = currentOption;
          }

          // Change the attribute to the corresponding HTML file
          kronaHTML.setAttribute("src", `quast_data/krona_charts/${filename}_taxonomy_chart.html`)
      }

      var populateDropDownMenu = function() {
          // Get all sample-ids
          var sampleNames = JSON.parse(document.getElementById("sample-names").innerHTML)

          // Get the dropdown menu
          var selectElement = document.getElementById("sample-id")

          // For every sample name add an element to the DDM
          sampleNames.forEach(sn => {
              var option = document.createElement("option")
              option.text = sn
              option.value = sn
              selectElement.add(option)
          })

          // Add the option of the summary krona
          var option = document.createElement("option")
          option.text = "summary"
          option.value = "summary"
          selectElement.add(option)

          // Update HTML link
          updateHTMLLink()
      }

      $(document).ready(function() {
          populateDropDownMenu()
      })
  </script>

{% endblock %}
