{% extends "layouts/main.html" %}
{% block title %}{{ page_title }}{% include "layouts/_app_title_suffix.html" %}{% endblock %}
{% block page_title %}{{ page_title }}{% endblock %}

{% block page_actions %}
{% for act in page_actions or [] %}
{% if act.kind != 'menu' %}
{% include "_view_action_button.html" %}
{% endif %}
{% endfor %}
{% if access.can_create and (create_href or form_view_name) %}
{% if create_href %}
<a href="{{ create_href }}"
   class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white
          rounded-md bg-fg-brand hover:opacity-90 transition-opacity">
{% else %}
<a href="/web/views/{{ view.module }}/{{ form_view_name }}/new"
   class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white
          rounded-md bg-fg-brand hover:opacity-90 transition-opacity">
{% endif %}
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
    </svg>
    New
</a>
{% endif %}
{% for act in page_actions or [] %}
{% if act.kind == 'menu' %}
{% include "_view_action_menu.html" %}
{% endif %}
{% endfor %}
{% endblock %}

{# ── Main content ── #}
{% block content %}
<script>
    window._pvListCfg = {
        module: {{ view.module | tojson }},
        name: {{ view.name | tojson }},
        search: {{ search | tojson }},
        order: {{ order | tojson }},
        filters: {{ filters | tojson }},
        groupBy: {{ group_by | tojson }},
        page: {{ page }},
        pageSize: {{ page_size }},
        fieldNames: {{ headers | map(attribute='name') | list | tojson }},
        // Filter / group-by metadata per column — drives the dropdown
        // UI. Each entry: {name, label, filter_kind, group_kind, comodel}.
        headers: {{ headers | tojson }},
        // Set when the arch declared `sequence` — turns on the drag
        // handle column + row-reorder POST. null = feature disabled.
        sequenceField: {{ sequence_field | tojson }},
        swapTarget: '#pv-table-container',
        showColumns: true,
        bc: {{ bc_param | tojson }},
        bulkEnabled: {{ bulk_enabled | default(false) | tojson }},
        bulkActions: {{ bulk_actions | default([]) | tojson }},
    };
</script>
<div x-data="pvList(window._pvListCfg)"
     class="space-y-3">

    {% if view_switcher %}
    {% include "_view_switcher.html" %}
    {% endif %}

    {% include "_pv_search_toolbar.html" %}

    {% if bulk_enabled %}
    <div x-show="selectedCount > 0" x-cloak
         class="flex flex-wrap items-center gap-3 px-3 py-2 rounded-lg
                bg-brand-soft border border-default text-sm">
        <span class="font-medium text-heading"
              x-text="selectedCount + ' selected'"></span>
        <template x-for="act in bulkActions" :key="act.action">
            <button type="button"
                    class="px-3 py-1 text-xs font-semibold rounded-md
                           border border-default bg-neutral-primary
                           hover:bg-neutral-secondary transition"
                    @click="runBulk(act)"
                    x-text="act.label"></button>
        </template>
    </div>
    {% endif %}

    {# Group-by chip (rendered separately from search chips because the
       grouping is a single-value mode rather than an AND-leaf). #}
    <div x-show="groupBy" x-cloak class="flex items-center gap-1.5">
        <span class="text-2xs text-body-subtle uppercase tracking-wider">Grouped by</span>
        <span class="inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded
                     bg-warning-soft text-warning-strong text-xs font-medium">
            <span x-text="groupByLabel()"></span>
            <button @click="setGroupBy(null)" type="button"
                    aria-label="Remove grouping"
                    class="ml-0.5 p-0.5 rounded hover:bg-warning-strong/20 transition-colors">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </span>
    </div>

    {# ── Table + Pagination — HTMX swap target #}
    <div id="pv-table-container">
        {% include "list_table.html" %}
    </div>

</div>

{% include "_pv_list_alpine.html" %}
{% endblock %}