{% comment %}
kanban

A kanban view for displaying records from a queryset in a kanban board format.
Supports drag-and-drop functionality for moving items between columns.

Parameters:
- content_type_id (int): The content type ID for the model being displayed.
- queryset (QuerySet): The Django queryset containing the records to be displayed.
- fields (list): The list of fields to display on each card.
- avatar_field (ApplicationField): The selected avatar field, when visible.
- preference (UserListViewPreference): The user's view preferences.
- kanban_groups (list): List of groups with 'value', 'label', 'items', 'count' keys.
- group_by_field (ApplicationField): The field used for grouping.

TODO: This and dataview_kanban_cards need to be merged
{% endcomment %}

{% load bloomerp %}

<c-features.dataviews.base_data_view 
    component_name="kanban-board"
    content_type_id="{{ content_type_id }}"
    id="kanban-board-{{ content_type_id }}"
    query_count="{{ count }}"
    class="kanban-board flex h-full min-h-[400px] w-full min-w-0 max-w-full gap-4 overflow-x-auto pb-4 focus:outline-none focus:border-0 focus:ring-0"
    :component_args="component_args"
>
    {% if kanban_too_many_groups %}
        <div class="flex-1 flex items-center justify-center text-gray-500">
            <p class="text-sm"><c-i18n.blocktrans>This field has more than 50 values. Choose another grouping field.</c-i18n.blocktrans></p>
        </div>
    {% elif kanban_groups %}
        {% for group in kanban_groups %}
        <div 
            class="kanban-column flex-shrink-0 w-72 bg-base rounded-xl border border-gray-200 flex flex-col max-h-full"
            data-column-value="{{ group.request_value }}"
            data-kanban-total-count="{{ group.count }}"
        >
            <!-- Column Header -->
            <div class="kanban-column-header p-3 border-b border-gray-200 bg-base rounded-t-lg" {% if group.colour %}style="background-color: {{ group.colour }}; color: {{ group.foreground }}"{% endif %}>
                <div class="flex items-center justify-between">
                    <h3 class="font-medium{% if not group.colour %} text-gray-900{% endif %} text-sm truncate" title="{{ group.label }}">
                        {{ group.label }}
                    </h3>
                    <span class="text-xs text-gray-500 bg-gray-200 px-2 py-0.5 rounded-full" data-kanban-count>
                        {{ group.count }}
                    </span>
                </div>
            </div>
            
            <!-- Column Body (Drop Zone) -->
            <div
                class="kanban-column-body relative flex-1 p-2 space-y-2 overflow-y-auto min-h-[100px]"
                data-kanban-dropzone
                data-column-value="{{ group.destination_value }}"
            >
                {% include "components/objects/dataview_kanban_cards.html" %}
                <div class="kanban-destinations absolute inset-0 z-10 flex-col overflow-hidden rounded-b-xl" aria-hidden="true">
                    {% for destination in group.destinations %}
                    <div data-kanban-dropzone data-kanban-target data-column-value="{{ destination.value }}" class="kanban-category flex flex-1 min-h-0 items-center justify-center border border-gray-200 p-3 text-sm text-center" {% if destination.colour %}style="--kanban-category-colour: {{ destination.colour }}"{% endif %}>
                        <span class="rounded px-2 py-1 bg-white">{{ destination.label }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <!-- No grouping selected state -->
        <div class="flex-1 flex items-center justify-center text-gray-400">
            <div class="text-center">
                <c-icons.kanban size="48" class="mx-auto mb-2 opacity-50"/>
                <p class="text-lg font-medium mb-1">No grouping selected</p>
                <p class="text-sm">Select a field to group by in the display options</p>
            </div>
        </div>
    {% endif %}
</c-features.dataviews.base_data_view>
<p class="kanban-move-help text-xs text-gray-500" role="status">Use arrow keys to choose a category, Enter to move, or Escape to cancel.</p>

<style>
/* Kanban specific styles */
.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.kanban-card.drag-preview {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.9;
    transform: rotate(3deg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
</style>

<style>
.kanban-destinations { display: none; }
.kanban-board .kanban-column-body > .kanban-destinations { margin: 0; }
.kanban-board.kanban-moving .kanban-destinations { display: flex; }
.kanban-category { background: color-mix(in srgb, var(--kanban-category-colour, #f3f4f6) 18%, white); }
.kanban-category.kanban-drag-over, .kanban-category.keyboard-target { background: color-mix(in srgb, var(--kanban-category-colour, #dbeafe) 35%, white); }
.kanban-card.dragging { position: relative; z-index: 20; }
.kanban-board.kanban-moving .kanban-column-body { overflow: hidden; }
.kanban-move-help { display: none; }
.kanban-board.kanban-keyboard-moving + .kanban-move-help { display: block; }
</style>