{% extends 'base.html' %}
{% block code %}
  {% if single %}
    <div id="myplot"></div>
    <script>{{ data }}</script>
    <script type="module">
    import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm";
    const div = document.querySelector("#myplot");
    const plot = {{ code }}
    div.append(plot);
    </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 Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm";
    {% for id, plot in code.items() %}
    const div_{{ id }} = document.querySelector("#plot-{{ id }}");
    const plot_{{ id }} = {{ plot["code"] }}
    div_{{ id }}.append(plot_{{ id }});
    {% endfor %}
    </script>
  {% endif %}
{% endblock %}
{% block wait %}
  waitForFigure("{{ id }}").then(figure => {
    const div = document.getElementById("myplot");
    const svg = (figure.tagName == "FIGURE") ? figure.childNodes[figure.childNodes.length - 1] : figure;
    const boundingRect = div.getBoundingClientRect();
    width = {{ width_code }};
    height = boundingRect.height;
    {% if serialize %}
      {{ serialize_code }}
    {% endif %}
  })
{% endblock %}
