<section class="regional-trade-network-shell">
    <nav class="regional-trade-network-scopes" aria-label="Trade network scope">
        {{#each scopes}}<button type="button" class="{{#if active}}active{{/if}}" data-action="setTradeScope" data-scope="{{id}}"><i class="{{icon}}"></i>{{label}}</button>{{/each}}
        <div class="regional-trade-network-summary is-compact"><span class="regional-trade-region-name"><i class="fas fa-map"></i> {{sceneName}}</span><span><strong>{{summary.locationCount}}</strong> Locations</span><span><strong>{{summary.routeCount}}</strong> Routes</span><span><strong>{{summary.unconnectedCount}}</strong> Independent</span></div>
        {{#if isGM}}<button type="button" data-action="manageTradeGoods"><i class="fas fa-boxes-stacked"></i> Trade Goods &amp; Prices</button>{{/if}}
    </nav>

    <div class="regional-trade-network-workspace">
        <aside class="regional-trade-tree-panel">
            <header><h3>Trade Networks</h3><p>Connected Locations send their goods toward the Trade Hub.</p></header>
            <div class="regional-trade-tree" role="list">
                {{#each rows}}
                <article class="regional-trade-tree-row {{#if selected}}is-selected{{/if}} {{#if route.inconsistent}}has-warning{{/if}}" style="--trade-depth: {{depthOffset}}px" role="listitem">
                    <button type="button" class="regional-trade-tree-select" data-action="selectTradeLocation" data-location-id="{{entityId}}">
                        <span class="regional-trade-tree-branch">{{#if route}}<i class="fas fa-turn-up fa-rotate-90"></i>{{else}}<i class="fas {{#if hasChildren}}fa-scale-balanced{{else}}fa-circle-dot{{/if}}"></i>{{/if}}</span>
                        <span class="nexus-entity-image is-place">{{#if imageSrc}}<img src="{{imageSrc}}" alt="">{{else}}<i class="fas fa-location-dot"></i>{{/if}}</span>
                        <span class="regional-trade-tree-copy"><strong>{{name}}{{#if isFactionHolding}}<i class="fas fa-shield-halved" title="Faction holding"></i>{{/if}}</strong><small>{{subtitle}}{{#if hasChildren}} · {{childCount}} direct supplier{{#unless (eq childCount 1)}}s{{/unless}}{{/if}}</small>
                            {{#if route}}{{#if route.hasSends}}<span class="regional-trade-tree-flow"><b>Sends goods to {{route.centerName}}</b>{{#each route.sends}}<em>{{name}}</em>{{/each}}{{#if route.sendsMore}}<em>+{{route.sendsMore}}</em>{{/if}}</span>{{else}}<span class="regional-trade-tree-flow"><b>Trades through {{route.centerName}}</b><em>No goods produced here</em></span>{{/if}}{{/if}}
                        </span>
                    </button>
                    <button type="button" class="regional-trade-tree-open" data-action="openTradeLocation" data-location-id="{{entityId}}" title="Open {{name}}" aria-label="Open {{name}}"><i class="fas fa-arrow-up-right-from-square"></i></button>
                </article>
                {{else}}<div class="regional-trade-network-empty"><i class="fas fa-route"></i><strong>No visible trade locations</strong><span>There are no Locations available in this scope.</span></div>{{/each}}
            </div>
        </aside>

        <main class="regional-trade-detail-panel">
            {{#if selected}}
            <header class="regional-trade-detail-header"><span class="nexus-entity-image is-place">{{#if selected.imageSrc}}<img src="{{selected.imageSrc}}" alt="">{{else}}<i class="fas fa-location-dot"></i>{{/if}}</span><div><span>Selected Location</span><h3>{{selected.name}}</h3><p>{{selected.subtitle}}</p></div><button type="button" data-action="openTradeLocation" data-location-id="{{selected.entityId}}"><i class="fas fa-arrow-up-right-from-square"></i> Open</button></header>

            <div class="regional-trade-detail-content">
                <section class="regional-trade-ledger regional-trade-market-card">
                    <header class="regional-trade-ledger-header">
                        <div class="regional-trade-section-heading"><h4><i class="fas fa-store"></i> Market at {{selected.name}}</h4><p>{{selected.marketName}} · This market has access to goods produced throughout its network.</p></div>
                        {{#if isGM}}<div class="regional-trade-center-controls"><label><span>Trades Through</span><select name="tradingCenter.entityId" {{#unless hasRegion}}disabled{{/unless}}><option value="">Trade Hub</option>{{#each selected.candidates}}<option value="{{entityId}}" {{#if selected}}selected{{/if}}>{{name}} — {{subtitle}}</option>{{/each}}</select></label>{{#if selected.routeEdgeId}}<button type="button" class="regional-trade-danger" data-action="clearTradeRoute"><i class="fas fa-link-slash"></i> Clear</button>{{/if}}</div>{{else}}<div class="regional-trade-center-readonly"><small>Trades Through</small><strong>{{#if selected.tradingCenter}}{{selected.tradingCenter.name}}{{else}}Trade Hub{{/if}}</strong></div>{{/if}}
                    </header>
                    {{#unless hasRegion}}<p class="regional-trade-region-warning"><i class="fas fa-triangle-exclamation"></i> Place this Location on a Scene to connect it to a trade network.</p>{{/unless}}
                    {{#if selected.invalidTradingCenter}}<p class="regional-trade-region-warning"><i class="fas fa-triangle-exclamation"></i> {{selected.invalidTradingCenter.reason}}</p>{{/if}}

                    <div class="regional-trade-market-groups">
                        <div class="regional-trade-market-group is-local">
                            <header><div><h5>Produced Here</h5><small>Cheaper when bought at the source</small></div>{{#if isGM}}<button type="button" data-action="editTradeGoods" data-goods-field="produces"><i class="fas fa-pen"></i> Edit</button>{{/if}}</header>
                            <div class="regional-trade-goods-gallery">{{#each selected.producedGoods}}<span class="regional-trade-ledger-good is-local"><span class="nexus-entity-image">{{#if imageSrc}}<img src="{{imageSrc}}" alt="">{{else}}<i class="fas fa-box"></i>{{/if}}</span><strong>{{name}}</strong><em>Local Export</em></span>{{else}}<em class="regional-trade-empty-copy">This Location produces no trade goods.</em>{{/each}}</div>
                        </div>
                        <div class="regional-trade-market-group is-basin">
                            <header><div><h5>Available Here</h5><small>Produced locally or brought in through the network</small></div></header>
                            <div class="regional-trade-goods-gallery">{{#each selected.availableGoods}}<span class="regional-trade-ledger-good {{#if isLocal}}is-local{{else}}is-supplied{{/if}}"><span class="nexus-entity-image">{{#if imageSrc}}<img src="{{imageSrc}}" alt="">{{else}}<i class="fas fa-box"></i>{{/if}}</span><strong>{{name}}</strong><em>{{#if isLocal}}Local{{else}}Network{{/if}}</em></span>{{else}}<em class="regional-trade-empty-copy">No Location in this network currently produces trade goods.</em>{{/each}}</div>
                        </div>
                    </div>

                    {{#if selected.hasFeederRoutes}}
                    <h5 class="regional-trade-ledger-breakdown-title">Direct Suppliers</h5>
                    <div class="regional-trade-ledger-list">
                        {{#each selected.feederRoutes}}<button type="button" class="regional-trade-ledger-row" data-action="selectTradeLocation" data-location-id="{{entityId}}" title="Select {{name}}"><span class="regional-trade-ledger-location"><span class="nexus-entity-image is-place">{{#if imageSrc}}<img src="{{imageSrc}}" alt="">{{else}}<i class="fas fa-location-dot"></i>{{/if}}</span><span><strong>{{name}}</strong><small>{{subtitle}}</small></span></span><span class="regional-trade-ledger-direction"><i class="fas fa-arrow-right-long"></i><small>Sends Goods Here</small></span><span class="regional-trade-goods-gallery">{{#each incomingGoods}}<span class="regional-trade-ledger-good"><span class="nexus-entity-image">{{#if imageSrc}}<img src="{{imageSrc}}" alt="">{{else}}<i class="fas fa-box"></i>{{/if}}</span><strong>{{name}}</strong></span>{{else}}<em class="regional-trade-empty-copy">No trade goods currently come from this Location.</em>{{/each}}</span><i class="fas fa-chevron-right"></i></button>{{/each}}
                    </div>
                    {{/if}}

                    <p class="regional-trade-qualitative-note"><i class="fas fa-circle-info"></i> These goods show what the market normally carries, not exact stock. Goods already supplied by this network sell for less; goods unavailable here can be sold at full value.</p>
                </section>
            </div>

            {{else}}<div class="regional-trade-network-empty"><i class="fas fa-location-crosshairs"></i><strong>Select a Location</strong><span>Choose a Location in the trade tree to inspect its market and route.</span></div>{{/if}}
        </main>
    </div>
</section>
