{% load bloomerp %}

<div 
    bloomerp-component="dataview-display-options"
    data-content-type-id="{{ content_type_id }}"
    data-preference-id="{{ preference.id }}"
    data-preference-url="{% url 'components_update_dataview_preference' content_type_id=content_type_id %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}"
    data-view-type="{{ preference.view_type }}"
    data-split-view-enabled="{{ preference.split_view_enabled }}"
    class="max-h-[60vh] overflow-y-auto"
>
    <!-- View Switcher -->
    <div class="bg-base p-2 rounded-xl flex mb-4 overflow-x-scroll no-scrollbar gap-2">
        {% for view_type in view_types %}
        <button
            type="button"
            data-display-options-submit
            data-display-options-values='{"view_type": "{{ view_type.key }}"}'
            class="flex-none w-auto max-w-none whitespace-nowrap flex items-center justify-center gap-2 py-1.5 px-3 rounded-md shadow text-sm font-medium {% if preference.view_type == view_type.key %}bg-white text-light ring-1 ring-primary-500{% else %}text-light hover:text-gray-700 hover:bg-gray-50{% endif %}">
            <i class="{{ view_type.icon }} text-sm text-primary"></i>
            {{ view_type.label }}
        </button>
        {% endfor %}
    </div>


    <div class="space-y-3 mb-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2 text-sm text-gray-600">
                <span>Split view</span>
            </div>
            <button 
                type="button"
                class="relative inline-flex w-40 justify-center px-2 py-1 rounded-xl transition-all duration-200 {% if preference.split_view_enabled %}bg-primary-100 text-primary-600 ring-1 ring-primary-500{% else %}bg-base text-light hover:bg-gray-200 hover:text-gray-700{% endif %}"
                data-display-options-submit
                data-display-options-values='{"split_view_enabled": "{% if preference.split_view_enabled %}false{% else %}true{% endif %}"}'
                title="{% if preference.split_view_enabled %}Disable split view{% else %}Enable split view{% endif %}"
            >
                {% if preference.split_view_enabled %}
                <c-icons.sidebar_right_selected size="16"/>
                {% else %}
                <c-icons.sidebar_right size="16"/>
                {% endif %}
            </button>
        </div>


        {% if dataview_options_form %}
        <form
            class="space-y-3"
            data-display-options-form
            data-display-options-values='{"dataview_options_view_type": "{{ preference.view_type }}"}'
        >
            <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
            {% for field in dataview_options_form.visible_fields %}
            <div class="space-y-1">
                <div class="{% if field.name == 'custom_groupings' or field.name == 'lane_colouring' %}space-y-2{% else %}flex items-center justify-between gap-3{% endif %}">
                    <div class="text-sm text-gray-600 shrink-0">
                        <span>{{ field.label }}</span>
                    </div>
                    {{ field }}
                </div>
                {% if field.help_text %}<p class="text-xs text-gray-500">{{ field.help_text }}</p>{% endif %}
                <span class="hidden">{{ field.errors }}</span>
            </div>
            {% endfor %}
        </form>
        {% endif %}
    </div>


    {% if preference.should_display_field_options %}
    <hr class="border-gray-200 my-4">

    <!-- Field Visibility Options -->
    <div class="mb-4">
        <h3 class="text-sm font-medium text-gray-900 mb-2">Visible fields</h3>
        <p class="text-xs text-light mb-3">Click to toggle visibility. Drag the handles to reorder visible fields.</p>
        
        <div class="flex flex-wrap gap-2" data-field-order-list>
            {% for field, is_visible in fields.ordered_fields %}
            <button 
                type="button"
                data-display-options-submit
                data-display-options-values='{"toggle_field_id": "{{ field.id }}", "toggle_view_type": "{{ preference.view_type }}"}'
                data-field-id="{{ field.id }}"
                data-field-visible="{{ is_visible|yesno:'true,false' }}"
                aria-pressed="{{ is_visible|yesno:'true,false' }}"
                class="px-3 py-1 text-xs border rounded-md transition-colors {% if is_visible %}bg-primary-100 border-primary-500 text-primary-700 hover:bg-primary-200{% else %}border-base bg-white text-gray-700 hover:bg-base{% endif %}"
            >
                {% if is_visible %}
                <span class="inline-flex items-center gap-1">
                    <span data-field-drag-handle class="cursor-grab active:cursor-grabbing" title="Drag to reorder {{ field.title }}" aria-label="Drag to reorder {{ field.title }}"><svg class="w-3 h-3" viewBox="0 0 12 16" fill="currentColor" aria-hidden="true"><circle cx="3" cy="3" r="1.5"/><circle cx="9" cy="3" r="1.5"/><circle cx="3" cy="8" r="1.5"/><circle cx="9" cy="8" r="1.5"/><circle cx="3" cy="13" r="1.5"/><circle cx="9" cy="13" r="1.5"/></svg></span>
                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                    {{ field.title }}
                </span>
                {% else %}
                {{ field.title }}
                {% endif %}
            </button>
            {% endfor %}
        </div>
    </div>
    
    {% endif %}

</div>