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">
        <a class="death-roll-btn" data-tooltip="DAGGERHEART.UI.Tooltip.makeDeathMove" {{#if
            isDeath}}data-action="makeDeathMove" {{/if}}><i class="fas fa-skull death-save"></i></a>
    </div>

    <div class="info-section">
        <div class="resources-section">
            <div class="status-bar">
                <div class='status-value'>
                    <p><input class="bar-input" name="system.resources.hitPoints.value"
                            value="{{document.system.resources.hitPoints.value}}" type="number"></p>
                    <p>/</p>
                    <p class="bar-label">{{document.system.resources.hitPoints.max}}</p>
                </div>
                <progress
                    class='progress-bar'
                    value='{{document.system.resources.hitPoints.value}}'
                    max='{{document.system.resources.hitPoints.max}}'
                ></progress>
                <div class="status-label">
                    <h4>HP</h4>
                </div>

            </div>
            <div class="status-bar">
                <div class='status-value'>
                    <p><input class="bar-input" name="system.resources.stress.value"
                            value="{{document.system.resources.stress.value}}" type="number"></p>
                    <p>/</p>
                    <p class="bar-label">{{document.system.resources.stress.max}}</p>
                </div>
                <progress
                    class='progress-bar stress-color'
                    value='{{document.system.resources.stress.value}}'
                    max='{{document.system.resources.stress.max}}'
                ></progress>
                <div class="status-label">
                    <h4>Stress</h4>
                </div>
            </div>
        </div>
        <div class="status-section">
            <div class="status-number">
                <div class='status-value'>
                    <p>{{document.system.proficiency}}</p>
                </div>
                <div class="status-label">
                    <h4>Proficiency</h4>
                </div>
            </div>

            {{#if document.system.armor.system.marks}}
                <div class="status-bar armor-slots">
                    <div class='status-value'>
                        <p><input class="bar-input armor-marks-input" value="{{document.system.armor.system.marks.value}}" type="number"></p>
                        <p>/</p>
                        <p class="bar-label">{{document.system.armorScore}}</p>
                    </div>
                    <progress
                        class='progress-bar stress-color'
                        value='{{document.system.armor.system.marks.value}}'
                        max='{{document.system.armorScore}}'
                    ></progress>
                    <div class="status-label">
                        <h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
                    </div>
                </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.evasion}}</p>
                </div>
                <div class="status-label">
                    <h4>Evasion</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="equipment-section">
        <div class="title">
            <side-line-div class="invert"></side-line-div>
            <h3>Equipment</h3>
            <side-line-div></side-line-div>
        </div>
        <ul class="items-sidebar-list">
            {{#each document.items as |item|}}
            {{#if item.system.equipped}}
            {{> 'daggerheart.inventory-item'
            item=item
            type=item.type
            hideTags=true
            hideDescription=true
            hideResources=true
            noExtensible=true
            }}
            {{/if}}
            {{/each}}
        </ul>
    </div>
    <div class="loadout-section">
        <div class="title">
            <side-line-div class="invert"></side-line-div>
            <h3>Loadout</h3>
            <side-line-div></side-line-div>
        </div>
        <ul class="items-sidebar-list">
            {{#each document.system.domainCards.loadout as |card|}}
              {{> 'daggerheart.inventory-item'
                item=card
                type='domainCard'
                hideTags=true
                hideDescription=true
                hideResources=true
                noExtensible=true
            }}

            {{/each}}
        </ul>
    </div>
    <div class="experience-section">
        <div class="title">
            <side-line-div class="invert"></side-line-div>
            <h3>Experience</h3>
            <side-line-div></side-line-div>
        </div>
        <div class="experience-list">
            {{#each document.system.experiences as |experience id|}}
            <div class="experience-row">
                <div class="experience-value">
                    +{{experience.total}}
                </div>
                <input name="system.experiences.{{id}}.name" data-experience={{id}}
                    value="{{experience.name}}" type="text" />
                <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>
</aside>