{% extends "base.html" %}

{% block head %}
<script src='dist/vendor.bundle.js'></script>
<style type="text/css">
  .viz {
    padding-top: 5px;
  }

  .plot {
    display: flex;
  }

  .bars {
    overflow-x: auto;
    max-width: 75%;
    margin-left: 15px;
    margin-right: 15px;
  }

  .legend {
    overflow-x: auto;
    overflow-y: auto;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 18px;
  }
</style>
{% endblock %}

{% block content %}
    <script>
      var d = [];
      function load_data(level, taxaKeys, allKeys, data) {
        data = data;
        data.columns = allKeys;
        d.push({
          level: level,
          taxaKeys: taxaKeys,
          data: data,
        });
      }
    </script>
    {% for level in jsonp_files %}
    <script src='{{ level }}?callback=load_data'></script>
    {% endfor %}
    <script src='dist/bundle.js'></script>
    <p>Number of sample metadata columns provided: {{ num_metadata_cols }}</p>
{% endblock %}