{% extends 'base.html' %}
{% block content %}
<div class="container-fluid">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0"><i class="bi bi-speedometer2 me-2"></i> {{ dashboard.title }}</h4>
    <a class="btn btn-outline-secondary" href="{{ url_for('dashbuild.builder') }}">
      <i class="bi bi-pencil-square me-1"></i> Edit
    </a>
  </div>

  <div class="grid-stack"></div>
</div>

<link href="https://cdn.jsdelivr.net/npm/gridstack@9.2.2/dist/gridstack.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/gridstack@9.2.2/dist/gridstack-all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<style>
.widget-body canvas { min-height: 220px; }
</style>

<script>
// same helper to execute inline scripts
function __execScripts(container){
  const scripts = container.querySelectorAll('script');
  scripts.forEach(s => {
    const n = document.createElement('script');
    for (const {name, value} of Array.from(s.attributes)) n.setAttribute(name, value);
    if (s.src) { n.src = s.src; n.async = false; } else { n.textContent = s.textContent; }
    document.body.appendChild(n);
    n.remove();
  });
}

(function(){
  const grid = GridStack.init({ cellHeight: 90, staticGrid: true });

  const items = [
    {% for w in widgets %}
      {id: {{ w.id }}, x: {{ w.x }}, y: {{ w.y }}, w: {{ w.w }}, h: {{ w.h }} },
    {% endfor %}
  ];
  items.forEach(i => {
    const el = document.createElement('div');
    el.className = 'grid-stack-item'; el.setAttribute('gs-id', i.id);
    el.innerHTML = `<div class="grid-stack-item-content card h-100 shadow-sm">
      <div class="card-body p-2 widget-body"><div class="text-muted small">Loading…</div></div>
    </div>`;
    grid.addWidget(el, {x:i.x, y:i.y, w:i.w, h:i.h});
    fetch(`{{ url_for('dashbuild.api_render_widget', widget_id=0) }}`.replace('/0','/'+i.id))
      .then(r=>r.json()).then(resp=>{
        const body = el.querySelector('.widget-body');
        body.innerHTML = resp.ok ? resp.html : '<div class="text-danger">Failed.</div>';
        if (resp.ok) __execScripts(body); // <<< run inline scripts
      });
  });
})();
</script>
{% endblock %}