{# One dashboard widget as a Gridstack item — shared by index.html (initial render)
   and the add-widget endpoint (single-item insert). Edit chrome (drag handle +
   remove) is in the DOM only for editors and shown via body.dash-editing CSS. #}
<div class="grid-stack-item" gs-id="{{ item.db.id }}"
     gs-x="{{ item.db.grid_x }}" gs-y="{{ item.db.grid_y }}"
     gs-w="{{ item.db.grid_w }}" gs-h="{{ item.db.grid_h }}">
  <div class="grid-stack-item-content">
    <div class="widget-header">
      <span style="display:flex;align-items:center;gap:0.4rem;min-width:0;">
        {% if can_edit %}<span class="panel-chrome panel-drag" title="Drag to move">⠿</span>{% endif %}
        <span class="widget-title" title="{{ item.title }}">{{ item.title }}</span>
      </span>
      <span style="display:flex;align-items:center;gap:0.5rem;flex-shrink:0;">
        <a href="{{ item.defn.detail_url }}" class="widget-link">Details →</a>
        {% if can_edit %}<button type="button" class="panel-chrome btn btn-danger btn-sm"
                data-remove="{{ item.db.id }}" title="Remove widget"
                style="padding:0.05rem 0.4rem;line-height:1.3;">✕</button>{% endif %}
      </span>
    </div>
    <div class="dash-cell-body" id="widget-{{ item.db.id }}"
         hx-get="{{ item.hx_url }}"
         hx-trigger="load{% if item.defn.poll %}, every {{ poll_interval }}s{% endif %}"
         hx-swap="innerHTML"></div>
  </div>
</div>