<div class="card bg-base-100 shadow-sm">
  <div class="card-body p-3">
    <h3 class="card-title text-sm">{{ title }}</h3>
    {% if items %}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      {% for item in items %}
      <div class="card card-compact bg-base-200{% if action_url %} cursor-pointer hover:bg-base-300 transition-colors{% endif %}"
           {% if action_url %}hx-get="{{ action_url | replace('{id}', item.id|string) }}"
           hx-push-url="true" hx-target="body"{% endif %}>
        <div class="card-body">
          <h4 class="card-title text-sm">{{ item[display_key] | default(item.get("name", "Item")) }}</h4>
          {% for col in columns %}
          {% if col.key != display_key %}
          <p class="text-xs">
            <span class="opacity-60">{{ col.label }}:</span>
            {% if col.type == "badge" %}
              <span class="badge badge-sm {{ item[col.key] | badge_class }}">{{ item[col.key] | default("") }}</span>
            {% elif col.type == "bool" %}
              {{ item[col.key] | bool_icon }}
            {% elif col.type == "date" %}
              {{ item[col.key] | dateformat }}
            {% elif col.type == "currency" %}
              {{ item[col.key] | currency }}
            {% else %}
              {{ item[col.key] | default("") | truncate_text }}
            {% endif %}
          </p>
          {% endif %}
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="text-sm opacity-50">{{ empty_message | default("No data available.") }}</p>
    {% endif %}
  </div>
</div>
