{% extends 'tabbed.html' %}

{% block tabcontent %}

  <div class="row">
    <div class="col-lg-8">
      <h3>CheckM plots</h3>
      <div class="col-lg-12" id="toolbar">
        <div class="row">
        <select class="form-control" id="sample-selector" onchange="updatePlots(this.value, plotsPerSample)">
        </select>
        </div>
      </div>
      <div class="col-lg-8" id="plots"></div>
    </div>

  <!--  <div class="col-lg-12" id="plots">-->
  <!--    <div class="row">-->
  <!--      <div class="col-lg-8">-->

  <!--      </div>-->
  <!--      <div class="col-lg-4">-->
  <!--        <div class="btn-group">-->
  <!--          <a href="results.tsv" class="btn btn-default"> CheckM report (tsv) </a>-->
  <!--        </div>-->
  <!--      </div>-->
  <!--    </div>-->



  <!--    <div class="row">-->
  <!--      <div class="col-lg-12">-->
  <!--        <h3>Tools</h3>-->
  <!--      </div>-->
  <!--    </div>-->



  <!--    <br>-->
  <!--    <div class="btn-group">-->
  <!--      <a href="results.tsv" class="btn btn-default"> CheckM report (tsv) </a>-->
  <!--    </div>-->
  <!--    <div class="row">-->
  <!--      <div class="col-lg-12" id="toolbar"></div>-->
  <!--    </div>-->
  <!--  </div>-->
  </div>

  {% if plots_gc is defined %}
  <script id="plotsGC" type="application/json">
    {{ plots_gc }}
  </script>
  {% endif %}

  {% if plots_coding is defined %}
  <script id="plotsCoding" type="application/json">
    {{ plots_coding }}
  </script>
  {% endif %}

  {% if plots_nx is defined %}
  <script id="plotsNx" type="application/json">
    {{ plots_nx }}
  </script>
  {% endif %}

  {% if samples is defined %}
  <script id="sampleIds" type="application/json">
    {{ samples }}
  </script>
  {% endif %}

  {% if plots_per_sample is defined %}
  <script id="plotsPerSample" type="application/json">
    {{ plots_per_sample }}
  </script>
  {% endif %}

  <script type="text/javascript">
    const plotsPerSample = JSON.parse(document.getElementById('plotsPerSample').innerHTML)
    const sampleIds = JSON.parse(document.getElementById('sampleIds').innerHTML)

    $( document ).ready( function() {
      populateSampleSelector(sampleIds)

      let selectedSample = $( "#sample-selector" ).val()
      updatePlots(selectedSample, plotsPerSample)
    });

    function populateSampleSelector(samples) {
      samples.forEach( sampleId => {
        $("#sample-selector").append(`<option value="${sampleId}">${sampleId}</option>`)
      })
    }

    function updatePlots(sampleId, allPlots) {
      const imgs = allPlots[sampleId];
      console.log(imgs);
      $("#plots div").empty();
      for (let i = 0; i < imgs['plots_gc'].length; i++) {
        let imgGC = imgs['plots_gc'][i];
        let imgNx = imgs['plots_nx'][i];
        let imgCoding = imgs['plots_coding'][i];
        console.log(imgCoding, imgGC, imgNx);
        $("#plots")
          .append(
            "<div class='container'>" +
              "<div class='col-xs-7'>" +
                // "<div class='row'>Bin name</div>" +
                "<div class='row'>" +
                  `<img src='plots/gc/${sampleId}/${imgGC}' alt='${sampleId}'>` +
                "</div>" +
                "<div class='row'>" +
                  `<img src='plots/coding/${sampleId}/${imgCoding}' alt='${sampleId}'>` +
                "</div>" +
              "</div>" +
              "<div class='col-xs-7 align-self-center'>" +
                `<img src='plots/nx/${sampleId}/${imgNx}' alt='${sampleId}'>` +
              "</div>" +
            "</div>"
          )
        }
    }
  </script>

{% endblock %}

{% block footer %}
{% set loading_selector = '#loading' %}
{% include 'js-error-handler.html' %}

{% endblock %}