{% block page_title %}{% firstof bw_page

element below. brickwork's CSS keeps it visually hidden until it takes focus; you do not need to style it. (An audit of five real apps found 0 of 5 had one. Keep it.) {% endcomment %} {% comment %} --------------------------------------------------------------------------- YOUR LAYOUT GOES HERE. --------------------------------------------------------------------------- This example ships the bare document only, so it suits any layout. For a full application chrome (sidebar, topbar, workspace) you have two options: 1. Extend the shipped shell instead of copying this file: {% templatetag openblock %} extends "brickwork/shell/app.html" {% templatetag closeblock %} and fill its blocks. You keep receiving shell improvements. 2. Keep this file and compose the chrome yourself from components. See the app/ examples beside this one for worked pages. LOAD-BEARING: whatever you put here, your main content element needs id="bw-main" (the skip link's target) and tabindex="-1" (so the skip link can actually move focus to it; without tabindex the browser moves the viewport but not the focus, and the next Tab returns to the top of the page). {% endcomment %}

{% block content %}{% endblock %}

{% block body_js %}{% endblock %} {% comment %} LOAD-BEARING (if you use toasts): the toast region. This is the stable live region AND the out-of-band swap target that server responses append to (hx-swap-oob="afterbegin:#bw-toast-region"). Its id is the contract: a server response naming that target has nowhere to land if this element is missing, and the swap silently does nothing. It renders nothing visible when empty, so there is no cost to keeping it. Move its position by setting bw_toast_position in context ("top-end" is the default; resolve it BEFORE the include, as here, so an undefined value never reaches the component as a string_if_invalid marker). {% endcomment %} {% firstof bw_toast_position 'top-end' as bw_toast_position_resolved %} {% include "brickwork/components/_toast_region.html" with placement=bw_toast_position_resolved %} {% comment %} LOAD-BEARING (if you use modals or slide-overs): these two empty divs. They look removable. They are not. They are the stable swap roots that server-rendered modal and slide-over fragments target. Both use display: contents, so an empty root occupies zero space and never shifts your layout. They are SEPARATE roots on purpose, so a slide-over and a modal can be open at the same time (a detail panel beside content, with a confirm dialog over it). Do not merge them into one. {% endcomment %}

{% comment %} DIAGNOSTIC ONLY, and only when DEBUG is on: warns in the console if this page contains brickwork interactive markup and Alpine is running but registerBrickworkComponents(Alpine) was never called, which otherwise renders as dead markup with no signal at all. Production ships no script (bw_debug is False), so this never affects the no-JS floor. Delete it if you prefer; you lose only the warning. If your dev CSP forbids un-nonced inline scripts, add your nonce to the {% endif %}