{% load bloomerp %}

<!-- View Switcher -->
<div class="bg-base p-2 rounded-lg flex mb-4 overflow-x-scroll no-scrollbar gap-2">
    {% for view_type in view_types %}
    <button
        hx-post="{% url 'components_change_data_view_preference' content_type_id=content_type_id %}"
        hx-vals='{"view_type": "{{ view_type.value }}", "csrfmiddlewaretoken": "{{ csrf_token }}"}'
        hx-target="#data-view-{{ content_type_id }}"
        hx-swap="outerHTML"
        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.value %}bg-white text-light ring-1 ring-primary-500{% else %}text-light hover:text-gray-700 hover:bg-gray-50{% endif %}">
        {% get_icon name=view_type.icon size="16" %}
        {{ 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 
            class="relative inline-flex w-40 justify-center px-2 py-1 rounded-lg 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 %}"
            hx-post="{% url 'components_change_data_view_preference' content_type_id=content_type_id %}"
            hx-vals='{"split_view_enabled": "{% if preference.split_view_enabled %}false{% else %}true{% endif %}", "csrfmiddlewaretoken": "{{ csrf_token }}"}'
            hx-target="#data-view-{{ content_type_id }}"
            hx-swap="outerHTML"
            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 preference.view_type == 'table' %}
    <c-ui.data_view.options.select label="Grouping" icon="lines_horizontal" icon_size="16" input_name="table_group_by">
        <option value="no_grouping">No grouping</option>
        {% for field in fields.visible_fields %}
        <option value="{{ field.field }}">{{ field.title }}</option>
        {% endfor %}
    </c-ui.data_view.options.select>
    
    <c-ui.data_view.options.select label="Page size" input_name="page_size" content_type_id="{{ content_type_id }}" icon="lines_horizontal" icon_size="16">
        {% for page_size in page_sizes %}
        <option value="{{ page_size.value }}" {% if preference.page_size == page_size.value %}selected{% endif %}>{{ page_size.label }}</option>
        {% endfor %}
    </c-ui.data_view.options.select>

    {% elif preference.view_type == 'kanban' %}
    <c-ui.data_view.options.select label="Group by" icon="lines_horizontal" icon_size="16" input_name="kanban_group_by">
        <option value="no_grouping">No grouping</option>
        {% for field, is_visible in fields.accessible_fields %}
        <option value="{{ field.id }}"
            {% if preference.kanban_group_by_field_id == field.id %}selected{% endif %}
        >{{ field.title }}</option>
        {% endfor %}
    </c-ui.data_view.options.select>
    {% elif preference.view_type == 'calendar' %}
    <c-ui.data_view.options.select label="Date field" icon="calendar" icon_size="16" input_name="calendar_start_field">
        <option value="">Select a date field</option>
        {% for field, is_visible in fields.accessible_fields %}
        {% if field.field_type == "DateField" or field.field_type == "DateTimeField" %}
        <option value="{{ field.id }}"
            {% if preference.calendar_start_field_id == field.id %}selected{% endif %}
        >{{ field.title }}</option>
        {% endif %}
        {% endfor %}
    </c-ui.data_view.options.select>
    
    <c-ui.data_view.options.select label="View mode" icon="calendar" icon_size="16" input_name="calendar_view_mode">
        {% for view_mode in calendar_view_modes %}
        <option value="{{ view_mode.value }}"
            {% if preference.calendar_view_mode == view_mode.value %}selected{% endif %}
        >{{ view_mode.label }}</option>
        {% endfor %}
    </c-ui.data_view.options.select>
    {% endif %}
</div>


<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 field visibility for the current view.</p>
    
    <div class="flex flex-wrap gap-2">
        {% for field, is_visible in fields.accessible_fields %}
        <button 
            hx-post="{% url 'components_change_data_view_preference' content_type_id=content_type_id %}"
            hx-vals='{"toggle_field_id": "{{ field.id }}", "toggle_view_type": "{{ preference.view_type }}", "csrfmiddlewaretoken": "{{ csrf_token }}"}'
            hx-target="#data-view-data-section"
            hx-swap="outerHTML"
            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>