{# 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 %}
<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 — small, right-aligned, mode-aware. #}
            <div class="flex items-center justify-between gap-3">
                <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">
                        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">
                        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 %}
                {# Per-section responsive grid via CSS custom properties — see
                `.pv-form-grid` in static/tailwind.css. The section emits
                `--pv-cols` (used from `lg`) and `--pv-cols-md` (used from
                `md` to `<lg`, capped at min(cols, 2)). Cells emit
                `--cell-span` and the global rule clamps each span to the
                effective track count at the current breakpoint. #}
                {% set section_cols = section.cols or 2 %}
                {% set section_cols_md = section_cols if section_cols < 2 else 2 %}
                <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 %}
                    <div class="pv-form-grid"
                         style="--pv-cols: {{ section_cols }}; --pv-cols-md: {{ section_cols_md }};">
                        {% for cell in section.cells %}
                        {% set cell_span = cell.colspan or (section_cols if cell.wide else 1) %}
                        <div data-field="{{ cell.name }}"
                             {% if cell.error %}data-pv-field-error{% endif %}
                             class="flex flex-col gap-1.5 min-w-0
                                {% if cell.error %}pv-cell-error{% endif %}"
                             style="--cell-span: {{ cell_span }};">
                            <label class="block text-sm font-medium text-heading">
                                {{ cell.label }}
                                {% if mode in ("edit", "new") and cell.required %}
                                <span class="text-fg-danger ml-0.5" aria-hidden="true">*</span>
                                {% endif %}
                            </label>
                            <div class="text-sm text-body">{{ cell.html }}</div>
                            {% if cell.error %}
                            <p class="text-xs text-fg-danger flex items-center gap-1">
                                <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                    stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                                </svg>
                                {{ cell.error }}
                            </p>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                </fieldset>
                {% 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>