{% comment %}
Permission-filtered calendar dataview with day, week, month, year, and list modes.
{% endcomment %}
{% load bloomerp %}

<div
    class="flex h-full min-h-96 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xs"
    data-content-type-id="{{ content_type_id }}"
    data-view-mode="{{ view_mode|default:'week' }}"
    data-page-offset="{{ calendar_page_offset|default:0 }}"
    data-calendar-start-field-type="{{ start_field.field_type }}"
    data-calendar-end-field-type="{{ end_field.field_type|default:'' }}"
    data-calendar-update-url="{% url 'components_dataview_action' content_type_id=content_type_id action='dates' %}"
    bloomerp-component="calendar"
    tabindex="0"
>
    {% if not start_field %}
    <div class="flex flex-1 items-center justify-center p-8 text-light">
        <div class="text-center">
            <c-icons.calendar size="48" class="mx-auto mb-2 opacity-50" />
            <p class="mb-1 text-lg font-medium"><c-i18n.blocktrans>No date field selected</c-i18n.blocktrans></p>
            <p class="text-sm"><c-i18n.blocktrans>Select a start date field in the display options.</c-i18n.blocktrans></p>
        </div>
    </div>
    {% else %}
    <header class="flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 px-4 py-3">
        <div class="flex items-center gap-1">
            <button type="button" data-calendar-nav="prev" class="btn btn-sm border-gray-200 bg-white" title="Previous period">
                <c-icons.chevron_left size="16" />
            </button>
            <button type="button" data-calendar-nav="today" class="btn btn-sm border-gray-200 bg-white">
                <c-i18n.blocktrans>Today</c-i18n.blocktrans>
            </button>
            <button type="button" data-calendar-nav="next" class="btn btn-sm border-gray-200 bg-white" title="Next period">
                <c-icons.chevron_right size="16" />
            </button>
        </div>

        <p class="text-base font-semibold text-dark" data-calendar-range>
            {% if view_mode == 'day' %}
                {{ calendar_current_date|date:"l, F j, Y" }}
            {% elif view_mode == 'week' or view_mode == 'list' %}
                {{ calendar_date_range.start|date:"M j" }} – {{ calendar_date_range.end|date:"M j, Y" }}
            {% elif view_mode == 'year' %}
                {{ calendar_current_date|date:"Y" }}
            {% else %}
                {{ calendar_current_date|date:"F Y" }}
            {% endif %}
        </p>

        <div class="flex items-center gap-2">
            {% if calendar_legend %}
            <details class="relative">
                <summary class="btn btn-sm cursor-pointer list-none border-gray-200 bg-white">
                    <c-i18n.blocktrans>Legend</c-i18n.blocktrans>
                </summary>
                <div class="absolute right-0 z-30 mt-1 min-w-44 space-y-1 rounded-xl border border-gray-200 bg-white p-2 shadow-xs">
                    {% for legend_item in calendar_legend %}
                    <div class="flex items-center gap-2 text-xs text-dark">
                        <span class="h-3 w-3 rounded border {{ legend_item.color_classes }}"></span>
                        <span class="truncate">{{ legend_item.label }}</span>
                    </div>
                    {% endfor %}
                </div>
            </details>
            {% endif %}
            <select data-calendar-view-mode class="select select-sm border-gray-200 bg-white" aria-label="Calendar view mode">
                {% for mode_value, mode_label in calendar_view_modes %}
                <option value="{{ mode_value }}" {% if mode_value == view_mode %}selected{% endif %}>{{ mode_label }}</option>
                {% endfor %}
            </select>
        </div>
    </header>

    <div class="flex-1 overflow-auto" data-calendar-grid>
        {% if view_mode == 'month' %}
        <div class="grid min-w-[700px] grid-cols-7 border-b border-gray-200 bg-base">
            {% for day_name in "Mon,Tue,Wed,Thu,Fri,Sat,Sun"|make_list_by_comma %}
            <div class="py-2 text-center text-xs font-medium uppercase text-light">{{ day_name }}</div>
            {% endfor %}
        </div>
        <div class="min-w-[700px]">
            {% for week in calendar_weeks %}
            <div class="relative grid min-h-36 grid-cols-7 border-b border-gray-200">
                {% for day in week %}
                {% with unit_key=day.key %}
                <section
                    class="min-h-36 border-r border-gray-200 p-1 {% if not day.is_current_month %}bg-base{% endif %}"
                    style="grid-column: {{ forloop.counter }}; grid-row: 1;"
                    data-calendar-unit="{{ unit_key }}"
                    data-calendar-row="{{ forloop.parentloop.counter0 }}"
                    data-calendar-column="{{ forloop.counter0 }}"
                    data-calendar-unit-section
                    data-calendar-dropzone
                >
                    <button type="button" class="mb-1 w-full rounded-xl px-1 text-left text-sm {% if day.is_today %}bg-primary-100 font-bold text-primary{% endif %}" data-calendar-unit="{{ unit_key }}" data-calendar-unit-cell bloomerp-component="calendar-cell">
                        {{ day.date.day }}
                    </button>
                </section>
                {% endwith %}
                {% endfor %}
                {% with week_segments=calendar_month_segments_by_week|get_item:forloop.counter0 %}
                {% for event in week_segments %}
                <button
                    type="button"
                    class="calendar-event relative z-10 mx-1 block self-start overflow-hidden rounded-xl border px-2 py-1 text-left text-xs shadow-xs {{ event.color_classes }}"
                    style="grid-column: {{ event.start_column }} / span {{ event.span }}; grid-row: 1; margin-top: calc(2rem + {{ event.lane }} * 3.25rem);"
                    data-calendar-unit="{{ event.start_date|date:'Y-m-d' }}"
                    data-calendar-event
                    data-calendar-start="{{ event.start_ms }}"
                    data-calendar-end="{{ event.end_ms }}"
                    data-calendar-can-edit-start="{{ event.can_edit_start|yesno:'true,false' }}"
                    data-calendar-can-edit-end="{{ event.can_edit_end|yesno:'true,false' }}"
                    draggable="{{ event.can_move|yesno:'true,false' }}"
                    data-detail-url="{{ event.object.get_absolute_url }}"
                    data-object-id="{{ event.object.pk }}"
                    data-object-string="{{ event.object }}"
                    bloomerp-component="calendar-cell"
                >
                    {% if event.can_edit_start %}<span class="absolute inset-y-0 left-0 w-2 cursor-ew-resize" data-calendar-resize-start aria-hidden="true"></span>{% endif %}
                    {% if event.can_edit_end %}<span class="absolute inset-y-0 right-0 w-2 cursor-ew-resize" data-calendar-resize-end aria-hidden="true"></span>{% endif %}
                    <span class="block truncate font-medium">{{ event.object }}</span>
                    {% if fields %}
                    <span class="mt-0.5 block truncate opacity-75">
                        {% for field in fields %}
                            {% render_dataview_value object=event.object application_field=field user=request.user row_index=forloop.parentloop.counter0 column_index=forloop.counter0 url=event.object.get_absolute_url split_view_enabled=preference.split_view_enabled %}{% if not forloop.last %} · {% endif %}
                        {% endfor %}
                    </span>
                    {% endif %}
                </button>
                {% endfor %}
                {% endwith %}
            </div>
            {% endfor %}
        </div>

        {% elif view_mode == 'day' or view_mode == 'week' %}
        <div class="min-w-[760px]">
            <div class="sticky top-0 z-20 grid border-b border-gray-200 bg-white {% if view_mode == 'week' %}grid-cols-[4rem_repeat(7,minmax(6rem,1fr))]{% else %}grid-cols-[4rem_1fr]{% endif %}">
                <div></div>
                {% for day in calendar_days %}
                <div class="border-l border-gray-200 px-2 py-2 text-center text-sm {% if day == calendar_today %}font-bold text-primary{% endif %}">
                    {{ day|date:"D j" }}
                </div>
                {% endfor %}
            </div>
            <div class="relative grid border-b border-gray-200 bg-base {% if view_mode == 'week' %}min-h-16 grid-cols-[4rem_repeat(7,minmax(6rem,1fr))]{% else %}grid-cols-[4rem_1fr]{% endif %}">
                <div class="p-1 text-right text-xs text-light" {% if view_mode == 'week' %}style="grid-column: 1; grid-row: 1;"{% endif %}><c-i18n.blocktrans>All day</c-i18n.blocktrans></div>
                {% for day_unit in calendar_day_units %}
                {% with unit=calendar_events_by_unit|get_item:day_unit.key %}
                <section class="relative min-h-12 border-l border-gray-200 p-1" {% if view_mode == 'week' %}style="grid-column: {{ forloop.counter|add:1 }}; grid-row: 1;"{% endif %} data-calendar-unit="{{ day_unit.key }}" data-calendar-row="-1" data-calendar-column="{{ forloop.counter0 }}" data-calendar-unit-section data-calendar-dropzone>
                    <button type="button" class="sr-only" data-calendar-unit="{{ day_unit.key }}" data-calendar-unit-cell bloomerp-component="calendar-cell">{{ day_unit.date|date:"D j" }} all day</button>
                    {% if view_mode == 'day' %}
                    <div class="space-y-1" data-calendar-events>
                        {% include "components/objects/dataview_calendar_events.html" with events=unit.events calendar_unit=day_unit.key calendar_has_more=unit.has_more calendar_next_unit_offset=5 calendar_view_mode=view_mode %}
                    </div>
                    {% endif %}
                </section>
                {% endwith %}
                {% endfor %}
                {% if view_mode == 'week' %}
                {% for event in calendar_week_segments %}
                <button
                    type="button"
                    class="calendar-event relative z-10 mx-1 block self-start overflow-hidden rounded-xl border px-2 py-1 text-left text-xs shadow-xs {{ event.color_classes }}"
                    style="grid-column: {{ event.start_column|add:1 }} / span {{ event.span }}; grid-row: 1; margin-top: calc(0.25rem + {{ event.lane }} * 3.25rem);"
                    data-calendar-unit="{{ event.start_date|date:'Y-m-d' }}"
                    data-calendar-event
                    data-calendar-start="{{ event.start_ms }}"
                    data-calendar-end="{{ event.end_ms }}"
                    data-calendar-can-edit-start="{{ event.can_edit_start|yesno:'true,false' }}"
                    data-calendar-can-edit-end="{{ event.can_edit_end|yesno:'true,false' }}"
                    data-detail-url="{{ event.object.get_absolute_url }}"
                    data-object-id="{{ event.object.pk }}"
                    data-object-string="{{ event.object }}"
                    draggable="{{ event.can_move|yesno:'true,false' }}"
                    bloomerp-component="calendar-cell"
                >
                    {% if event.can_edit_start %}<span class="absolute inset-y-0 left-0 w-2 cursor-ew-resize" data-calendar-resize-start aria-hidden="true"></span>{% endif %}
                    {% if event.can_edit_end %}<span class="absolute inset-y-0 right-0 w-2 cursor-ew-resize" data-calendar-resize-end aria-hidden="true"></span>{% endif %}
                    <span class="block truncate font-medium">{{ event.object }}</span>
                    {% if fields %}
                    <span class="mt-0.5 block truncate opacity-75">
                        {% for field in fields %}
                            {% render_dataview_value object=event.object application_field=field user=request.user row_index=forloop.parentloop.counter0 column_index=forloop.counter0 url=event.object.get_absolute_url split_view_enabled=preference.split_view_enabled %}{% if not forloop.last %} · {% endif %}
                        {% endfor %}
                    </span>
                    {% endif %}
                </button>
                {% endfor %}
                {% endif %}
            </div>
            <div class="grid {% if view_mode == 'week' %}grid-cols-[4rem_repeat(7,minmax(6rem,1fr))]{% else %}grid-cols-[4rem_1fr]{% endif %}">
                <div>
                    {% for hour in calendar_hours %}<div class="h-20 pr-2 pt-1 text-right text-xs text-light">{{ hour|stringformat:"02d" }}:00</div>{% endfor %}
                </div>
                {% for day_column in calendar_day_columns %}
                <div class="border-l border-gray-200">
                    {% for hour_unit in day_column.hours %}
                    {% with unit_key=hour_unit.key %}
                    {% with unit=calendar_events_by_unit|get_item:unit_key %}
                    <section class="relative h-20 overflow-visible border-b border-gray-200 p-1" data-calendar-unit="{{ unit_key }}" data-calendar-row="{{ forloop.counter0 }}" data-calendar-column="{{ forloop.parentloop.counter0 }}" data-calendar-unit-section data-calendar-dropzone>
                        <button type="button" class="sr-only" data-calendar-unit="{{ unit_key }}" data-calendar-unit-cell bloomerp-component="calendar-cell">{{ day_column.date|date:"D j" }} {{ hour_unit.hour }}:00</button>
                        <div class="space-y-1" data-calendar-events>
                            {% include "components/objects/dataview_calendar_events.html" with events=unit.events calendar_unit=unit_key calendar_has_more=unit.has_more calendar_next_unit_offset=5 calendar_view_mode=view_mode %}
                        </div>
                    </section>
                    {% endwith %}
                    {% endwith %}
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
        </div>

        {% elif view_mode == 'year' %}
        <div class="grid grid-cols-1 gap-3 p-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {% for month in calendar_months %}
            {% with unit_key=month.key %}
            {% with unit=calendar_events_by_unit|get_item:unit_key %}
            <section class="min-h-36 rounded-xl border border-gray-200 p-2 shadow-xs" data-calendar-unit="{{ unit_key }}" data-calendar-row="{{ forloop.counter0 }}" data-calendar-column="0" data-calendar-unit-section data-calendar-dropzone>
                <button type="button" class="mb-2 w-full text-left font-semibold text-dark" data-calendar-unit="{{ unit_key }}" data-calendar-unit-cell bloomerp-component="calendar-cell">{{ month.date|date:"F" }}</button>
                <div class="space-y-1" data-calendar-events>
                    {% include "components/objects/dataview_calendar_events.html" with events=unit.events calendar_unit=unit_key calendar_has_more=unit.has_more calendar_next_unit_offset=5 calendar_view_mode=view_mode %}
                </div>
            </section>
            {% endwith %}
            {% endwith %}
            {% endfor %}
        </div>

        {% else %}
        {% if calendar_events_by_unit %}
        <div class="divide-y divide-gray-200">
            {% for day in calendar_day_units %}
            {% with unit_key=day.key %}
            {% with unit=calendar_events_by_unit|get_item:unit_key %}
            {% if unit.events %}
            <section class="grid gap-2 p-3 sm:grid-cols-[10rem_1fr]" data-calendar-unit="{{ unit_key }}" data-calendar-row="{{ forloop.counter0 }}" data-calendar-column="0" data-calendar-unit-section data-calendar-dropzone>
                <button type="button" class="text-left text-sm font-semibold text-dark" data-calendar-unit="{{ unit_key }}" data-calendar-unit-cell bloomerp-component="calendar-cell">{{ day.date|date:"D, M j" }}</button>
                <div class="space-y-1" data-calendar-events>
                    {% include "components/objects/dataview_calendar_events.html" with events=unit.events calendar_unit=unit_key calendar_has_more=unit.has_more calendar_next_unit_offset=5 calendar_view_mode=view_mode %}
                </div>
            </section>
            {% endif %}
            {% endwith %}
            {% endwith %}
            {% endfor %}
        </div>
        {% else %}
        <p class="p-8 text-center text-light"><c-i18n.blocktrans>No calendar items in this period.</c-i18n.blocktrans></p>
        {% endif %}
        {% endif %}
    </div>
    {% if calendar_unscheduled_events %}
    <div class="border-t border-gray-200 bg-base p-3" data-calendar-unscheduled-tray>
        <p class="mb-2 text-xs font-medium uppercase text-light"><c-i18n.blocktrans>Unscheduled</c-i18n.blocktrans></p>
        <div class="flex flex-wrap gap-2">
            {% for event in calendar_unscheduled_events %}
            <div
                class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm shadow-xs {% if event.can_edit_start and event.can_edit_end %}cursor-grab{% else %}cursor-not-allowed opacity-60{% endif %}"
                data-calendar-unscheduled-event
                data-object-id="{{ event.object.pk }}"
                data-calendar-can-edit-start="{{ event.can_edit_start|yesno:'true,false' }}"
                data-calendar-can-edit-end="{{ event.can_edit_end|yesno:'true,false' }}"
                draggable="{% if event.can_edit_start and event.can_edit_end %}true{% else %}false{% endif %}"
            >{{ event.object }}</div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    {% endif %}
</div>