<header class="sheet-header">

    {{!-- Name & Class --}}
    <div class="left optional-ability-{{ abilityRows.optional }}">

        {{!-- Name --}}
        {{#if editable}}
        <input type="text" name="name" class="document-name uninput" value="{{ actor._source.name }}">
        {{else}}
        <div class="document-name">{{ actor.name }}</div>
        {{/if}}

        {{!-- Class --}}
        <div class="class roboto-upper">{{ labels.class }}</div>
    </div>

    {{!-- Level, Inspiration, XP, & Buttons --}}
    <div class="right">

        {{!-- Level --}}
        <div class="level-badge badge" aria-label="{{ localize 'DND5E.LevelNumber' level=system.details.level }}">
            {{ system.details.level }}
        </div>

        {{!-- Inspiration --}}
        <button type="button" class="inspiration unbutton" data-action="toggleInspiration"
                aria-label="{{ localize 'DND5E.Inspiration' }}" data-tooltip="DND5E.Inspiration"
                aria-pressed="{{ system.attributes.inspiration }}"></button>

        {{!-- Epic Boons --}}
        {{#if system.details.xp.boonsEarned}}
        <div class="boon-badge badge" data-tooltip="{{ epicBoonsEarned }}" aria-label="{{ epicBoonsEarned }}">
            {{ dnd5e-numberFormat system.details.xp.boonsEarned numerals=true }}
        </div>
        {{/if}}

        <div>
            {{!-- Resting & Special Traits --}}
            {{#if showRests}}
            <div class="sheet-header-buttons">
                <button type="button" class="short-rest gold-button" data-action="rest" data-type="short"
                        data-tooltip="DND5E.REST.Short.Label" aria-label="{{ localize 'DND5E.REST.Short.Label' }}">
                    <i class="fas fa-utensils" inert></i>
                </button>
                <button type="button" class="long-rest gold-button" data-action="rest" data-type="long"
                        data-tooltip="DND5E.REST.Long.Label" aria-label="{{ localize 'DND5E.REST.Long.Label' }}">
                    <i class="fas fa-campground" inert></i>
                </button>
            </div>
            {{/if}}

            {{!-- XP --}}
            {{#if showExperience}}
            {{#with system.details.xp}}
            <div class="xp-label roboto-upper">
                {{#if @root.editable}}
                <input type="text" name="system.details.xp.value" class="value uninput" data-dtype="Number"
                       value="{{ value }}">
                {{else}}
                <span class="value">{{ dnd5e-numberFormat value }}</span>
                {{/if}}
                {{#unless @root.epicBoonsEarned}}
                <span class="separator">&sol;</span>
                <span class="max">{{ dnd5e-numberFormat max }}</span>
                {{/unless}}
            </div>
            <div class="xp-bar" role="meter" aria-label="{{ localize 'DND5E.ExperiencePoints.Progress' }}"
                 aria-valuemin="{{ min }}" aria-valuenow="{{ value }}" aria-valuemax="{{ max }}"
                 aria-valuetext="{{ pct }}%" style="--bar-percentage: {{ pct }}%;"></div>
            {{/with}}
            {{/if}}
        </div>
    </div>
</header>
