daggerheart/templates/sheets/actors/character/sidebar.hbs

<aside class="character-sidebar-sheet">
    <div class="portrait {{#if isDeath}}death-roll{{/if}}">
        <img src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
        {{#if document.system.spellcastModifierTrait.key}}
            <div class="icons-list">
                <span class="spellcast-icon {{#if isDeath}}no-label{{/if}}">
                    <span class="spellcast-label">
                        {{localize "DAGGERHEART.ITEMS.Subclass.spellcastingTrait"}}: 
                        {{localize (concat 'DAGGERHEART.CONFIG.Traits.' document.system.spellcastModifierTrait.key '.short')}}
                    </span>
                    <i class="fa-solid fa-wand-sparkles"></i>
                </span>
            </div>
        {{/if}}
        <a class="death-roll-btn" data-tooltip="DAGGERHEART.UI.Tooltip.makeDeathMove" {{#if
            isDeath}}data-action="makeDeathMove" {{/if}}><i class="fa-solid fa-skull death-save"></i></a>
    </div>
    <div class="info-section {{#if useResourcePips}}pip-display{{/if}}">
        <div class="resources-section">
            {{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.hitPoints label="DAGGERHEART.GENERAL.HitPoints.short" key="system.resources.hitPoints.value" action="toggleHitPoints" }}
            {{> "systems/daggerheart/templates/sheets/global/partials/resource-bar.hbs" resource=resources.stress label="DAGGERHEART.GENERAL.stress" key="system.resources.stress.value" action="toggleStress" }}
        </div>
        <div class="status-section {{#if useResourcePips}}pip-display{{/if}}">
            <div class="status-number">
                <div class='status-value'>
                    <p>{{document.system.evasion}}</p>
                </div>
                <div class="status-label">
                    <h4>{{localize "DAGGERHEART.GENERAL.evasion"}}</h4>
                </div>
            </div>

            {{#if document.system.armorScore.max}}
                <div class="status-bar armor-slots">
                    {{#if useResourcePips}}
                    <div class='slot-value'>
                        <div class="slot-bar">
                        {{#times document.system.armorScore.max}}
                            <a class='armor-slot' data-action='toggleArmor' data-value="{{add this 1}}">
                                {{#if (gte ../document.system.armorScore.value (add this 1))}}
                                    <i class="fa-solid fa-shield"></i>
                                {{else}}
                                    <i class="fa-solid fa-shield-halved"></i>
                                {{/if}}
                            </a>
                        {{/times}}
                        </div>
                        <a class="slot-label" data-action="toggleArmorMangement">
                            <span class="label">{{localize "DAGGERHEART.GENERAL.armorSlots"}}</span>
                            <div class="slot-value-container">
                                <span class="value">{{document.system.armorScore.value}} / {{document.system.armorScore.max}}</span>
                                <i class="fa-solid fa-gear"></i>
                            </div>
                        </a> 
                    </div>
                    {{else}}
                    <div class='status-value'>
                        <input class="bar-input armor-marks-input" value="{{document.system.armorScore.value}}" type="number">
                        <span>/</span>
                        <span class="bar-label">{{document.system.armorScore.max}}</span>
                    </div>
                    <progress
                        class='progress-bar stress-color'
                        value='{{document.system.armorScore.value}}'
                        max='{{document.system.armorScore.max}}'
                    ></progress>
                    <a class="status-label" data-action="toggleArmorMangement">
                        <h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
                        <i class="fa-solid fa-gear"></i>
                    </a>
                    {{/if}}
                </div>
            {{else}}
                <div class="status-number armor-slots">
                    <div class='status-value'>
                        <p>-</p>
                    </div>
                    <div class="status-label">
                        <h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
                    </div>
                </div>
            {{/if}}

            <div class="status-number">
                <div class='status-value'>
                    <p>{{document.system.proficiency}}</p>
                </div>
                <div class="status-label">
                    <h4>{{localize "DAGGERHEART.GENERAL.proficiency"}}</h4>
                </div>
            </div>
        </div>
        <div class="threshold-section">
            <h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.minor"}}</h4>
            <h4 class="threshold-value">{{document.system.damageThresholds.major}}</h4>
            <h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.major"}}</h4>
            <h4 class="threshold-value">{{document.system.damageThresholds.severe}}</h4>
            <h4 class="threshold-label">{{localize "DAGGERHEART.GENERAL.DamageThresholds.severe"}}</h4>
        </div>
    </div>

    <div class="shortcut-items-section">
        <div class="equipment-section">
            <div class="title">
                <side-line-div class="invert"></side-line-div>
                <h3>{{localize "DAGGERHEART.GENERAL.equipment"}}</h3>
                <side-line-div></side-line-div>
            </div>
            <ul class="items-sidebar-list">
                {{#if document.system.usedUnarmed}}
                {{> 'daggerheart.inventory-item-compact'
                    item=document.system.usedUnarmed
                    type='attack'
                }}
                {{/if}}
                {{#each document.items as |item|}}
                {{#if item.system.equipped}}
                {{> 'daggerheart.inventory-item-compact'
                    item=item
                    type=item.type
                }}
                {{/if}}
                {{/each}}
            </ul>
        </div>
        <div class="loadout-section">
            <div class="title">
                <side-line-div class="invert"></side-line-div>
                <h3>{{localize "DAGGERHEART.GENERAL.loadout"}}</h3>
                <side-line-div></side-line-div>
            </div>
            <ul class="items-sidebar-list">
                {{#each document.system.domainCards.loadout as |card|}}
                {{> 'daggerheart.inventory-item-compact'
                    item=card
                    type='domainCard'
                }}

                {{/each}}
            </ul>
        </div>
        <div class="experience-section">
            <div class="title">
                <side-line-div class="invert"></side-line-div>
                <h3>{{localize "DAGGERHEART.GENERAL.experience.single"}}</h3>
                <side-line-div></side-line-div>
            </div>
            <div class="experience-list">
                {{#each document.system.experiences as |experience id|}}
                    <div class="experience-row" data-tooltip-text="{{experience.description}}">
                        <span class="experience-value">
                            {{numberFormat experience.value sign=true}}
                        </span>
                        <span class="experience-name">{{experience.name}}</span>
                        <div class="controls">
                            <a data-action="sendExpToChat" data-type="experience" data-id="{{id}}">
                                <i class="fa-regular fa-message"></i>
                            </a>
                        </div>
                    </div>
                {{/each}}
            </div>
        </div>
    </div>
</aside>