{# Plotly chart container macro.
   Usage: {% from "components/chart.html" import chart %}
          {{ chart("my-chart", "/dash/api/batches/123/figure") }}
#}

{% macro chart(div_id, endpoint_url, height="400px") %}
<div class="relative" style="height: {{ height }}">
  <div id="{{ div_id }}" class="w-full h-full">
    {# Loading spinner -- replaced by Plotly chart on load #}
    <div class="htmx-indicator absolute inset-0 flex items-center justify-center">
      <svg class="animate-spin h-8 w-8 text-blue-500" xmlns="http://www.w3.org/2000/svg"
           fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
        <path class="opacity-75" fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
      </svg>
    </div>
  </div>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      renderChart("{{ div_id }}", "{{ endpoint_url }}");
    });
  </script>
</div>
{% endmacro %}