@inject IBrouter brouter
@inject DemoState demoState
@implements IDisposable

@code {
    private int _currentCount;
    private int _dashboardVisits;

    private Func<BrouterNavigationContext, ValueTask>? _onNavigatingHandler;

    void ChangeCountValue(int value)
    {
        _currentCount = value;
        StateHasChanged();
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        _onNavigatingHandler = ctx =>
        {
            // analytics, telemetry, page title, ...
            return ValueTask.CompletedTask;
        };
        brouter.OnNavigating += _onNavigatingHandler;
    }

    public void Dispose()
    {
        if (_onNavigatingHandler is not null)
        {
            brouter.OnNavigating -= _onNavigatingHandler;
            _onNavigatingHandler = null;
        }
    }

    private ValueTask GuardEvenSecond(BrouterNavigationContext ctx)
    {
        if (DateTime.Now.Second % 2 != 0) ctx.Redirect("/403");
        return ValueTask.CompletedTask;
    }

    private async ValueTask CheckEvenMinute(BrouterNavigationContext ctx)
    {
        await Task.Delay(1, ctx.CancellationToken);
        if (DateTime.Now.Minute % 2 != 0)
        {
            ctx.Redirect("/403");
        }
    }

    // ===== data-layer demos (see DataPage / DeferredPage / UnstablePage) =====

    // Deliberately slow so the router-level <Navigating> pending UI is visible, and so the
    // StaleTime cache / link preloading effects are obvious (instant when warm).
    private async ValueTask<object?> LoadData(BrouterNavigationContext ctx)
    {
        await Task.Delay(600, ctx.CancellationToken);
        return new LoadedInfo(DateTime.Now, ctx.IsRevalidation, ctx.To.GetQuery("page") ?? "1");
    }

    // Deferred data: only the summary blocks navigation; the details task is returned UNAWAITED
    // and streams into <BrouterAwait> after the page has revealed.
    private async ValueTask<object?> LoadDeferred(BrouterNavigationContext ctx)
    {
        await Task.Delay(300, ctx.CancellationToken);
        return new DeferredReport($"Report generated at {DateTime.Now:HH:mm:ss}.", LoadSlowDetailsAsync());
    }

    private static async Task<string[]> LoadSlowDetailsAsync()
    {
        await Task.Delay(1500);
        return ["42 orders in the last hour", "7 new signups", "0 incidents"];
    }

    // Error-boundary demo: throws while DemoState.UnstableShouldFail is armed; the route's
    // ErrorContent renders the failure with a heal-and-retry button.
    private async ValueTask<object?> LoadUnstable(BrouterNavigationContext ctx)
    {
        await Task.Delay(300, ctx.CancellationToken);
        if (demoState.UnstableShouldFail)
            throw new InvalidOperationException("The upstream service exploded (simulated).");
        return $"Fresh data loaded at {DateTime.Now:HH:mm:ss}.";
    }

    // ===== guards for the demos =====

    // Leave guard for /editor: while the editor is dirty, cancel preventively - the URL never moves.
    private ValueTask GuardEditorLeave(BrouterNavigationContext ctx)
    {
        if (demoState.IsEditorDirty) ctx.Cancel();
        return ValueTask.CompletedTask;
    }

    // /blocked always cancels - the OutcomesPage uses it to show a Cancelled NavigateAsync result.
    private ValueTask BlockAlways(BrouterNavigationContext ctx)
    {
        ctx.Cancel();
        return ValueTask.CompletedTask;
    }

    // Shared guard on the dashboard's pathless group: one declaration covers every child.
    private ValueTask CountDashboardVisit(BrouterNavigationContext ctx)
    {
        _dashboardVisits++;
        return ValueTask.CompletedTask;
    }

    // Lazy route loading hook. This demo has nothing to load lazily, but the wiring shows the
    // shape: on WebAssembly you would await LazyAssemblyLoader.LoadAssembliesAsync(...) based on
    // ctx.To.Path and return the assemblies - their @page components are registered within the
    // SAME navigation, so a deep link into a lazy area just works.
    private ValueTask<IEnumerable<System.Reflection.Assembly>?> OnNavigate(BrouterNavigationContext ctx)
        => ValueTask.FromResult<IEnumerable<System.Reflection.Assembly>?>(null);
}

@* AppAssembly enables attribute-route discovery: components with @page / [Route] (e.g. DiscoveredPage)
   are matched alongside the hand-declared routes below, without being listed here.
   OnNavigateAsync is the lazy route-loading hook (see OnNavigate above). *@
<Brouter NotFoundUrl="404" AppAssembly="@GetType().Assembly" OnNavigateAsync="OnNavigate">
    <Routes>
        @*============================================================================*@
        @* The site itself: landing page, docs hub (a nested-route tree whose parent renders
           the sidebar shell and whose children fill its outlet), and the playground index. *@

        <Broute Path="/" Component="@typeof(LandingPage)" />
        <Broute Path="/playground" Component="@typeof(PlaygroundPage)" />

        <Broute Path="/docs">
            <Content>
                <DocsShell />
            </Content>
            <Routes>
                @* Empty path = the index route: it matches /docs exactly. *@
                <Broute Path="" Component="@typeof(DocsOverviewPage)" />
                <Broute Path="getting-started" Component="@typeof(GettingStartedPage)" />
                <Broute Path="navigation-pipeline" Component="@typeof(PipelinePage)" />

                <Broute Path="route-templates" Component="@typeof(TemplatesPage)" />
                <Broute Path="constraints" Component="@typeof(ConstraintsPage)" />
                @* ParametersPage receives the host's shared count to demonstrate host-state
                   sharing through <Content>. *@
                <Broute Path="route-parameters">
                    <Content>
                        <ParametersPage CountValue="@_currentCount" />
                    </Content>
                </Broute>
                <Broute Path="nested-routes" Component="@typeof(OutletsPage)" />
                <Broute Path="page-discovery" Component="@typeof(PageDiscoveryPage)" />

                <Broute Path="navigation" Component="@typeof(NavigationPage)" />
                <Broute Path="guards" Component="@typeof(GuardsPage)" />
                <Broute Path="scroll-and-focus" Component="@typeof(ScrollFocusPage)" />

                <Broute Path="data-loading" Component="@typeof(LoadersPage)" />

                <Broute Path="view-transitions" Component="@typeof(TransitionsPage)" />
                <Broute Path="lifecycle" Component="@typeof(LifecycleOverviewPage)" />

                <Broute Path="typed-routes" Component="@typeof(GeneratorPage)" />
                <Broute Path="mcp" Component="@typeof(McpPage)" />
                <Broute Path="migration" Component="@typeof(MigrationPage)" />
                <Broute Path="performance" Component="@typeof(PerformancePage)" />

                <Broute Path="api" Component="@typeof(ApiPage)" />
                <Broute Path="recipes" Component="@typeof(RecipesPage)" />
                <Broute Path="faq" Component="@typeof(FaqPage)" />
            </Routes>
        </Broute>

        @* Redirects keep the site's previous flat URLs working (and dogfood RedirectTo). *@
        <Broute Path="/home" RedirectTo="/" />
        <Broute Path="/templates" RedirectTo="/docs/route-templates" />
        <Broute Path="/constraints" RedirectTo="/docs/constraints" />
        <Broute Path="/parameters" RedirectTo="/docs/route-parameters" />
        <Broute Path="/outlets" RedirectTo="/docs/nested-routes" />
        <Broute Path="/guards" RedirectTo="/docs/guards" />
        <Broute Path="/loaders" RedirectTo="/docs/data-loading" />
        <Broute Path="/navigation" RedirectTo="/docs/navigation" />
        <Broute Path="/transitions" RedirectTo="/docs/view-transitions" />
        <Broute Path="/lifecycle" RedirectTo="/docs/lifecycle" />
        <Broute Path="/generator" RedirectTo="/docs/typed-routes" />

        @*============================================================================*@
        @* Live playground routes: real, clickable proofs for the docs pages above. *@

        <Broute Path="/counter">
            <Content>
                <CounterPage @bind-CurrentCount="_currentCount" ChangeCount="@ChangeCountValue" />
            </Content>
        </Broute>

        <Broute Name="counter" Path="/counter/{init:int}">
            <Content>
                <CounterPage @bind-CurrentCount="_currentCount" ChangeCount="@ChangeCountValue" />
            </Content>
        </Broute>

        <Broute Path="/counter/multi/{id:int:long}/{age:long:decimal:double}/{name}">
            <Content>
                <CounterPage @bind-CurrentCount="_currentCount" ChangeCount="@ChangeCountValue" />
            </Content>
        </Broute>

        <Broute Path="/fetchdata" Component="@typeof(FetchDataPage)" />

        @* Optional parameter: /profile or /profile/saleh both match. *@
        <Broute Path="/profile/{username?}" Component="@typeof(ProfilePage)" />

        @* Catch-all parameter: /posts/2024/12/hello-world binds the whole tail. *@
        <Broute Path="/posts/{**slug}" Component="@typeof(PostPage)" />

        <Broute Path="/{prefix}/test2/{postfix}">
            <Content Context="p">
                <div class="bb-intro">
                    <h1>Test2 pattern</h1>
                    <p class="bb-subtitle">Matched <code>{prefix}/test2/{postfix}</code>.</p>
                </div>
                <dl class="bb-params">
                    <dt>prefix</dt>
                    <dd>@p["prefix"]</dd>
                    <dt>postfix</dt>
                    <dd>@p["postfix"]</dd>
                </dl>
            </Content>
        </Broute>

        @* Wildcard route - only wins if nothing more specific matches. *@
        <Broute Path="/*/test">
            <Content>
                <div class="bb-intro">
                    <h1>Wildcard test</h1>
                    <p class="bb-subtitle">Matched the wildcard pattern <code>/*/test</code>.</p>
                </div>
            </Content>
        </Broute>

        @*============================================================================*@
        @* Framework-parity template features - the route-templates docs page documents every
           shape with code samples and links into the live routes below: middle optionals
           (ProductsListPage), constrained middle optionals (WelcomePage), default values
           (BlogPage), complex segments (FileDetailPage / ApiVersionPage), and a constrained
           single-star catch-all (AssetsPage). *@

        @* Middle optional: parses like the built-in router; required at match time, so
           /products/en/list matches but /products/list does not. *@
        <Broute Path="/products/{culture?}/list" Component="@typeof(ProductsListPage)" />

        @* Constrained middle optional: nonfile rejects first segments that look like file names. *@
        <Broute Path="/{lang:nonfile?}/welcome" Component="@typeof(WelcomePage)" />

        @* Default value: /blog binds action = "Index"; /blog/archive overrides it. *@
        <Broute Path="/blog/{action=Index}" Component="@typeof(BlogPage)" />

        @* Complex segments: several parameters inside ONE URL segment, matched right-to-left. *@
        <Broute Path="/files/{name}.{ext?}" Component="@typeof(FileDetailPage)" />
        <Broute Path="/api/v{major:int}-{minor:int}" Component="@typeof(ApiVersionPage)" />

        @* Constrained catch-all ({*path} == {**path} for matching): the constraint validates the
           whole remainder; nonfile also accepts the empty remainder, so /assets itself matches. *@
        <Broute Path="/assets/{*path:nonfile}" Component="@typeof(AssetsPage)" />

        @* Constraint chaining: validators gate the match, the last TYPE constraint (int) binds. *@
        <Broute Path="/rate/{score:int:min(1):max(5)}">
            <Content Context="p">
                <div class="bb-intro">
                    <h1>Rated @p["score"] / 5</h1>
                    <p class="bb-subtitle">
                        Matched <code>/rate/{score:int:min(1):max(5)}</code> - min/max validated the value,
                        and it bound as <strong>@(p["score"]?.GetType().Name)</strong> thanks to <code>:int</code>.
                    </p>
                </div>
                <div class="bb-try">
                    <BrouterLink Href="/rate/5" class="btn btn-outline">/rate/5</BrouterLink>
                    <BrouterLink Href="/rate/9" class="btn btn-outline">/rate/9 → 404</BrouterLink>
                    <BrouterLink Href="/docs/route-templates" class="btn btn-primary">← All template shapes</BrouterLink>
                </div>
            </Content>
        </Broute>

        @*============================================================================*@
        @* Interactive constraint tester (ConstraintsPage, under /docs/constraints). One
           constrained route per catalog entry plus one unconstrained fallback: both can match
           /c/x/y, and specificity picks the winner - the fallback only renders when the
           constrained sibling rejected the value. *@

        @foreach (var c in ConstraintCatalog.All)
        {
            <Broute Path="@($"/c/{c.Kind}/{{v:{c.Token}}}")">
                <Content Context="p">
                    <ConstraintResultPage Kind="@c.Kind" Value="@p["v"]" />
                </Content>
            </Broute>
        }

        <Broute Path="/c/{kind}/{value}">
            <Content Context="p">
                <ConstraintResultPage Kind="@(p["kind"]?.ToString())" Value="@p["value"]" Rejected="true" />
            </Content>
        </Broute>

        @*============================================================================*@

        <Broute Path="/nested-route">
            <Broute Path="/{id:int}" Component="@typeof(FetchDataPage)" />
            <Broute Path="/{id:int}/hello">
                <Content Context="p">
                    <div class="bb-intro">
                        <h1>Nested route <code>/{id:int}/hello</code></h1>
                    </div>
                    <dl class="bb-params">
                        <dt>id</dt>
                        <dd>@p["id"]</dd>
                    </dl>
                    <hr />
                    <FetchDataPage Value="2" />
                </Content>
            </Broute>
            <Broute Path="/{id:int}/world">
                <Content Context="p">
                    <div class="bb-intro">
                        <h1>Nested route <code>/{id:int}/world</code></h1>
                    </div>
                    <dl class="bb-params">
                        <dt>id</dt>
                        <dd>@p["id"]</dd>
                    </dl>
                    <hr />
                    <FetchDataPage Value="3" />
                </Content>
            </Broute>
        </Broute>

        @*============================================================================*@

        <Broute Path="g1" Guard="@GuardEvenSecond">
            <Content>
                <div class="bb-intro">
                    <h1>Guarded route <code>/g1</code></h1>
                    <p class="bb-subtitle">Allowed only when the current second is even - otherwise redirects to
                        <code>/403</code>.
                    </p>
                </div>
                <div class="bb-card">
                    <span class="bb-badge bb-badge-success">access granted</span>
                    <p style="margin-top: .5rem;">You made it through the guard.</p>
                </div>
            </Content>
        </Broute>

        <Broute Path="g2" Guard="@CheckEvenMinute">
            <Content>
                <div class="bb-intro">
                    <h1>Guarded route <code>/g2</code></h1>
                    <p class="bb-subtitle">Allowed only when the current minute is even - otherwise redirects to
                        <code>/403</code>.
                    </p>
                </div>
                <div class="bb-card">
                    <span class="bb-badge bb-badge-success">access granted</span>
                    <p style="margin-top: .5rem;">You made it through the async guard.</p>
                </div>
            </Content>
        </Broute>

        @*============================================================================*@

        <Broute Path="nested" Component="@typeof(Nested)">
            <Broute Path="n1/{count:int}">
                <Content Context="p">
                    <h3>Child: <code>/nested/n1</code></h3>
                    <dl class="bb-params">
                        <dt>count</dt>
                        <dd>@p["count"]</dd>
                    </dl>
                </Content>
            </Broute>
        </Broute>

        <Broute Path="nested2" Component="@typeof(Nested2)">
            <Broute Path="n1/{count:int}">
                <Content Context="p">
                    <h3>Child: <code>/nested2/n1</code></h3>
                    <dl class="bb-params">
                        <dt>count</dt>
                        <dd>@p["count"]</dd>
                    </dl>
                </Content>
            </Broute>
            <Broute Path="n2/{count:int}">
                <Content Context="p">
                    <h3>Child: <code>/nested2/n2</code></h3>
                    <dl class="bb-params">
                        <dt>count</dt>
                        <dd><strong>@p["count"]</strong></dd>
                    </dl>
                </Content>
            </Broute>
        </Broute>

        <Broute Path="nested3">
            <Content>
                <div class="bb-intro">
                    <h1>Nested route <code>/nested3</code></h1>
                    <p class="bb-subtitle">An inline parent route that also defines its own outlet.</p>
                </div>
                <div class="bb-card">
                    <h3 class="bb-card-title">Children</h3>
                    <ul class="bb-link-list">
                        <li>
                            <BrouterLink Href="/nested3/n1/1">/nested3/n1/1</BrouterLink>
                        </li>
                        <li>
                            <BrouterLink Href="/nested3/n2/2">/nested3/n2/2</BrouterLink>
                        </li>
                    </ul>
                </div>
                <div class="bb-card">
                    <h3 class="bb-card-title">
                        <span class="bb-dot bb-dot-success"></span>
                        Outlet
                    </h3>
                    <BrouterOutlet />
                </div>
            </Content>
            <Routes>
                <Broute Path="n1/{count:int}">
                    <Content Context="p">
                        <h3>Child: <code>/nested3/n1</code></h3>
                        <dl class="bb-params">
                            <dt>count</dt>
                            <dd><em>@p["count"]</em></dd>
                        </dl>
                    </Content>
                </Broute>
                <Broute Path="n2/{count:int}">
                    <Content Context="p">
                        <h3>Child: <code>/nested3/n2</code></h3>
                        <dl class="bb-params">
                            <dt>count</dt>
                            <dd><strong>@p["count"]</strong></dd>
                        </dl>
                    </Content>
                </Broute>
            </Routes>
        </Broute>

        @*============================================================================*@

        <Broute Path="404">
            <Content>
                <div class="bb-error bb-error-404">
                    <h1>404</h1>
                    <p>
                        Nothing matched this address - no declared route, and no
                        <code>&#64;page</code> component either.
                    </p>
                    <div class="bb-try bb-error-actions">
                        <BrouterLink Href="/" class="btn btn-primary">Back to home</BrouterLink>
                        <BrouterLink Href="/docs" class="btn btn-secondary">Documentation</BrouterLink>
                        <BrouterLink Href="/playground" class="btn btn-secondary">Playground</BrouterLink>
                    </div>
                    <p class="bb-error-hint">
                        Looking for something in particular? Press <kbd>Ctrl</kbd> <kbd>K</kbd> to search.
                    </p>
                </div>
            </Content>
        </Broute>

        <Broute Path="/403">
            <Content>
                <div class="bb-error bb-error-403">
                    <h1>403</h1>
                    <p>A guard turned this navigation away - the URL never committed.</p>
                    <div class="bb-try bb-error-actions">
                        <BrouterLink Href="/" class="btn btn-primary">Back to home</BrouterLink>
                        <BrouterLink Href="/docs/guards" class="btn btn-secondary">How guards work</BrouterLink>
                    </div>
                </div>
            </Content>
        </Broute>

        @*============================================================================*@
        @* Data layer: loader + StaleTime cache + revalidation + query updates (DataPage),
           deferred/streamed data (DeferredPage), error boundary with retry (UnstablePage). *@

        <Broute Name="data" Path="/data" Loader="LoadData" StaleTime="TimeSpan.FromSeconds(30)"
                Meta="@("Data & caching demo")">
            <Content>
                <DataPage />
            </Content>
        </Broute>

        <Broute Path="/deferred" Loader="LoadDeferred">
            <Content>
                <DeferredPage />
            </Content>
        </Broute>

        <Broute Path="/unstable" Loader="LoadUnstable">
            <Content>
                <UnstablePage />
            </Content>
            <ErrorContent Context="err">
                <div class="bb-error bb-error-403">
                    <h1>Route failed to load</h1>
                    <p>@err.Exception.Message</p>
                    <button class="btn btn-primary"
                            @onclick="@(async () => { demoState.UnstableShouldFail = false; await err.RetryAsync(); })">
                        Fix the service &amp; retry
                    </button>
                </div>
            </ErrorContent>
        </Broute>

        @*============================================================================*@
        @* Navigation control: leave guard (unsaved changes), history entry state,
           awaited navigation outcomes, and the always-cancelling /blocked target. *@

        <Broute Path="/editor" LeaveGuard="GuardEditorLeave">
            <Content>
                <EditorPage />
            </Content>
        </Broute>

        @* Component-level navigation lock: the PAGE holds the veto (OnDeactivating/OnRenavigating
           on BrouterRouteBase) and shows a custom confirmation dialog - including for /lock/1 ->
           /lock/2 parameter changes, which the route-declared LeaveGuard above can never see. *@
        <Broute Path="/lock" RedirectTo="/lock/1" />
        <Broute Path="/lock/{id:int}" Component="@typeof(NavigationLockPage)" />

        <Broute Path="/history-state">
            <Content>
                <HistoryStatePage />
            </Content>
        </Broute>

        <Broute Path="/outcomes">
            <Content>
                <OutcomesPage />
            </Content>
        </Broute>

        <Broute Path="/blocked" Guard="BlockAlways">
            <Content>
                <div>This never renders - the guard always cancels.</div>
            </Content>
        </Broute>

        @*============================================================================*@
        @* Keep-alive: /sticky vs the /fleeting control shows singleton retention plus the
           route lifecycle (StickyNotePage derives from BrouterRouteBase and pauses its timer in
           OnDeactivated / resumes it in OnActivated); /notes/{id} shows per-parameter caching
           (KeepAliveMax) with LRU eviction, plus the resets: IBrouter.ClearKeepAlive(),
           ClearKeepAlive(includeActive: true) and ReloadAsync(). *@

        <Broute Path="/sticky" KeepAlive="true">
            <Content>
                <StickyNotePage KeepAliveDemo="true" />
            </Content>
        </Broute>

        <Broute Path="/fleeting">
            <Content>
                <StickyNotePage KeepAliveDemo="false" />
            </Content>
        </Broute>

        <Broute Name="notes" Path="/notes/{id:int}" KeepAlive="true" KeepAliveMax="2"
                Component="@typeof(NotebookPage)" />

        @*============================================================================*@
        @* Route lifecycle: /lifecycle/{id} is a singleton Component route whose page implements
           IBrouterRoute directly (auto-discovered by the router - no base class needed). The same
           instance is re-committed across id/query changes (OnRenavigated); leaving fires
           OnDeactivated with reason Disposing. Contrast with /sticky above, where keep-alive
           retention makes the reason Hidden. *@

        <Broute Path="/lifecycle/{id:int}" Component="@typeof(LifecyclePage)" />

        @*============================================================================*@
        @* View Transitions showcase: shared-element morphs between the gallery grid and the item
           detail hero via matching view-transition-name declarations (pure CSS wiring). *@

        <Broute Name="gallery" Path="/gallery" Component="@typeof(GalleryPage)" />
        <Broute Path="/gallery/{id:int}" Component="@typeof(GalleryItemPage)" />

        @*============================================================================*@
        @* Named outlets + pathless group: one child route fills two layout regions; the group
           attaches a shared guard to every dashboard child without adding a URL segment. *@

        <Broute Path="/dashboard">
            <Content>
                <div class="bb-intro">
                    <h1>Dashboard (named outlets)</h1>
                    <p class="bb-subtitle">
                        One child route drives two regions. Entries into this section, counted by the
                        pathless group's shared guard: <strong>@_dashboardVisits</strong>
                    </p>
                </div>
                <nav style="margin-bottom: 1rem; display: flex; gap: .5rem;">
                    <BrouterLink Href="/dashboard/stats" class="btn btn-primary">Stats</BrouterLink>
                    <BrouterLink Href="/dashboard/activity" class="btn btn-primary">Activity</BrouterLink>
                </nav>
                <div class="bb-grid">
                    <section class="bb-card">
                        <h3 class="bb-card-title"><span class="bb-dot bb-dot-primary"></span> Main (primary outlet)</h3>
                        <BrouterOutlet />
                    </section>
                    <section class="bb-card">
                        <h3 class="bb-card-title"><span class="bb-dot bb-dot-success"></span> Sidebar (named outlet)
                        </h3>
                        <BrouterOutlet Name="sidebar" />
                    </section>
                </div>
            </Content>
            <Routes>
                <Broute Group Path="" Guard="CountDashboardVisit">
                    <Routes>
                        <Broute Path="/stats">
                            <Content>
                                <p>Stats main content, rendered by the primary outlet.</p>
                            </Content>
                            <Routes>
                                <BrouterView Name="sidebar" Context="p">
                                    <p>Stats filters - a <code>&lt;BrouterView Name="sidebar"&gt;</code> rendered by the
                                        same-named outlet.
                                    </p>
                                </BrouterView>
                            </Routes>
                        </Broute>
                        <Broute Path="/activity">
                            <Content>
                                <p>Activity main content. This route declares no sidebar view, so the named outlet stays
                                    empty.</p>
                                </Content>
                            </Broute>
                        </Routes>
                    </Broute>
                </Routes>
            </Broute>
        </Routes>

        @* Shown while a navigation awaits slow loaders (visible on the first, uncached visit to /data). *@
        <Navigating>
            <div class="bb-card"><em>Loading route data…</em></div>
        </Navigating>

        @* Router-level error boundary: failures on routes without their own ErrorContent land here. *@
        <ErrorContent Context="err">
            <div class="bb-error bb-error-403">
                <h1>Navigation failed</h1>
                <p>@err.Exception.Message</p>
                <button class="btn btn-primary" @onclick="@(() => err.RetryAsync())">Retry</button>
            </div>
        </ErrorContent>
    </Brouter>