{% load dashboard %}

<div
    class="grid-stack-item"
    gs-w="{{ widget.width }}"
    gs-h="{{ widget.height }}"
    gs-x="{{ widget.x }}"
    gs-y="{{ widget.y }}"
    gs-id="{{ widget.id }}"
>
  <div class="card grid-stack-item-content">
    <div class="card-header text-center text-light bg-{% if widget.color %}{{ widget.color }}{% else %}secondary{% endif %} p-1">
      <div class="float-start ps-1">
        <a href="#"
          hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
          hx-target="#htmx-modal-content"
          data-bs-toggle="modal"
          data-bs-target="#htmx-modal"
        ><i class="mdi mdi-cog text-gray"></i></a>
      </div>
      <div class="float-end pe-1">
        <a href="#"
          hx-get="{% url 'extras:dashboardwidget_delete' id=widget.id %}"
          hx-target="#htmx-modal-content"
          data-bs-toggle="modal"
          data-bs-target="#htmx-modal"
        ><i class="mdi mdi-close text-gray"></i></a>
      </div>
      {% if widget.title %}
        <strong>{{ widget.title }}</strong>
      {% endif %}
    </div>
    <div class="card-body p-2 overflow-auto">
      {% render_widget widget %}
    </div>
  </div>
</div>