{% 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 }}"
    data-detail-url="{{ object.get_absolute_url }}"
    data-object-string="{{ object }}"
    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>
        <c-features.dataviews.checkbox 
            object_id="{{ object.pk }}"
            content_type_id="{{ content_type_id }}"
            />
    </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.title }}:</span>
            <span class="truncate flex-1">
                {% render_dataview_value object=object application_field=field user=request.user row_index=forloop.parentloop.counter0 column_index=forloop.counter0 url=object.get_absolute_url split_view_enabled=preference.split_view_enabled %}
            </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_action' content_type_id=content_type_id action='column' %}{% 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 %}