<header class="char-header" data-tooltip-direction="UP">
    <section class="char-details">
        <h1 class="char-name">
            <input name="name" type="text" value="{{actor.name}}" placeholder="{{localize "PF2E.CharacterNamePlaceholder"}}" spellcheck="false" />
        </h1>
        {{#with headerResource as |resource|}}
            <div class="dots">
                <span class="label">{{localize label}}</span>
                <span
                    data-action="adjust-resource"
                    data-resource="{{resource.slug}}"
                    data-tooltip="{{localize
                        'PF2E.Actor.ResourceRatio'
                        value=resource.value
                        max=resource.max
                        resource=(localize resource.label)
                    }}"
                >
                    {{#times resource.max as |idx|}}
                        {{#if (gt resource.value idx)}}
                            <i class="fa-solid {{resource.icon}}"></i>
                        {{else}}
                            <i class="fa-regular fa-circle"></i>
                        {{/if}}
                    {{/times}}
                </span>
            </div>
        {{/with}}
    </section>
    <section class="char-level">
        <div class="level">
            <label>{{localize "PF2E.LevelLabel"}}</label>
            <input name="system.details.level.value" type="number" value="{{data.details.level.value}}" placeholder="1" size="2" />
        </div>
        <div class="exp-data">
            <div class="exp-input">
                <input name="system.details.xp.value" type="text" value="{{data.details.xp.value}}" data-dtype="Number" data-allow-delta data-min="0" placeholder="0" size="4" />
                <span class="max"> / </span>
                <input name="system.details.xp.max" type="text" value="{{data.details.xp.max}}" data-dtype="Number" placeholder="1000" size="4" />
            </div>
            <progress value="{{data.details.xp.pct}}" max="100"></progress>
        </div>
    </section>
</header>
