{% load bloomerp %}

{% for object in group.items %}
<div
    class="kanban-card bg-white rounded-xl border border-gray-200 p-3 shadow-sm hover:shadow-md transition-shadow cursor-grab active:cursor-grabbing"
    draggable="true"
    data-object-id="{{ object.pk }}"
    hx-get="{{ object.get_absolute_url }}"
    hx-target="#main-content"
    hx-swap="innerHTML"
    hx-trigger="click"
    hx-push-url="true"
    bloomerp-component="kanban-card"
>
    <div class="mb-2 flex items-center gap-2">
        {% if avatar_field %}
            <c-ui.avatar :object="object" :avatar_attribute="avatar_field.field" size="32" class_name="rounded-full object-cover shrink-0" />
        {% endif %}
        <div class="min-w-0 flex-1 font-medium text-gray-900 text-sm truncate" title="{{ object }}">
            {{ object }}
        </div>
    </div>

    <div class="space-y-1">
        {% for field in fields %}
        <div class="flex items-center text-xs text-gray-600">
            <span class="text-gray-400 mr-1 truncate w-20">{{ field.field|title }}:</span>
            <span class="truncate flex-1">
                {% with value=object|getattr_filter:field.field %}
                    {{ value|default:"-" }}
                {% endwith %}
            </span>
        </div>
        {% endfor %}
    </div>
</div>
{% empty %}
    {% if not group.page_obj or group.page_obj.number == 1 %}
    <div class="text-center py-4 text-gray-400 text-sm">
        No items
    </div>
    {% endif %}
{% endfor %}

{% if group.has_next_page %}
<div
    class="py-3 text-center text-xs text-gray-400"
    data-kanban-column-loader
    hx-get="{% url 'components_data_view_kanban_column' content_type_id=content_type_id %}{% if kanban_page_querystring %}?{{ kanban_page_querystring }}&{% else %}?{% endif %}kanban_column={{ group.request_value|urlencode }}&kanban_page={{ group.next_page_number }}"
    hx-trigger="intersect once"
    hx-target="this"
    hx-swap="outerHTML"
>
    Loading more...
</div>
{% endif %}