{% for row in gant_unscheduled_rows %}
<div
    class="flex min-w-40 max-w-64 items-center gap-2 rounded-xl border border-gray-200 bg-base px-3 py-2 text-sm text-dark shadow-xs {% if row.can_edit_start and row.can_edit_end %}cursor-grab active:cursor-grabbing{% else %}cursor-not-allowed opacity-60{% endif %}"
    data-gant-unscheduled-item
    data-object-id="{{ row.object.pk }}"
    data-object-string="{{ row.object }}"
    data-gant-can-edit-start="{{ row.can_edit_start|yesno:'true,false' }}"
    data-gant-can-edit-end="{{ row.can_edit_end|yesno:'true,false' }}"
    draggable="{% if row.can_edit_start and row.can_edit_end %}true{% else %}false{% endif %}"
>
    <i class="fa fa-grip-vertical text-gray-400" aria-hidden="true"></i>
    <span class="truncate">{{ row.object }}</span>
</div>
{% empty %}
    {% if not gant_unscheduled_page_obj or gant_unscheduled_page_obj.number == 1 %}
    <div class="py-2 text-xs text-gray-500" data-gant-unscheduled-empty>
        <c-i18n.blocktrans>All visible records are scheduled.</c-i18n.blocktrans>
    </div>
    {% endif %}
{% endfor %}

{% if gant_unscheduled_page_obj and gant_unscheduled_page_obj.has_next %}
<div
    class="w-full py-2 text-center text-xs text-gray-500"
    data-gant-unscheduled-loader
    hx-get="{% url 'components_dataview_action' content_type_id=content_type_id action='unscheduled' %}{% if gant_unscheduled_querystring %}?{{ gant_unscheduled_querystring }}&amp;{% else %}?{% endif %}gant_unscheduled_page={{ gant_unscheduled_page_obj.next_page_number }}"
    hx-trigger="intersect once"
    hx-target="this"
    hx-swap="outerHTML"
>
    <c-i18n.blocktrans>Loading more…</c-i18n.blocktrans>
</div>
{% endif %}