Detail

{% extends "brickwork/shell/app.html" %}
{% comment %}
A detail page: the record's facts, related sections, and a danger zone.

COPY THIS FILE into your project and edit it. It is not on the template loader
path, so you cannot extend it (ADR-056).

What your view must supply:
    invoice        the record being shown
    invoice_facts  its facts as [{label, value}] for the definition table
    nav_items / nav_active  as in list.html

States: the related-records table's own loading/empty/row-link states
  (see _data_table.html's own header); the danger-zone alert is always
  rendered, never conditionally hidden.
Accessibility: inherits shell/app.html's skip link, sidebar/drawer nav and
  breadcrumbs region; the definition table's rows are <th scope="row">
  facts, not a fake two-column grid, so a screen reader announces each
  fact's own label. Covered by the archetype harness's full gate sweep
  (render, axe WCAG 2.2 AA, no horizontal overflow, light/dark
  distinctness, skip-link first-tab-stop with JS disabled) at every W0.1
  breakpoint, both themes.
Responsive: no breakpoint switch of its own; inherits shell/app.html's
  sidebar-to-drawer collapse at --bw-breakpoint-md (48rem). Both composed
  data tables carry unconditional horizontal scroll (responsive="scroll",
  the default) at every width.
{% endcomment %}
{% load brickwork_components brickwork_nav %}

{% block page_title %}Invoice INV-2417 - Northwind{% endblock %}

{% block sidebar %}{% bw_nav nav_items nav_active %}{% endblock %}
{% block sidebar_mobile %}{% bw_nav nav_items nav_active %}{% endblock %}
{% block brand_wordmark %}Northwind{% endblock %}

{% comment %}
Breadcrumbs are a list of {label, url} dicts, last item current. Build them in
the view or a context processor; hard-coded here so the example reads.
{% endcomment %}
{% block breadcrumbs %}
  {% include "brickwork/components/_breadcrumbs.html" with crumbs=breadcrumb_items %}
{% endblock %}

{% block page_header %}
  {% include "brickwork/components/_page_header.html" with title="Invoice INV-2417" description="Raised 14 July 2026 against Acme Corp." %}
{% endblock %}

{% block page_actions %}
  {% bw_button "Download PDF" variant="secondary" icon="download" href="/invoices/INV-2417/pdf/" %}
  {% bw_button "Edit" variant="primary" icon="edit" href="/invoices/INV-2417/edit/" %}
{% endblock %}

{% block content %}
<div class="bw-section-stack">

  {% comment %}
  The definition variant is the <dl>-shaped facts table for ONE record: each
  row is {label, value}, the label rendered as a row header. No sorting, no
  column headers, because those make no sense for one entity's facts.
  {% endcomment %}
  {% include "brickwork/components/_data_table.html" with table_id="invoice-facts" variant="definition" rows=invoice_facts %}

  {% comment %}
  Line items for THIS invoice (description / qty / unit / amount), not a
  related-invoices list. The definition table above holds the record facts;
  this table is the billable body.
  {% endcomment %}
  <section aria-labelledby="invoice-lines-heading">
    <h2 id="invoice-lines-heading" class="bw-band-heading">Line items</h2>
    {% include "brickwork/components/_data_table.html" with table_id="invoice-lines" columns=line_columns rows=line_rows empty_heading="No line items" empty_body="This invoice has no line items yet." %}
  </section>

  {% comment %}
  The danger zone (icvoss/django-brickwork#526): a bordered card with a
  compact destructive control, not a lone full-width danger button stacked
  under a warning alert that repeats the same sentence. Point the button at
  your own confirmation page (see app/confirm.html).
  {% endcomment %}
  <section class="bw-card" aria-labelledby="danger-zone-heading">
    <div class="bw-card__body">
      <h2 id="danger-zone-heading" class="bw-card__title">Void this invoice</h2>
      <p>Voiding cannot be undone. The invoice stays on record but is no longer payable.</p>
      <div>
        {% bw_button "Void invoice" variant="danger" href="/invoices/INV-2417/void/" %}
      </div>
    </div>
  </section>

</div>
{% endblock %}