{% extends 'base.html' %}
{% block code %}
  {% if single %}
    <div id="myplot"></div>
    <script>{{ data }}</script>
    <script type="module">
    import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
    {{ code }}
    </script>
  {% else %}
    <div id="myplot" class="container"> 
    {% for id, plot in code.items() %}
      <div>
        {% if plot["title"] %}
        <h2>{{ plot["title"] }}</h1>
        {% endif %}
        <div class="plot" id="plot-{{ id }}"></div>
      </div>
    {% endfor %}
    </div>
    <script>{{ data }}</script>
    <script type="module">
    import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
    {% for id, plot in code.items() %}
    function plot_{{ id }}(){
      {{ plot["code"] }}
    }
    plot_{{ id }}();
    {% endfor %}
    </script>
  {% endif %}
{% endblock %}
{% block wait %}
  waitForFigure("{{ id }}").then(svg => {
    const div = document.getElementById("myplot");
    const boundingRect = div.getBoundingClientRect();
    width = {{ width_code }};
    height = boundingRect.height;
    {% if serialize %}
      {{ serialize_code }}
    {% endif %}
  })
{% endblock %}
