<header class="npc-dossier-header faction-dossier-header shop-dossier-profile-header" style="--npc-accent: {{profile.accent}};">
    <div class="npc-dossier-portrait shop-dossier-portrait">
        {{#if profile.imageSrc}}<img src="{{profile.imageSrc}}" alt="{{profile.name}}">{{else}}<i class="fas fa-store"></i>{{/if}}
    </div>
    <div class="npc-dossier-title">
        <h2>{{profile.name}}</h2>
        <p>{{profile.subtitle}}</p>
        {{#if profile.showTabs}}
        <nav class="npc-dossier-tabs" aria-label="Shop dossier tabs">
            <button type="button" class="{{#if profile.tabs.isProfileTab}}active{{/if}}" data-action="setShopDossierTab" data-tab="profile">Stock</button>
            <button type="button" class="{{#if profile.tabs.isJournalTab}}active{{/if}}" data-action="setShopDossierTab" data-tab="journal">Journal</button>
        </nav>
        {{/if}}
    </div>
    {{#if profile.showActions}}
    <button type="button" class="npc-dossier-action" data-action="openShopActions" title="Shop actions" aria-label="Shop actions"><i class="fas fa-ellipsis"></i></button>
    {{/if}}
</header>

{{#if profile.showBody}}
<section class="shop-dossier-stock-surface" aria-label="Shop stock preview">
    {{#if profile.stock.length}}
    <div class="shop-dossier-stock-grid">
        {{#each profile.stock}}
        <article class="shop-dossier-stock-card" title="{{name}}" aria-label="{{ariaLabel}}">
            <img src="{{imageSrc}}" alt="">
            <span class="shop-dossier-stock-price">{{priceLabel}}</span>
            <span class="shop-dossier-stock-quantity">&times;{{quantity}}</span>
        </article>
        {{/each}}
    </div>
    {{/if}}
</section>
{{/if}}
