{% 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_change_data_view_preference' content_type_id=content_type_id %}"
    data-view-type="{{ preference.view_type }}"
    data-split-view-enabled="{{ preference.split_view_enabled }}"
>
    <!-- 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-1 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="flex items-center justify-between">
                <div class="flex items-center gap-2 text-sm text-gray-600">
                    {% get_icon name="lines_horizontal" size="16" %}
                    <span>{{ field.label }}</span>
                </div>
                {{ field }}
                <span class="hidden">
                    {{ field.errors }}
                </span>
            </div>
            {% endfor %}
        </form>
        {% endif %}
    </div>


    <hr class="border-gray-200 my-4">

    <!--Filters-->
    <div class="mb-4">
        <h3 class="text-sm font-medium text-gray-900 mb-2">Default filters</h3>
        <div id="default-filters-{{ content_type_id }}">
            
        </div>
    </div>

    <!-- 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 field visibility for the current view.</p>
        
        <div class="flex flex-wrap gap-2">
            {% for field, is_visible in fields.accessible_fields %}
            <button 
                type="button"
                data-display-options-submit
                data-display-options-values='{"toggle_field_id": "{{ field.id }}", "toggle_view_type": "{{ preference.view_type }}"}'
                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">
                    <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>

</div>