<div class="nexus-browser-pill-shell npc-pill-shell has-site-icon {{#if isPlayerHidden}}is-player-hidden{{/if}} {{#if hasFactionAccent}}has-faction-accent{{/if}}" style="{{#if hasFactionAccent}}--faction-accent: {{factionAccent}};{{/if}}" title="{{name}}" data-node-id="{{id}}" data-entity-id="{{entityId}}" data-entity-type="{{entityType}}" data-name="{{name}}" data-search-text="{{searchText}}" data-image-src="{{imageSrc}}" data-placement-image-src="{{placementImageSrc}}" data-connection-target-id="{{connections.nodeId}}" data-player-visibility-label="{{playerVisibilityLabel}}" data-player-visibility-icon="{{playerVisibilityIcon}}" {{#if @root.isGM}}draggable="true" data-nexus-entity-drag="true"{{/if}}>
    <span class="nexus-browser-pill-emblem npc-pill-portrait" style="--npc-accent: {{accent}};">
        {{#if imageSrc}}
        <img src="{{imageSrc}}" alt="{{name}}">
        {{else}}
        <i class="fas fa-user"></i>
        {{/if}}
    </span>
    <div class="nexus-browser-pill npc-pill" style="--npc-accent: {{accent}};">
        <span class="nexus-browser-pill-overlay"></span>
        <span class="nexus-browser-pill-copy">
            <span class="nexus-browser-pill-name">
                {{#if isPlayerHidden}}<i class="fa-solid fa-eye-slash" aria-hidden="true"></i>{{/if}}
                {{name}}
            </span>
            <span class="nexus-browser-pill-type">{{subtitle}}</span>
        </span>
        <span class="nexus-browser-pill-actions">
            {{#if hasOptions}}
            <span class="nexus-browser-pill-options">
                <button type="button" class="nexus-browser-pill-action secondary" data-action="toggleNpcOptions" data-entity-id="{{entityId}}" data-player-visibility-label="{{playerVisibilityLabel}}" data-player-visibility-icon="{{playerVisibilityIcon}}" title="Person options" aria-label="Person options" aria-expanded="false">
                    <i class="fas fa-ellipsis"></i>
                </button>
            </span>
            {{/if}}
            {{#if connections.nodeId}}
            <button type="button" class="nexus-browser-pill-action secondary nexus-browser-connection-toggle {{#if connections.expanded}}active{{/if}} {{#if connections.hasConnections}}has-count{{/if}}" data-action="toggleLineageConnections" data-connection-target-id="{{connections.nodeId}}" title="Show connections" aria-label="Show connections">
                <i class="fas fa-share-nodes"></i>
                <span>{{connections.total}}</span>
            </button>
            {{/if}}
        </span>
    </div>
    {{#if connections.expanded}}
    <div class="nexus-browser-connection-drawer" data-connection-target-id="{{connections.nodeId}}">
        {{#each connections.groups}}
        <section class="nexus-browser-connection-group {{#if hiddenForPlayers}}is-player-hidden{{/if}}" data-connection-category-id="{{id}}" style="--connection-category-color: {{color}};">
            <h4>
                <i class="{{icon}}"></i>
                <span>{{label}}</span>
                {{#if hiddenForPlayers}}<i class="fa-solid fa-eye-slash nexus-browser-connection-group-hidden-icon" aria-hidden="true"></i>{{/if}}
                {{#if @root.isGM}}
                <span class="nexus-browser-connection-group-order">
                    <button type="button" data-action="openLineageConnectionGroupActions" data-connection-target-id="{{../nodeId}}" data-connection-category-id="{{id}}" title="Group actions" aria-label="Group actions">
                        <i class="fas fa-ellipsis"></i>
                    </button>
                    {{#if canMoveUp}}
                    <button type="button" data-action="moveLineageConnectionGroup" data-connection-target-id="{{../nodeId}}" data-connection-category-id="{{id}}" data-connection-group-move="-1" title="Move group up" aria-label="Move group up">
                        <i class="fas fa-chevron-up"></i>
                    </button>
                    {{/if}}
                    {{#if canMoveDown}}
                    <button type="button" data-action="moveLineageConnectionGroup" data-connection-target-id="{{../nodeId}}" data-connection-category-id="{{id}}" data-connection-group-move="1" title="Move group down" aria-label="Move group down">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    {{/if}}
                </span>
                {{/if}}
                <strong>{{count}}</strong>
            </h4>
            {{#each cards}}
            <div class="nexus-browser-connection-row-wrap {{#if isPlayerHidden}}is-player-hidden{{/if}}" style="--connection-category-color: {{color}};">
            <button type="button" class="nexus-browser-connection-row {{#if missing}}missing{{/if}} {{#if isPlayerHidden}}is-player-hidden{{/if}}" data-action="openLineageConnection" data-connection-edge-id="{{edgeId}}" data-connection-node-id="{{nodeId}}" {{#if @root.isGM}}draggable="true"{{/if}}>
                <span class="nexus-browser-connection-image">
                    {{#if img}}
                    <img src="{{img}}" alt="{{name}}">
                    {{else}}
                    <i class="{{icon}}"></i>
                    {{/if}}
                </span>
                <span class="nexus-browser-connection-copy">
                    <strong>
                        {{#if isPlayerHidden}}<i class="fa-solid fa-eye-slash" aria-hidden="true"></i>{{/if}}
                        {{name}}
                    </strong>
                    <em>{{subtitle}}</em>
                    {{#if note}}
                    <small>{{note}}</small>
                    {{/if}}
                </span>
            </button>
            {{#if @root.isGM}}
            <button type="button" class="nexus-browser-connection-row-action" data-action="openLineageConnectionActions" data-connection-edge-id="{{edgeId}}" data-connection-node-id="{{nodeId}}" title="Connection actions" aria-label="Connection actions">
                <i class="fas fa-ellipsis"></i>
            </button>
            {{/if}}
            </div>
            {{/each}}
        </section>
        {{/each}}
    </div>
    {{/if}}
</div>
