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

<header class="character-header-sheet">
    <line-div></line-div>
    <div class="name-row">
        <h1 class="actor-name input" contenteditable="plaintext-only" data-property="name" placeholder="{{localize "DAGGERHEART.GENERAL.actorName"}}">{{source.name}}</h1>
        <div class='level-div'>
            <h3 class='label'>
                {{#if @root.editable}}
                    {{#if document.system.needsCharacterSetup}}
                        <button
                            type="button"
                            class="level-button glow"
                            data-action="levelManagement"
                        >
                            {{localize "DAGGERHEART.APPLICATIONS.CharacterCreation.buttonTitle"}}
                        </button>
                    {{else if document.system.levelData.canLevelUp}}
                        <button
                            type="button"
                            class="level-button glow" data-tooltip="{{localize "DAGGERHEART.ACTORS.Character.levelUp"}}"
                            data-action="levelManagement"
                        >
                            <i class="fa-solid fa-angles-up"></i>
                        </button>
                    {{/if}}
                {{/if}}
                {{#unless document.system.needsCharacterSetup}}
                    {{localize 'DAGGERHEART.GENERAL.level'}}
                    <input type="text" data-dtype="Number" class="level-value" value={{#if document.system.needsCharacterSetup}}0{{else}}{{document.system.levelData.level.changed}}{{/if}} {{#if document.system.needsCharacterSetup}}disabled{{/if}} />
                {{/unless}}
            </h3>
        </div>
    </div>
    <div class="character-details">
        <div>
            {{#if document.system.class.value}}
                <span data-action="editDoc" data-item-uuid="{{document.system.class.value.uuid}}">{{document.system.class.value.name}}</span>
            {{else}}
                <span class="missing-header-feature" data-action="openPack" data-key="classes">{{localize 'TYPES.Item.class'}}</span>
            {{/if}}
            <span class="dot">•</span>
            {{#if document.system.class.subclass}}
                <span data-action="editDoc" data-item-uuid="{{document.system.class.subclass.uuid}}">{{document.system.class.subclass.name}}</span>
            {{else}}
                <span class="missing-header-feature" data-action="openPack" data-key="subclasses">{{localize 'TYPES.Item.subclass'}}</span>
            {{/if}}
            <span class="dot">•</span>
            {{#if document.system.community}}
                <span data-action="editDoc" data-item-uuid="{{document.system.community.uuid}}">{{document.system.community.name}}</span>
            {{else}}
                <span class="missing-header-feature" data-action="openPack" data-key="communities">{{localize 'TYPES.Item.community'}}</span>
            {{/if}}
            <span class="dot">•</span>
            {{#if document.system.ancestry}}
                <span data-action="editDoc" data-item-uuid="{{document.system.ancestry.uuid}}">{{document.system.ancestry.name}}</span>
            {{else}}
                <span class="missing-header-feature" data-action="openPack" data-key="ancestries">{{localize 'TYPES.Item.ancestry'}}</span>
            {{/if}}
        </div>

        {{#if document.system.multiclass.value}}
            <div class="multiclass">
                {{#if document.system.multiclass.value}}
                    <span data-action="editDoc"data-item-uuid="{{document.system.multiclass.value.uuid}}">{{document.system.multiclass.value.name}}</span>
                {{else}}
                    <span data-action="openPack" data-key="classes">{{localize 'DAGGERHEART.GENERAL.multiclass'}}</span>
                {{/if}}
                <span class="dot">•</span>
                {{#if document.system.multiclass.subclass}}
                    <span data-action="editDoc" data-item-uuid="{{document.system.multiclass.subclass.uuid}}">{{document.system.multiclass.subclass.name}}</span>
                {{else}}
                    <span class="missing-header-feature" data-action="openPack" data-key="subclasses">{{localize 'TYPES.Item.subclass'}}</span>
                {{/if}}
            </div>
        {{/if}}


    </div>

    <div class="character-row">
        <div class="resource-section">
            <div class="hope-section">
                <h4>{{localize "DAGGERHEART.GENERAL.hope"}}</h4>
                {{#times document.system.resources.hope.max}}
                    <span class='hope-value' data-action='toggleHope' data-value="{{add this 1}}">
                        {{#if (gte ../document.system.resources.hope.value (add this 1))}}
                            <i class='fa-solid fa-diamond'></i>
                        {{else}}
                            <i class='fa-regular fa-circle'></i>
                        {{/if}}
                    </span>
                {{/times}}
                {{#times document.system.scars}}
                    <span class='hope-value scar'>
                        <i class='fa-regular fa-ban'></i>
                    </span>
                {{/times}}
                {{#if hasExtraResources}}<a type="button" class="resource-manager" data-action="toggleResourceManagement"><i class="fa-solid fa-angle-down"></i></a>{{/if}}
            </div>
        </div>
        {{#if document.system.class.value}}
            <div class="domains-section">
                {{#each document.system.domainData as |data|}}
                    <div class="domain">
                        <img src="{{data.src}}" alt="" data-tooltip="{{data.label}}" />
                    </div>
                {{/each}}
            </div>
        {{/if}}
        <div class="downtime-section">
            {{#if document.parties.size}}
                <button type="button" data-action="viewParty" data-tooltip="DAGGERHEART.ACTORS.Character.viewParty">
                    <i class="fa-solid fa-fw fa-users"></i>
                </button>
            {{/if}}
            {{#if @root.editable}}
                <button type="button" data-action="useDowntime" data-type="shortRest" data-tooltip="DAGGERHEART.APPLICATIONS.Downtime.shortRest.title">
                    <i class="fa-solid fa-fw fa-utensils"></i>
                </button>
                <button type="button" data-action="useDowntime" data-type="longRest" data-tooltip="DAGGERHEART.APPLICATIONS.Downtime.longRest.title">
                    <i class="fa-solid fa-fw fa-bed"></i>
                </button>
            {{/if}}
        </div>
    </div>

    <div class="character-traits">
        {{#each this.attributes as |attribute key|}} 
            {{!-- <div class="trait" data-tooltip="<b>{{attribute.label}}:</b><br>{{#each attribute.verbs}}{{this}}<br>{{/each}}" data-action="rollAttribute" data-attribute="{{key}}" data-value="{{attribute.value}}">

                {{#if attribute.tierMarked}}
                    <div class="tier-mark">
                        <i class='fa-solid fa-circle' inert></i>
                    </div>
                {{/if}}
            </div> --}}
            <div class="trait {{#if isSpellcasting}}with-spellcasting{{/if}}" data-tooltip="<b>{{attribute.label}}:</b><br>{{#each attribute.verbs}}{{this}}<br>{{/each}}" data-action="rollAttribute" data-attribute="{{key}}" data-value="{{attribute.value}}">
                <div class="trait-name">
                    <div class="tier-mark {{#if attribute.tierMarked}}marked{{/if}}"></div>
                    <span>{{attribute.label}}</span>
                </div>
                <div class="trait-value-area">
                    <svg width="52" height="46" viewBox="0 0 52 46" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0 0H52L51.0714 18.254L48.6808 24.0952L47.5745 39.9596L26 46L4.42553 39.9596L3.31915 24.0952L0.928571 18.254L0 0Z" fill="var(--color-border)"/>
                        <path d="M2.61192 6.55748C2.28358 3.03888 5.05207 0 8.58596 0H43.414C46.9479 0 49.7164 3.03887 49.3881 6.55747L46.8083 34.203C46.5652 36.808 44.6622 38.9552 42.1052 39.5094L27.2709 42.7245C26.4334 42.9061 25.5666 42.9061 24.7291 42.7245L9.89482 39.5094C7.33785 38.9552 5.43478 36.808 5.19169 34.203L2.61192 6.55748Z" fill="var(--background)"/>
                    </svg>
                    <div class="trait-value">
                        {{#if (gt attribute.value 0)}}
                            <span>+{{attribute.value}}</span>
                        {{else}}
                            <span>{{attribute.value}}</span>
                        {{/if}}
                    </div>
                    {{#if isSpellcasting}}
                        <div class="spellcasting-mark" data-tooltip="DAGGERHEART.ITEMS.Subclass.spellcastingTrait">
                            <i class="fa-solid fa-wand-magic-sparkles" inert></i>
                        </div>
                    {{/if}}
                </div>
            </div>
        {{/each}}
    </div>

    {{#> 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' }}
        <button type="button" data-action="openSettings" data-tooltip-text="{{localize "DAGGERHEART.UI.Tooltip.openSheetSettings"}}"><i class="fa-solid fa-wrench"></i></button>
    {{/'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs'}}
</header>