{% extends "brickwork/shell/base.html" %}
{% load i18n brickwork_icons %}
{% comment %}
The app shell: sidebar + topbar + workspace (SHL-001/006/011). Named blocks are
the versioned public contract (BR-BW-TPL-001). A consuming page extends this and
fills {% block content %} (plus any topbar/nav/header blocks it needs).

No-JS floor: the mobile drawer is a native <details>/<summary> disclosure
(SHL-015/016), so the shell is fully navigable with zero JS. A consumer that
loads Alpine may progressively enhance it via a template override
(BR-BW-TPL-002), never a required layer.

Sidebar collapse (0.13.0, SHL-003/004, brickwork#58): `{% block sidebar_toggle %}`
now ships a default labelled <button> (BR-BW-INPUT-005) rather than empty, since
an icon-only collapse narrows the sidebar's WIDTH and hides its text labels
without removing the nav items themselves (SHL-004's animated-width contract).
That is a CSS attribute-state change, not a show/hide content disclosure, so
(deviating from SHL-005's literal "mirror _disclosure.html" wording, which
describes the SEPARATE `_disclosure.html` component's own show/hide panel, not
this width toggle) the mechanism here is a button toggling `data-bw-collapsed`
on `.bw-sidebar`, progressively enhanced by the optional `bwSidebarCollapse`
Alpine component. The no-JS floor (BR-BW-HTMX-001) is a fully expanded,
fully functional sidebar: the button renders and is reachable, but collapsing
is an enhancement only, never required for navigation to work. Persisting the
user's choice is host-owned (SHL-003: "no brickwork model exists to store
it"); bwSidebarCollapse persists to localStorage as its own default, itself
overridable by a consumer template override (BR-BW-TPL-002).

Layout: the `layout` context var ("sidebar" default, or "topbar") selects which
region is primary (SHL-001). Logical CSS properties throughout (BR-BW-TOK-005),
so RTL is handled by the `dir` attribute alone.

Nav slot (0.5.0, brickwork#21, BR-BW-NAV-007): sidebar_switcher and
mobile_nav_switcher are consumer-owned seams sited above the nav render in
their respective containers (one class, both containers, mirroring the nav's
own one-render-two-containers rule, NAV-016). brickwork ships only the styled
container div, :empty-suppressed like the other optional blocks; the content
placed inside (e.g. a <details>-based workspace or property switcher,
following _account_menu.html's no-JS pattern) is entirely the consuming
project's own template, never a brickwork-shipped default (AC-BW-078).

States: sidebar collapsed/expanded (data-bw-collapsed on .bw-sidebar,
  progressively enhanced by bwSidebarCollapse; the no-JS floor is always
  expanded), mobile drawer open/closed (native <details>/<summary>, no JS
  required), sidebar_toggle button reflects state via aria-expanded plus a
  text swap between the two server-rendered translated labels.
Accessibility: skip link and the base shell's lang/dir/theme attributes are
  inherited. Own semantics: the sidebar nav region is aria-label="Primary",
  the mobile drawer nav is aria-label="Navigation", the main workspace is
  <main id="bw-main" tabindex="-1"> (the skip-link and no-JS-floor target),
  the sidebar_toggle button carries an aria-label and aria-controls pointing
  at #bw-sidebar. Covered by axe.spec.mjs against list-*.html,
  list-menu-open-*.html, list-topbar-*.html, dashboard-*.html and
  sidebar-collapsed-*.html (both themes), and by the "no-JS floor" suite,
  which asserts the skip link, the real anchor nav links and the native
  <details> drawer all work with JavaScript disabled.
Responsive: single breakpoint, at width < --bw-breakpoint-md (48rem) the
  sidebar (and the topbar-layout nav band) hides and the mobile drawer
  becomes the primary nav entry point; at md and above the sidebar is the
  primary nav and the drawer stays hidden. No other width-gated behaviour
  in this shell.
{% endcomment %}
{% block shell_variant %}app{% endblock %}

{% block shell %}
{% comment %}
data-layout resolves via {% firstof %}, not |default (brickwork#80): with a
consumer's string_if_invalid set, an undefined `layout` bypasses |default and
leaks the invalid marker into the attribute; firstof ignores the failure and
falls back to "sidebar" as documented.
{% endcomment %}
<div class="bw-app" data-layout="{% firstof layout 'sidebar' %}">

  {# --- Sidebar (primary nav container on desktop) --- #}
  {# x-data mounts bwSidebarCollapse (optional; a page with no Alpine loaded  #}
  {# just never sees data-bw-collapsed toggle, the no-JS floor per SHL-005). #}
  <aside class="bw-sidebar" id="bw-sidebar" aria-label="{% translate 'Primary' %}" x-data="bwSidebarCollapse()">
    <div class="bw-sidebar__header">
      {% comment %}
      brand_logo (the mark) and brand_wordmark (the text) are wrapped in
      brickwork-owned elements so the collapsed rail can keep the mark and hide
      the wordmark WITHOUT knowing the consumer's own inner markup or classes
      (SHL-004: "narrows, hides text, keeps icons", brickwork#93). The wordmark
      wrapper is visually hidden on collapse; the mark wrapper stays and the
      header centres it. An unfilled block leaves an :empty wrapper, which the
      CSS collapses to nothing.
      {% endcomment %}
      <span class="bw-sidebar__brand-mark">{% block brand_logo %}{% endblock %}</span>
      <span class="bw-sidebar__brand-wordmark">{% block brand_wordmark %}{% endblock %}</span>
      {% block sidebar_toggle %}
        {% translate "Collapse sidebar" as bw_sidebar_collapse_label %}
        {% translate "Expand sidebar" as bw_sidebar_expand_label %}
        {# The accessible name reflects state (aria-expanded + a text swap);  #}
        {# both translated strings ship server-side so bwSidebarCollapse      #}
        {# never sources English from JS (the chip-seed i18n precedent).     #}
        <button type="button"
                class="bw-btn bw-btn--ghost bw-btn--sm bw-btn--icon-only bw-sidebar__toggle"
                aria-expanded="true"
                aria-controls="bw-sidebar"
                aria-label="{{ bw_sidebar_collapse_label }}"
                data-bw-sidebar-collapse-label="{{ bw_sidebar_collapse_label }}"
                data-bw-sidebar-expand-label="{{ bw_sidebar_expand_label }}"
                data-bw-sidebar-toggle>
          {% bw_icon "sidebar" size="sm" decorative=True %}
        </button>
      {% endblock %}
    </div>
    <div class="bw-sidebar__switcher">{% block sidebar_switcher %}{% endblock %}</div>
    <nav class="bw-sidebar__nav" aria-label="{% translate 'Main navigation' %}">
      {% block sidebar %}{% endblock %}
    </nav>
    <div class="bw-sidebar__footer">{% block sidebar_footer %}{% endblock %}</div>
  </aside>

  {# --- Main column: topbar + optional subnav/breadcrumbs + workspace --- #}
  <div class="bw-app__main">

    <header class="bw-topbar">
      {# Mobile nav trigger: native <details> drawer, works with no JS (SHL-015/016). #}
      <details class="bw-drawer">
        <summary class="bw-drawer__trigger" aria-label="{% translate 'Open navigation menu' %}">
          {% comment %}
          Default visible affordance (icvoss/django-brickwork#520): an empty
          block left a working 44x44 hit target with nothing painted. Match
          the marketing toggle's package-owned icon default; consumers still
          override this block when they need a different glyph.
          {% endcomment %}
          {% block mobile_nav_trigger %}{% bw_icon "menu" size="md" decorative=True %}{% endblock %}
        </summary>
        <nav class="bw-drawer__panel" aria-label="{% translate 'Navigation' %}">
          <div class="bw-sidebar__switcher">{% block mobile_nav_switcher %}{% endblock %}</div>
          {% block mobile_nav %}{% block sidebar_mobile %}{% endblock %}{% endblock %}
        </nav>
      </details>

      {% block topbar %}
        <div class="bw-topbar__search">{% block topbar_search %}{% endblock %}</div>
        <div class="bw-topbar__spacer"></div>
        <div class="bw-topbar__notifications">{% block topbar_notifications %}{% endblock %}</div>
        <div class="bw-topbar__account">{% block topbar_account_menu %}{% endblock %}</div>
      {% endblock %}
    </header>

    {% block subnav_region %}
    <div class="bw-subnav">{% block subnav %}{% endblock %}</div>
    {% endblock %}

    {% block breadcrumbs_region %}
    <nav class="bw-breadcrumbs" aria-label="{% translate 'Breadcrumb' %}">{% block breadcrumbs %}{% endblock %}</nav>
    {% endblock %}

    <main id="bw-main" class="bw-workspace" tabindex="-1">
      {% block page_header_region %}
      <div class="bw-page-header-region">
        {% block page_header %}{% endblock %}
        <div class="bw-page-actions">{% block page_actions %}{% endblock %}</div>
      </div>
      {% endblock %}

      <div class="bw-content">
        {% block content %}{% endblock %}
      </div>

      {% block footer_region %}
      <footer class="bw-footer">{% block footer %}{% endblock %}</footer>
      {% endblock %}
    </main>

  </div>
</div>
{% endblock %}