<header class="sheet-header">

    {{!-- Group Actions --}}
    <div class="sheet-header-buttons">
        <button type="button" class="gold-button" data-action="placeMembers" data-tooltip
                aria-label="{{ localize "DND5E.Group.PlaceMembers" }}">
            <i class="fa-solid fa-location-dot" inert></i>
        </button>
        <button type="button" class="short-rest gold-button" data-action="rest" data-type="short" data-tooltip
                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
                aria-label="{{ localize 'DND5E.REST.Long.Label' }}">
            <i class="fas fa-campground" inert></i>
        </button>
    </div>

    {{!-- Portrait --}}
    <div class="left">
        <div class="portrait">
            <img src="{{ document.img }}" alt="{{ document.name }}"
                {{#if editable}}data-action="editImage" data-edit="img"{{/if}}>
        </div>
    </div>

    {{!-- Name & Cards --}}
    <div class="right">

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

        {{!-- Movement & XP --}}
        <div class="bottom">

            {{!-- Movement --}}
            {{#with travelPace}}
            <div class="movement card">
                <div class="header travel-pace">
                    <h3>{{ localize "DND5E.TRAVEL.Label" }}</h3>
                    {{#if @root.editable}}
                    <button type="button" class="config-button unbutton" data-action="showConfiguration"
                            data-config="movement" data-tooltip aria-label="{{ localize "DND5E.MOVEMENT.Action.Configure" }}">
                        <i class="fa-solid fa-cog" inert></i>
                    </button>
                    {{else if pace.available}}
                    <button type="button" class="unbutton config-button {{#if pace.slowed}}suppressed{{/if}}"
                            data-action="changePace" data-increment="-1" data-tooltip
                            aria-label="{{ localize "DND5E.Group.Action.ChangePace" }}">
                        <i class="fa-solid fa-chevron-left" inert></i>
                    </button>
                    <span class="pace subtitle" {{#if pace.slowed}}data-tooltip="DND5E.TRAVEL.Slowed.Group"{{/if}}>
                        {{ pace.label }}
                    </span>
                    <button type="button" class="unbutton config-button {{#if pace.slowed}}suppressed{{/if}}"
                            data-action="changePace" data-increment="1" data-tooltip
                            aria-label="{{ localize "DND5E.Group.Action.ChangePace" }}">
                        <i class="fa-solid fa-chevron-right" inert></i>
                    </button>
                    {{/if}}
                </div>
                <div class="info">
                    <div>
                        <span class="label">{{ localize "DND5E.TRAVEL.Type.Land" }}</span>
                        <span class="value">
                            {{ dnd5e-numberFormat paces.land blank="—" }}
                        </span>
                    </div>
                    <div>
                        <span class="label">{{ localize "DND5E.TRAVEL.Type.Water" }}</span>
                        <span class="value">
                            {{ dnd5e-numberFormat paces.water blank="—" }}
                        </span>
                    </div>
                    <div>
                        <span class="label">{{ localize "DND5E.TRAVEL.Type.Air" }}</span>
                        <span class="value">
                            {{ dnd5e-numberFormat paces.air blank="—" }}
                        </span>
                    </div>
                </div>
            </div>
            {{/with}}

            {{!-- XP --}}
            <div class="xp card">
                <div class="header">
                    <h3>{{ localize "DND5E.AdvancementTitle" }}</h3>
                    <button type="button" class="config-button unbutton" data-action="award" data-tooltip
                            {{#if showXP}}aria-label="{{ localize "DND5E.Group.Distribute.xp" }}"
                            {{else}}aria-label="{{ localize "DND5E.Group.Distribute.noxp" }}"{{/if}}>
                        <i class="fa-solid fa-trophy" inert></i>
                    </button>
                </div>
                <div class="info">
                    {{#if showXP}}
                    <div>
                        <span class="label">{{ localize "DND5E.ExperiencePoints.Pool" }}</span>
                        <span class="value">
                            {{#if editable}}
                            {{ formInput fields.details.fields.xp.fields.value value=source.details.xp.value }}
                            {{else}}
                            {{#if system.details.xp.value}}
                            {{ dnd5e-numberFormat system.details.xp.value }}
                            {{else}}
                            &mdash;
                            {{/if}}
                            {{/if}}
                        </span>
                    </div>
                    {{/if}}
                    <div>
                        <span class="label">{{ localize "DND5E.LevelAvg" }}</span>
                        <span class="value">{{ dnd5e-numberFormat system.level blank="—" useGrouping=false }}</span>
                    </div>
                </div>
            </div>

        </div>

    </div>
</header>
