{% load bloomerp %}

{% for row in gant_rows %}
<div
    class="grid min-h-16 border-b border-gray-200 last:border-b-0"
    data-gant-layout
    data-gant-row
    data-object-id="{{ row.object.pk }}"
>
    <div
        class="sticky left-0 z-30 min-w-0 cursor-pointer overflow-hidden border-r border-gray-200 bg-base px-3 py-2"
        data-detail-url="{{ row.object.get_absolute_url }}"
        data-object-id="{{ row.object.pk }}"
        data-object-string="{{ row.object }}"
        bloomerp-component="gant-chart-sidebar-item"
    >
        <div class="truncate text-sm font-medium text-dark" title="{{ row.object }}">{{ row.object }}</div>
        <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1">
            {% for field in fields %}
            <div class="min-w-0 text-xs text-gray-500">
                <span class="font-medium">{{ field.title }}:</span>
                {% render_dataview_value object=row.object application_field=field user=request.user row_index=forloop.parentloop.counter0 column_index=forloop.counter0 url=row.object.get_absolute_url split_view_enabled=preference.split_view_enabled %}
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="relative min-h-16 bg-base" data-gant-timeline-row data-gant-dropzone>
        {% if row.scheduled %}
        <div
            class="absolute top-3 z-20 flex h-10 min-w-1 select-none cursor-grab items-center rounded-xl bg-primary px-2 text-xs font-medium text-white shadow-xs hover:brightness-95 active:cursor-grabbing"
            title="{{ row.object }} · {% if row.shows_time %}{{ row.start|date:'M j, Y H:i' }} – {{ row.end|date:'M j, Y H:i' }}{% else %}{{ row.start|date:'M j, Y' }} – {{ row.end|date:'M j, Y' }}{% endif %}"
            data-gant-item
            data-start="{{ row.start_ms }}"
            data-end="{{ row.end_ms }}"
            data-detail-url="{{ row.object.get_absolute_url }}"
            data-object-id="{{ row.object.pk }}"
            data-object-string="{{ row.object }}"
            data-dependency-from-id="{{ row.dependency_from_id }}"
            data-dependency-for-id="{{ row.dependency_for_id }}"
            data-row-index="{{ forloop.counter0 }}"
            data-column-index="0"
            data-gant-can-edit-start="{{ row.can_edit_start|yesno:'true,false' }}"
            data-gant-can-edit-end="{{ row.can_edit_end|yesno:'true,false' }}"
            bloomerp-component="gant-chart-item"
        >
            {% if row.can_edit_start %}
            <span class="absolute inset-y-0 left-0 w-3 cursor-ew-resize" data-gant-resize-start aria-hidden="true"></span>
            {% endif %}
            <span class="truncate">{{ row.object }}</span>
            {% if row.can_edit_end %}
            <span class="absolute inset-y-0 right-0 w-3 cursor-ew-resize" data-gant-resize-end aria-hidden="true"></span>
            {% endif %}
        </div>
        {% else %}
        <div class="flex h-full items-center px-3 text-xs text-gray-500">
            <c-i18n.blocktrans>Start or end date is missing.</c-i18n.blocktrans>
        </div>
        {% endif %}
    </div>
</div>
{% empty %}
    {% if not page_obj or page_obj.number == 1 %}
    <div class="grid min-h-32 border-b border-gray-200" data-gant-layout>
        <div class="sticky left-0 z-30 flex items-center border-r border-gray-200 bg-base px-3 text-sm text-gray-500">
            <c-i18n.blocktrans>No scheduled records.</c-i18n.blocktrans>
        </div>
        <div class="relative flex items-center justify-center bg-base text-xs text-gray-500" data-gant-dropzone>
            <c-i18n.blocktrans>Drop an unscheduled record here.</c-i18n.blocktrans>
        </div>
    </div>
    {% endif %}
{% endfor %}

{% if page_obj and page_obj.has_next %}
<div
    class="py-3 text-center text-xs text-gray-500"
    data-gant-page-loader
    hx-get="{% url 'components_dataview_action' content_type_id=content_type_id action='page' %}{% if gant_page_querystring %}?{{ gant_page_querystring }}&amp;{% else %}?{% endif %}gant_page={{ 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 %}