<div class="npc-influence-manager">
  <header class="influence-summary">
    <div class="influence-info">
      <h4>Scene: <span class="scene-name">{{currentSceneName}}</span></h4>
      <h2>Total: <span class="influence-value total-influence {{#if totalInfluence}}{{#if (lt totalInfluence 0)}}negative{{else}}positive{{/if}}{{/if}}"><i class="fa-solid fa-skull"></i> {{totalInfluence}}</span></h2>
    </div>
    <div class="controls">
      <button class="sync-all-npcs" title="Synchronize all NPCs in the current scene"><i class="fas fa-sync"></i> Sync Scene</button>
      <button class="refresh-ui" title="Refresh this display"><i class="fas fa-redo"></i> Refresh</button>
    </div>
  </header>
  
  <nav class="tabs">
    <a class="item" data-tab="active"><i class="fas fa-bolt"></i> Influencing NPCs ({{activeSceneNpcs.length}})</a>
    <a class="item" data-tab="all"><i class="fas fa-users"></i> All in Scene ({{sceneNpcs.length}})</a>
  </nav>
  
  <section class="content">
    <div class="tab" data-tab="active">
      {{#if hasActiveSceneNpcs}}
        <ul class="npc-list">
          {{#each activeSceneNpcs}}
            <li class="npc-item in-scene {{#if isLinked}}linked{{else}}unlinked{{/if}}" data-npc-id="{{id}}" data-token-id="{{tokenId}}">
              <img class="npc-image" src="{{img}}" alt="{{name}}">
              <div class="influence-value {{#if influence}}{{#if (lt influence 0)}}negative{{else}}positive{{/if}}{{/if}}">
                {{influence}}
              </div>
              <div class="npc-info">
                <h3 class="npc-name">
                  {{name}} 
                  {{!-- uncomment line below if you want to inform that the npc is not linked --}}
                  {{!-- {{#unless isLinked}}<span class="token-badge">Token</span>{{/unless}} --}}
                  {{#if hasCollectiveSize}}<span class="scale-badge">Scale: {{collectiveSize}}</span>{{/if}}
                </h3>
                <div class="npc-items-container">
                  {{#if hasTags}}
                    <div class="npc-tags">
                      {{#each tags}}
                        <span class="npc-story-tag {{state}} not-clickable {{#if isBurned}}burned{{/if}}">{{name}}</span>
                      {{/each}}
                    </div>
                  {{/if}}
                  {{#if hasStatuses}}
                    <div class="npc-statuses">
                      {{#each statuses}}
                        <span class="npc-status {{state}} not-clickable">{{name}}-{{tier}}</span>
                      {{/each}}
                    </div>
                  {{/if}}
                </div>
              </div>
            </li>
          {{/each}}
        </ul>
      {{else}}
        <p class="empty-state">No NPCs are currently providing influence. Use the "All in Scene" tab to see all available NPCs.</p>
      {{/if}}
    </div>
    
    <div class="tab" data-tab="all">
      {{#if hasSceneNpcs}}
        <ul class="npc-list">
          {{#each sceneNpcs}}
            <li class="npc-item {{#if isInCurrentScene}}in-scene{{/if}} {{#if isLinked}}linked{{else}}unlinked{{/if}}" data-npc-id="{{id}}" data-token-id="{{tokenId}}">
              <img class="npc-image" src="{{img}}" alt="{{name}}">
              <div class="influence-value {{#if influence}}{{#if (lt influence 0)}}negative{{else}}positive{{/if}}{{/if}}">
                {{#if hasInfluence}}{{influence}}{{else}}&mdash;{{/if}}
              </div>
              <div class="npc-info">
                <h3 class="npc-name">
                  {{name}} 
                  {{#unless isLinked}}<span class="token-badge">Token</span>{{/unless}}
                  {{#if hasCollectiveSize}}<span class="scale-badge">Scale: {{collectiveSize}}</span>{{/if}}
                </h3>
                <div class="npc-items-container">
                  {{#if hasTags}}
                    <div class="npc-tags">
                      {{#each tags}}
                        <span class="npc-story-tag {{state}} not-clickable {{#if isBurned}}burned{{/if}}">{{name}}</span>
                      {{/each}}
                    </div>
                  {{/if}}
                  {{#if hasStatuses}}
                    <div class="npc-statuses">
                      {{#each statuses}}
                        <span class="npc-status {{state}} not-clickable">{{name}}-{{tier}}</span>
                      {{/each}}
                    </div>
                  {{/if}}
                </div>
              </div>
            </li>
          {{/each}}
        </ul>
      {{else}}
        <p class="empty-state">No NPCs found in the current scene.</p>
      {{/if}}
    </div>
  </section>
</div>