<section class="nexus-shop-screen-shell nexus-shop-theme-{{themeId}}">
    {{#if missing}}
    <div class="nexus-shop-screen-missing">This Shop could not be opened.</div>
    {{else}}
    <header class="nexus-shop-screen-header nexus-shop-trade-header nexus-shop-streamlined-header">
        <div class="nexus-shop-participant nexus-shop-primary-trader" data-inventory-drop>
            <details class="nexus-shop-trader-picker">
                <summary title="Choose trading inventory">
                    {{#if inventoryActor}}<img src="{{inventoryActor.img}}" alt="{{inventoryActor.name}}">{{else}}<span><i class="fas fa-box-open"></i></span>{{/if}}
                    <i class="fas fa-caret-down"></i>
                </summary>
                <div class="nexus-shop-trader-menu">
                    <strong>Trading Inventory</strong>
                    {{#if hasInventories}}
                    <div class="nexus-shop-trader-options">
                        {{#each inventoryGroups}}
                        <h4>{{label}}</h4>
                        {{#each actors}}
                        <button type="button" data-action="selectShopInventory" data-actor-uuid="{{uuid}}" class="{{#if selected}}is-selected{{/if}}">
                            <img src="{{img}}" alt=""><span>{{name}}</span>{{#if selected}}<i class="fas fa-check"></i>{{/if}}
                        </button>
                        {{/each}}
                        {{/each}}
                    </div>
                    {{else}}<p>No eligible inventories are available.</p>{{/if}}
                    <small>Purchases arrive here and sold items leave from here. You can also drop an owned Actor.</small>
                </div>
            </details>
            {{#if inventoryActor}}
            <div class="nexus-shop-header-identity">
                <span>{{#if sameActor}}Inventory & Wallet{{else}}Trading Inventory{{/if}}</span>
                <strong>{{inventoryActor.name}}</strong>
                <small>{{inventoryActor.typeLabel}} · {{inventoryActor.weight}}{{#if sameActor}} · {{inventoryActor.wallet}}{{/if}}</small>
            </div>
            {{else}}
            <div class="nexus-shop-header-identity"><span>Trading Inventory</span><strong>Choose an inventory</strong><small>{{adapterLabel}}</small></div>
            {{/if}}
        </div>

        <div class="nexus-shop-wallet-control {{#if separateWallet}}is-separate{{/if}}" data-wallet-drop>
            <details class="nexus-shop-trader-picker nexus-shop-wallet-picker">
                <summary title="{{#if sameActor}}Choose a different wallet{{else}}Change wallet{{/if}}">
                    {{#if separateWallet}}<img src="{{wallet.img}}" alt="{{wallet.name}}">{{else}}<span><i class="fas fa-wallet"></i></span>{{/if}}
                    <i class="fas fa-caret-down"></i>
                </summary>
                <div class="nexus-shop-trader-menu nexus-shop-wallet-menu">
                    <strong>Pay and Receive Money With</strong>
                    {{#if hasWallets}}
                    <div class="nexus-shop-trader-options">
                        {{#each walletGroups}}
                        <h4>{{label}}</h4>
                        {{#each actors}}
                        <button type="button" data-action="selectShopWallet" data-actor-uuid="{{uuid}}" class="{{#if selected}}is-selected{{/if}}">
                            <img src="{{img}}" alt=""><span>{{name}}</span>{{#if selected}}<i class="fas fa-check"></i>{{/if}}
                        </button>
                        {{/each}}
                        {{/each}}
                    </div>
                    {{else}}<p>No eligible wallets are available.</p>{{/if}}
                    {{#if assignedCharacterAvailable}}<button type="button" data-action="useAssignedCharacter"><i class="fas fa-user-check"></i> Use My Assigned Character</button>{{/if}}
                </div>
            </details>
            {{#if wallet}}<div class="nexus-shop-wallet-label"><span>Wallet</span><strong>{{wallet.name}}</strong><small>{{wallet.wallet}}</small></div>{{/if}}
        </div>

        <div class="nexus-shop-screen-summary">
            {{#if shopImageSrc}}<img class="nexus-shop-trade-identity" src="{{shopImageSrc}}" alt="{{shopName}}">{{/if}}
            <div>
                <strong>{{shopName}}</strong>
                <span>{{#if parentLabel}}{{parentLabel}} · {{/if}}Treasury {{treasuryLabel}}</span>
                {{#if usesTradePolicy}}
                <small>Prices reflect local and regional market conditions.</small>
                {{else}}
                <small>Sells at {{sellRateLabel}} · Buys at {{buyRateLabel}}</small>
                {{/if}}
            </div>
        </div>
        <div class="nexus-shop-header-controls">
            <button type="button" data-action="openShopJournal" title="Open Shop Details and Connections"><i class="fas fa-address-card"></i></button>
            {{#if isGM}}<button type="button" data-action="configureShop" title="Configure Shop"><i class="fas fa-gear"></i></button>{{/if}}
            {{#if canRestock}}<button type="button" data-action="restockShop" title="Restock Shop" {{#if busy}}disabled{{/if}}><i class="fas fa-dice"></i></button>{{/if}}
        </div>
    </header>

    <div class="nexus-shop-screen-body nexus-shop-bilateral-body nexus-shop-counter">
        <section class="nexus-shop-inventory-panel nexus-shop-actor-inventory">
            <header>
                <div><h3>Your Inventory</h3><small>Click to offer one · Shift-click the whole stack</small></div>
                <span>{{inventoryCount}} items</span>
            </header>
            <div class="nexus-shop-grid nexus-shop-product-grid nexus-shop-compact-grid">
                {{#each playerCards}}
                <button type="button"
                    class="nexus-shop-item-card {{directionClass}} {{#if temporary}}is-temporary{{/if}} {{#if disabled}}is-disabled{{/if}}"
                    {{#if action}}data-action="{{action}}"{{/if}}
                    {{#if providerId}}data-provider-id="{{providerId}}" data-product-id="{{productId}}"{{/if}}
                    {{#if itemId}}data-item-id="{{itemId}}"{{/if}}
                    data-shop-tooltip="{{tooltipKey}}"
                    aria-label="{{ariaLabel}}">
                    <img src="{{imageSrc}}" alt="">
                    <span class="nexus-shop-card-price {{priceClass}}">{{priceLabel}}</span>
                    <span class="nexus-shop-card-quantity">&times;{{quantity}}</span>
                    <span class="nexus-shop-card-name">{{name}}</span>
                    {{#if flowLabel}}<span class="nexus-shop-card-flow"><i class="fas fa-arrow-left"></i> {{flowLabel}}</span>{{/if}}
                    {{#if equipped}}<i class="fas fa-shield nexus-shop-card-state" title="Equipped"></i>{{/if}}
                </button>
                {{else}}
                <p class="nexus-shop-empty-message">Choose a trading inventory to see its physical items.</p>
                {{/each}}
            </div>
        </section>

        <section class="nexus-shop-inventory-panel nexus-shop-market-inventory">
            <header>
                <div><h3>Shop Inventory</h3><small>Click to buy one · Shift-click the whole stack</small></div>
                <span>{{stockCount}} items</span>
            </header>
            <div class="nexus-shop-grid nexus-shop-product-grid nexus-shop-compact-grid">
                {{#each shopCards}}
                <button type="button"
                    class="nexus-shop-item-card {{directionClass}} {{#if temporary}}is-temporary{{/if}} {{#if disabled}}is-disabled{{/if}}"
                    {{#if action}}data-action="{{action}}"{{/if}}
                    {{#if providerId}}data-provider-id="{{providerId}}" data-product-id="{{productId}}"{{/if}}
                    {{#if itemId}}data-item-id="{{itemId}}"{{/if}}
                    data-shop-tooltip="{{tooltipKey}}"
                    aria-label="{{ariaLabel}}">
                    <img src="{{imageSrc}}" alt="">
                    <span class="nexus-shop-card-price {{priceClass}}">{{priceLabel}}</span>
                    <span class="nexus-shop-card-quantity">&times;{{quantity}}</span>
                    <span class="nexus-shop-card-name">{{name}}</span>
                    {{#if flowLabel}}<span class="nexus-shop-card-flow"><i class="fas fa-arrow-right"></i> {{flowLabel}}</span>{{/if}}
                </button>
                {{else}}
                <p class="nexus-shop-empty-message">This Shop has no merchandise in stock.</p>
                {{/each}}
            </div>
        </section>
    </div>

    <footer class="nexus-shop-screen-footer nexus-shop-trade-footer nexus-shop-receipt-footer">
        <small>{{pricingBasis}}</small>
        <div class="nexus-shop-ledger">
            <span>Buying <strong>{{purchaseCount}} · {{purchaseTotalLabel}}</strong></span>
            <span>Selling <strong>{{saleCount}} · {{saleTotalLabel}}</strong></span>
            <span class="nexus-shop-net">{{#if netPays}}You pay{{else}}{{#if netReceives}}Shop pays you{{else}}Even trade{{/if}}{{/if}} <strong>{{netLabel}}</strong></span>
        </div>
        <div class="nexus-shop-checkout">
            <button type="button" data-action="completeTrade" {{#unless canComplete}}disabled{{/unless}}>
                {{#if busy}}<i class="fas fa-spinner fa-spin"></i> Completing Trade…
                {{else}}<i class="fas fa-scale-balanced"></i> Complete Trade{{#if hasLines}} — {{#if netPays}}Pay {{netLabel}}{{else}}{{#if netReceives}}Receive {{netLabel}}{{else}}Even Exchange{{/if}}{{/if}}{{/if}}{{/if}}
            </button>
            <small>{{completionReason}}</small>
        </div>
        <div class="nexus-shop-footer-actions">
            {{#if hasLines}}<button type="button" data-action="clearTrade" {{#if busy}}disabled{{/if}}>Clear Trade</button>{{/if}}
            <button type="button" data-action="closeShop">Leave Shop</button>
        </div>
    </footer>
    {{/if}}
</section>
