{% load i18n %}
{% load bloomerp %}

{% if not gant_configured %}
<div class="rounded-xl border border-gray-200 bg-base p-6 text-sm text-dark">
    {% blocktrans %}Select a start field and an end field in the display options to configure the Gantt chart.{% endblocktrans %}
</div>
{% else %}
<div
    bloomerp-component="gant-chart"
    data-content-type-id="{{ content_type_id }}"
    data-gant-start="{{ gant_start_ms }}"
    data-gant-end="{{ gant_end_ms }}"
    data-gant-start-field-type="{{ gant_start_field_type }}"
    data-gant-end-field-type="{{ gant_end_field_type }}"
    data-gant-update-url="{% url 'components_dataview_action' content_type_id=content_type_id action='dates' %}"
    data-resizable-div-container
    class="relative h-full w-full min-w-0 overflow-auto rounded-xl border border-gray-200 bg-base focus:outline-none focus:ring-0"
>
    <div class="sticky left-0 top-0 z-50 flex h-11 w-full items-center justify-end gap-1 border-b border-gray-200 bg-base px-2 shadow-xs">
        <button type="button" class="btn btn-sm" data-gant-today>
            {% blocktrans %}Today{% endblocktrans %}
        </button>
        <div class="flex items-center overflow-hidden rounded-xl border border-gray-200 bg-base">
            <button type="button" class="flex h-8 w-8 items-center justify-center text-gray-500 hover:bg-gray-100 hover:text-dark" data-gant-zoom-out>
                <i class="fa fa-minus" aria-hidden="true"></i>
                <span class="sr-only">{% blocktrans %}Zoom out{% endblocktrans %}</span>
            </button>
            <select class="h-8 min-w-24 border-x border-y-0 border-gray-200 bg-base px-2 text-xs font-medium text-dark focus:ring-0" data-gant-zoom>
                <option value="0">{% blocktrans %}Year{% endblocktrans %}</option>
                <option value="1">{% blocktrans %}Quarter{% endblocktrans %}</option>
                <option value="2">{% blocktrans %}Month{% endblocktrans %}</option>
                <option value="3">{% blocktrans %}Week{% endblocktrans %}</option>
                <option value="4">{% blocktrans %}Hour{% endblocktrans %}</option>
            </select>
            <button type="button" class="flex h-8 w-8 items-center justify-center text-gray-500 hover:bg-gray-100 hover:text-dark" data-gant-zoom-in>
                <i class="fa fa-plus" aria-hidden="true"></i>
                <span class="sr-only">{% blocktrans %}Zoom in{% endblocktrans %}</span>
            </button>
        </div>
    </div>

    <div class="sticky top-11 z-40 grid h-16 border-b border-gray-200 bg-base shadow-xs" data-gant-layout>
        <c-ui.resizable_div
            id="gant-records-{{ content_type_id }}"
            start_width="320px"
            resize_from="right"
            class="sticky left-0 z-30 h-16 bg-base"
        >
            <div class="flex h-full min-w-0 items-center overflow-hidden border-r border-gray-200 bg-base px-3" data-resizable-div-panel data-gant-sidebar>
                <div class="min-w-0">
                    <div class="text-sm font-medium text-dark">{% blocktrans %}Records{% endblocktrans %}</div>
                    <div class="truncate text-xs text-gray-500" data-gant-visible-range></div>
                </div>
            </div>
        </c-ui.resizable_div>
        <div class="relative h-16 overflow-hidden bg-base" data-gant-timeline-header></div>
    </div>

    <div class="relative" data-gant-rows>
        <div class="pointer-events-none absolute inset-y-0 z-10" data-gant-grid aria-hidden="true"></div>
        {% include "components/objects/dataview_gant_rows.html" %}
    </div>

    <div class="sticky left-0 z-30 min-h-28 border-t border-gray-200 p-3" data-gant-unscheduled-tray>
        <div class="mb-2">
            <div class="text-sm font-medium text-dark">{% blocktrans %}Unscheduled records{% endblocktrans %}</div>
            <div class="text-xs text-gray-500">{% blocktrans %}Drag a record onto the timeline to schedule it.{% endblocktrans %}</div>
        </div>
        <div class="flex flex-wrap gap-2" data-gant-unscheduled-items>
            {% include "components/objects/dataview_gant_unscheduled.html" %}
        </div>
    </div>

    <svg class="pointer-events-none absolute inset-0 z-20 overflow-visible" data-gant-dependencies aria-hidden="true">
        <defs>
            <marker id="gant-arrow-{{ content_type_id }}" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
                <path d="M0,0 L6,3 L0,6 z" class="fill-primary"></path>
            </marker>
        </defs>
        <g data-gant-dependency-lines></g>
    </svg>
</div>
{% endif %}