{# Form body, swappable as a unit. Rendered both as the whole document
(via form.html) and as the HTMX swap target on Save/Cancel/Edit.

The layout's heading region owns the title / breadcrumb / subtitle;
this body only carries the action buttons (which must move with the
swap because they change between display/edit modes). #}
{% set base = "/web/views/" ~ view.module ~ "/" ~ view.name %}
{% set nav_qs = ('?' ~ list_nav_query) if list_nav_query else '' %}
{% set rec_url = base ~ "/record/" ~ (record_id if record_id else 'new') ~ nav_qs %}
{% set rec_edit_url = base ~ "/record/" ~ record_id ~ "/edit" ~ nav_qs if record_id else '' %}
{% set show_activity = (
mode == 'display'
and record_id
and (
(workflow_context and workflow_context.has_workflow)
or (chatter_context and chatter_context.enabled)
)
) %}
{% set split_layout = show_activity and not body_only %}
{% set stack_activity = show_activity and body_only %}

{# HTMX body swap: keep prev/next in the layout heading (top-right). #}
{% if body_only and record_pager and not in_dialog %}
<div id="pv-page-actions" hx-swap-oob="true" class="flex flex-wrap items-center justify-end gap-2">
    {% include "_record_pager.html" %}
</div>
{% endif %}

<div class="mx-auto space-y-6 {% if split_layout %}max-w-full{% else %}max-w-5xl{% endif %}">
    {% if split_layout %}
    <style>
        /* Main column left (wider), activity aside right. Plain CSS avoids Tailwind
       arbitrary grid parsing issues and CSS order reversing grid placement. */
        .pv-form-split {
            display: grid;
            gap: 1.5rem;
            align-items: start;
            grid-template-columns: minmax(0, 1fr);
        }

        @media (min-width: 1024px) {
            .pv-form-split {
                gap: 2rem;
                grid-template-columns: minmax(0, 1fr) min(22rem, 32vw);
            }
        }

        .pv-form-split__main {
            min-width: 0;
        }

        .pv-form-split__aside {
            min-width: 0;
        }
    </style>
    <div class="pv-form-split">
        <div class="pv-form-split__main space-y-6">
            {% endif %}

            {# Action toolbar — sticky while scrolling long forms (Filament-style). #}
            <div class="pv-form-actions-bar flex items-center justify-between gap-3
                        sticky top-0 z-20 -mx-1 px-1 py-2 mb-2
                        bg-neutral-primary/95 backdrop-blur-sm border-b border-default/80">
                <span class="inline-flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider
                     px-2 py-0.5 rounded-full
                     {% if mode == 'edit' %}bg-warning-soft text-warning-strong
                     {% elif mode == 'new' %}bg-success-soft text-success-strong
                     {% else %}bg-neutral-tertiary text-body-subtle{% endif %}">
                    {{ mode }}
                </span>
                <div class="flex items-center gap-2">
                    {% if mode in ("display", "edit") and record_id %}
                    {% for act in header_actions or [] %}
                    {% if act.full_page or (act.method == 'GET' and not act.url.startswith(base)) %}
                    <a href="{{ act.url }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium
                      border border-default text-body rounded-md hover:bg-neutral-secondary transition">
                        {{ act.label }}
                    </a>
                    {% else %}
                    <button type="button" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium
                           border border-default text-body rounded-md hover:bg-neutral-secondary transition" hx-{{
                        act.method | lower }}="{{ act.url }}" {% if act.confirm %}hx-confirm="{{ act.confirm }}" {%
                        endif %} {% if mode == "edit" %}hx-include="closest [data-pv-form-shell]" {% endif %}
                        hx-target="closest [data-pv-form-shell]" hx-swap="innerHTML">
                        {{ act.label }}
                    </button>
                    {% endif %}
                    {% endfor %}
                    {% endif %}
                    {% if mode == "display" and record_id %}
                    {% if access.can_write %}
                    <button 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" hx-get="{{ rec_edit_url }}"
                        hx-target="closest [data-pv-form-shell]" hx-swap="innerHTML">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z" />
                        </svg>
                        Edit
                    </button>
                    {% endif %}
                    {% if access.can_unlink %}
                    <button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm border border-default
                           text-fg-danger rounded-md hover:bg-danger-soft transition"
                        hx-delete="/api/records/{{ record_id }}?model={{ view.model }}" hx-confirm="Delete this record?"
                        hx-on::after-request="if(event.detail.successful) window.history.back()" data-pv-hide-in-dialog>
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                        </svg>
                        Delete
                    </button>
                    {% endif %}
                    {% elif mode == "edit" and access.can_write %}
                    <button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white
                           rounded-md bg-success hover:opacity-90 transition" hx-post="{{ rec_url }}"
                        hx-include="closest [data-pv-form-shell]" hx-target="closest [data-pv-form-shell]"
                        hx-swap="innerHTML"
                        data-pv-form-save title="Save (Ctrl+S)">
                        Save
                    </button>
                    <button class="px-3 py-1.5 text-sm border border-default bg-neutral-primary text-body
                           rounded-md hover:bg-neutral-secondary transition" hx-get="{{ rec_url }}"
                        hx-target="closest [data-pv-form-shell]" hx-swap="innerHTML" data-pv-hide-in-dialog>
                        Cancel
                    </button>
                    {% elif mode == "new" and access.can_create %}
                    <button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white
                           rounded-md bg-success hover:opacity-90 transition" hx-post="{{ base }}"
                        hx-include="closest [data-pv-form-shell]" hx-target="closest [data-pv-form-shell]"
                        hx-swap="innerHTML"
                        data-pv-form-save title="Create (Ctrl+S)">
                        Create
                    </button>
                    <button type="button" class="px-3 py-1.5 text-sm border border-default bg-neutral-primary text-body
                           rounded-md hover:bg-neutral-secondary transition" onclick="window.history.back()"
                        data-pv-hide-in-dialog>
                        Cancel
                    </button>
                    {% endif %}
                </div>
            </div>

            {# Whole-form error banner — e.g. an ORM-level rejection during
            write/create (unique constraint, downstream DB error). Per-field
            errors get rendered next to the offending input below. #}
            {% if form_error %}
            <div data-pv-form-error
                class="px-4 py-3 rounded-lg bg-danger-soft border border-fg-danger/30 text-fg-danger text-sm">
                <p class="font-semibold">Could not save:</p>
                <p>{{ form_error }}</p>
            </div>
            {% endif %}

            {# `data-pv-autosave` opts this form into the layout-level
            autosave/navigation interceptor: editing inputs marks the form
            dirty, and any subsequent link click triggers a POST to the
            declared URL before letting the browser follow the link. The
            attribute is absent in display mode so navigation stays cheap. #}
            <form id="pyvelm-form" class="space-y-6" onsubmit="return false" {% if mode in ("edit", "new" ) %}
                data-pv-autosave="{{ rec_url if mode == 'edit' else base }}" data-pv-autosave-method="POST" {% endif %}>
                {% for section in sections %}
                {% if section.kind == 'notebook' %}
                {% set default_tab = section.pages[0].name if section.pages else '' %}
                {# Single-quoted Alpine attrs: tojson emits double-quoted strings. #}
                {% set page_names = section.pages | map(attribute='name') | list %}
                <fieldset class="bg-neutral-primary border border-default rounded-xl p-6 shadow-sm"
                          x-data='pvFormNotebook({{ section.storage_key | tojson }}, {{ default_tab | tojson }}, {{ page_names | tojson }})'>
                    {% if section.title %}
                    <legend class="px-2 text-xs font-semibold uppercase tracking-wider text-body-subtle">
                        {{ section.title }}
                    </legend>
                    {% endif %}
                    <div class="mb-4 border-b border-default"
                         aria-label="{{ section.title or section.name }}">
                        <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" role="tablist">
                            {% for page in section.pages %}
                            <li class="{% if not loop.last %}me-2{% endif %}" role="presentation">
                                <button type="button"
                                        role="tab"
                                        :id='"tab-" + {{ page.name | tojson }}'
                                        :aria-controls='"panel-" + {{ page.name | tojson }}'
                                        :aria-selected='tab === {{ page.name | tojson }}'
                                        @click='pick({{ page.name | tojson }})'
                                        class="inline-block p-4 border-b-2 rounded-t-base transition-colors"
                                        :class='tab === {{ page.name | tojson }} ? "text-fg-brand border-brand" : "border-transparent text-body hover:text-fg-brand hover:border-brand"'>
                                    {{ page.title }}
                                </button>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% for page in section.pages %}
                    <div role="tabpanel"
                         :id='"panel-" + {{ page.name | tojson }}'
                         :aria-labelledby='"tab-" + {{ page.name | tojson }}'
                         x-show='tab === {{ page.name | tojson }}'
                         class="pt-2">
                        {% with cells=page.cells, cols=page.cols %}
                        {% include "_form_field_grid.html" %}
                        {% endwith %}
                    </div>
                    {% endfor %}
                </fieldset>
                {% else %}
                <fieldset class="bg-neutral-primary border border-default rounded-xl p-6 shadow-sm">
                    {% if section.title %}
                    <legend class="px-2 text-xs font-semibold uppercase tracking-wider text-body-subtle">
                        {{ section.title }}
                    </legend>
                    {% endif %}
                    {% with cells=section.cells, cols=section.cols %}
                    {% include "_form_field_grid.html" %}
                    {% endwith %}
                </fieldset>
                {% endif %}
                {% endfor %}
            </form>

            {% if split_layout %}
        </div>
        <div class="pv-form-split__aside">
            {% include "_form_activity_aside.html" %}
        </div>
    </div>
    {% elif stack_activity %}
    {% include "_form_activity_aside.html" %}
    {% endif %}
</div>