<div class="npc-hud {{#if isCollapsed}}collapsed{{/if}}">
    {{#unless isCollapsed}}
    <div class="npc-content">
        {{#if hasDescriptionBiography}}
        <div class="npc-description-biography accordion-container">
            <div class="npc-subtitle-container-c accordion-header active">
                <span class="npc-subtitle-text">{{localize "CityOfMist.terms.description"}} & {{localize "CityOfMist.terms.biography"}}</span>
            </div>
            <div class="accordion-content active">
                {{{descriptionBiography}}}
            </div>
        </div>
        {{/if}}

        <!-- Spectrums Section -->
        <div class="npc-subtitle-container-c">
            <div class="npc-subtitle-text">{{spectrumLabel}}</div>
        </div>
        <ul class="npc-spectrum-list">
        {{#each spectrums}}
            <li class="npc-spectrum {{activeSystem}}">
            {{name}}: <span class="npc-spectrum-tier">{{parseMaxTier system.maxTier}}</span>
            </li>
        {{/each}}
        </ul>
        {{#if (or (eq activeSystem "otherscape") (eq activeSystem "legend"))}}
        <!-- Limits -->
        <ul class="npc-list limit">
        {{#each moveGroups.Limits}}
            <li>
            <span class="npc-move-name limit">{{name}}</span> - 
            <span class="npc-move-description">{{parseStatus system.description}}</span>
            </li>
        {{/each}}
        </ul>
        {{/if}}

        <div class="npc-subtitle-container-c">
            <div class="create-npc-tag" title="{{localize "CityOfMist.tooltip.createStory"}}"><i class="fa-solid fa-plus" style="font-size: small;"></i> <i class="fa-duotone fa-regular fa-tags"></i></div>
            <div class="npc-subtitle-text">{{localize "CityOfMist.terms.tags"}} & {{localize "CityOfMist.terms.statuses"}}</div>
            <div class="create-npc-status" title="{{localize "CityOfMist.tooltip.createStatus"}}"><i class="fa-duotone fa-light fa-suitcase-medical"></i> <i class="fa-solid fa-plus" style="font-size: small;"></i></div>
        </div>  
        
        <div class="npc-tags-statuses-container">
            <ul class="npc-storytags-list">
                {{#each storyTags}}
                <div class="npc-story-tag {{this.cssClass}} no-wrap" data-id="{{this.id}}" data-temporary="{{this.temporary}}" data-permanent="{{this.permanent}}">
                    <span class="">{{this.tagName}} </span>
                    <span class="npc-tag-icon"> 
                        {{#if temporary}} <i class="fa-regular fa-hourglass-half"></i>{{/if}}
                        {{#if permanent}} <i class="fa-solid fa-gem"></i>{{/if}}
                    </span>
                </div>
                {{/each}}
            </ul>
            <ul class="npc-statuses-list">
                {{#each statuses}}
                <div>
                    <span class="npc-status {{statusType}}" data-status-name="{{statusName}}" data-tier="{{statusTier}}" data-status-id="{{this.id}}" data-temporary="{{temporary}}" data-permanent="{{permanent}}">
                        {{statusName}}-{{statusTier}} 
                        {{#if temporary}} <i class="fa-regular fa-hourglass-half"></i>{{/if}}
                        {{#if permanent}} <i class="fa-solid fa-gem"></i>{{/if}}
                    </span>
                </div>
                {{/each}}
            </ul>
        </div>

        {{!-- Custom Section for Legend special formatting --}}
        {{#if (and moveGroups.Custom.length (eq activeSystem "legend"))}}
        <ul class="custom-move-list">
            {{#each moveGroups.Custom}}
            <li>
                {{{legendCustom.processedDescription}}}
            </li>
            {{/each}}
        </ul>
        {{/if}}

        {{#if (neq activeSystem "legend")}}
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <div class="npc-collective-container">
                <span class="npc-collective-label">{{collectiveLabel}}</span>
                <div class="npc-collective-bar">
                    {{#each collectiveBar}}
                    <span class="npc-collective-segment" data-value="{{value}}">
                        {{#if (neq ../activeSystem "otherscape")}}
                        {{#if active}}
                            <i class="fa-solid fa-square-user"></i>
                        {{else}}
                            <i class="fa-regular fa-square"></i>
                        {{/if}}
                        {{else}}
                        {{#if active}}
                            <i class="fa-solid fa-circle-user"></i>
                        {{else}}
                            <i class="fa-regular fa-circle"></i>
                        {{/if}}
                        {{/if}}
                    </span>
                    {{/each}}
                </div>
            </div>

            <div class="npc-subtitle-container-r">
                <div class="mh-npc-influence">
            {{#if (neq this.totalInfluence 0)}}
            <i class="fa-solid fa-skull"></i>
            {{else}}<i class="fa-regular fa-skull"></i>
            {{/if}}: {{totalInfluence}}
                </div>
            </div>  
        </div>
        {{else}}
        <div style="display: flex; justify-content: flex-end; align-items: center;">
            <div class="npc-subtitle-container-r">
                <div class="mh-npc-influence">
            {{#if (neq this.totalInfluence 0)}}
            <i class="fa-solid fa-skull"></i>
            {{else}}<i class="fa-regular fa-skull"></i>
            {{/if}}: {{totalInfluence}}
                </div>
            </div>  
        </div>
        {{/if}}

        <div class="npc-moves-section">

        {{#if (eq activeSystem "city-of-mist")}}
            <!-- Default grouping for City of Mist -->
            {{#each moveGroups as |moves subtype|}}
            <div class="npc-move-type">
                <div class="npc-subtitle-container-l npc-subtitle-text">{{subtype}}</div>
                <ul class="npc-list">
                {{#each moves}}
                    <li>
                    {{#unless system.hideName}}
                        <span class="npc-move-name">{{name}}</span> - 
                    {{/unless}}
                    <span class="npc-move-description">{{parseStatus system.description}}</span>
                    </li>
                {{/each}}
                </ul>
            </div>
            {{/each}}
        {{/if}}

        {{#if (eq activeSystem "otherscape")}}
            <!-- Specials -->
            {{#if moveGroups.Specials.length}}
            <div class="npc-subtitle-container-l">
                <div class="npc-subtitle-text">Specials</div>
            </div>
            <ul class="npc-list">
            {{#each moveGroups.Specials}}
                <li class="">
                <span class="npc-move-name">{{name}}</span> - 
                <span class="npc-move-description">{{parseStatus system.description}}</span>
                </li>
            {{/each}}
            </ul>
            {{/if}}

            <!-- Custom Moves -->
            {{#if moveGroups.Custom.length}}
            <div class="npc-subtitle-container-l">
                <div class="npc-subtitle-text">Custom Moves</div>
            </div>
            <ul class="npc-list">
            {{#each moveGroups.Custom}}
                <li class="">
                <span class="npc-move-name">{{name}}</span> - 
                <span class="npc-move-description">{{parseStatus system.description}}</span>
                </li>
            {{/each}}
            </ul>
            {{/if}}

            <!-- Threats -->
            <div class="npc-subtitle-container-l">
                <div class="npc-subtitle-text">›Threats / »Consequences</div>
            </div>
            {{#each moveGroups.Threats}}
            <div class="npc-threat">
                <span class="npc-tc-marker">›</span>
                <span class="npc-threat-description">{{parseStatus system.description}}</span>
                <ul>
                {{#each consequences}}
                    <li>
                    <span class="npc-tc-marker">»</span>
                    <span class="npc-move-description">{{parseStatus system.description}}</span>
                    </li>
                {{/each}}
                </ul>
                {{!-- <hr class="npc-hr"> --}}
            </div>
            {{/each}}
        {{/if}}

        {{#if (eq activeSystem "legend")}}
            <!-- Specials -->
            {{#if moveGroups.Specials.length}}
            <div class="npc-subtitle-container-l">
                <div class="npc-subtitle-text">Specials</div>
            </div>
            <ul class="npc-list">
            {{#each moveGroups.Specials}}
                <li class="">
                <span class="npc-move-name">{{name}}</span> - <span class="npc-move-description">{{parseStatus system.description}}</span>
                </li>
            {{/each}}
            </ul>
            {{/if}}

            <!-- Threats -->
            <div class="npc-subtitle-container-l">
                <div class="npc-subtitle-text">›Threats / »Consequences</div>
            </div>
            {{#each moveGroups.Threats}}
            <div class="npc-threat">
                <span class="npc-threat-name">{{name}}</span>
                <span class="npc-threat-description">{{parseStatus system.description}}</span>
                <ul>
                {{#each consequences}}
                    <li>
                    <span class="npc-tc-marker">
                        <object data="modules/mist-hud/ui/icons/litm_fail_icn.svg" type="image/svg+xml"></object>
                    </span>
                    <span class="npc-move-description">{{parseStatus system.description}}</span>
                    </li>
                {{/each}}
                </ul>
                {{!-- <hr class="npc-hr"> --}}
            </div>
            {{/each}}
        {{/if}}

        </div>

    </div>
    {{/unless}}
</div>