{# Diagram region — UX-035 adopter #11. #}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(title) %}
  {% if diagram_data %}
  <div class="overflow-x-auto">
    <pre class="mermaid text-[13px] text-[hsl(var(--foreground))]">{{ diagram_data }}</pre>
  </div>
  <script>
    if (typeof mermaid === "undefined") {
      var s = document.createElement("script");
      s.src = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js";
      s.onload = function () {
        mermaid.initialize({ startOnLoad: true, theme: "neutral" });
        mermaid.run();
      };
      document.head.appendChild(s);
    } else {
      mermaid.run();
    }
  </script>
  {% else %}
  <p class="text-[13px] text-[hsl(var(--muted-foreground))]">No entity relationships to display.</p>
  {% endif %}
{% endcall %}