<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4" id="entity-list">
  {% for entity in entities %}
  <div class="card min-w-72 bg-base-100 shadow">
    <div class="card-body">
      <h2 class="card-title">{{entity.name}}
        <span class="badge badge-xs badge-primary">{{entity.entity_type}}</span>
      </h2>
      <div class="flex justify-between items-center">
        <p>{{entity.updated_at | datetimeformat(format="short", tz=user.timezeone)}}</p>
        <div>
          <button hx-get="/knowledge-entity/{{entity.id}}" hx-target="#modal" hx-swap="innerHTML"
            class="btn  btn-square btn-ghost btn-sm">
            {% include "icons/edit_icon.html" %}
          </button>
          <button hx-delete="/knowledge-entity/{{entity.id}}" hx-target="#entity-list" hx-swap="outerHTML"
            class="btn btn-square btn-ghost btn-sm">
            {% include "icons/delete_icon.html" %}
          </button>
        </div>
      </div>
      <p>{{entity.description}}</p>
    </div>
  </div>
  {% endfor %}
</div>