<header class="sheet-header">

    {{!-- Portrait & Vitals --}}
    <div class="left">

        {{!-- Portrait --}}
        {{#if editable}}
        <label class="slide-toggle header-interactable">
            <input type="checkbox" name="flags.dnd5e.showTokenPortrait" {{ checked portrait.token }}>
            {{#if portrait.token}}
            {{ localize "DOCUMENT.Token" }}
            <i class="fas fa-toggle-on" inert></i>
            {{else}}
            {{ localize "DND5E.Portrait" }}
            <i class="fas fa-toggle-off" inert></i>
            {{/if}}
        </label>
        {{/if}}

        <div class="portrait {{#if portrait.token}}token{{/if}}">

            {{#with portrait}}
            {{#if isVideo}}
            <video src="{{ src }}" autoplay muted disablepictureinpicture loop playsinline
                   {{#if @root.editable}}data-action="{{ action }}"{{else}}data-action="showArtwork"{{/if}}
                   {{#if (and @root.editable path)}}data-edit="{{ path }}" data-type="{{ type }}"{{/if}}></video>
            {{else}}
            <img src="{{ src }}" alt="{{ @root.actor.name }}"
                 {{#if @root.editable}}data-action="{{ action }}"{{else}}data-action="showArtwork"{{/if}}
                 {{#if (and @root.editable path)}}data-edit="{{ path }}" data-type="{{ type }}"{{/if}}>
            {{/if}}
            {{/with}}

            {{#if showDeathSaves}}
            <div class="death-saves">
                <button type="button" class="{{ rollableClass }} death-save unbutton" data-action="roll"
                        data-type="deathSave" data-tooltip="DND5E.DeathSaveRoll"
                        aria-label="{{ localize 'DND5E.DeathSaveRoll' }}">
                    <dnd5e-icon src="systems/dnd5e/icons/svg/statuses/dead-outline.svg"></dnd5e-icon>
                </button>

                {{#with system.attributes.death}}
                <div class="results">

                    {{!-- Successes --}}
                    <div class="success">
                        <input type="text" name="system.attributes.death.success" data-dtype="Number"
                               inputmode="numeric" pattern="[+=\-]?\d*" placeholder="0" value="{{ success }}"
                               aria-label="{{ localize 'DND5E.DeathSaveSuccessLabel' }}">
                        <i class="fa-solid fa-circle-check" inert></i>
                    </div>

                    {{!-- Failures --}}
                    <div class="failure">
                        <input type="text" name="system.attributes.death.failure" data-dtype="Number"
                               inputmode="numeric" pattern="[+=\-]?\d*" placeholder="0" value="{{ failure }}"
                               aria-label="{{ localize 'DND5E.DeathSaveFailureLabel' }}">
                        <i class="fa-solid fa-circle-xmark" inert></i>
                    </div>
                </div>
                {{/with}}
            </div>
            {{/if}}

            {{!-- Initiative --}}
            <div class="initiative-wrapper">

                {{!-- Initiative Modifier --}}
                <div class="initiative {{#unless editable}}{{ rollableClass }}{{/unless}}"
                     {{~#if editable}} data-tooltip="DND5E.InitiativeConfig"
                     aria-label="{{ localize 'DND5E.InitiativeConfig' }}"
                     {{~else}} data-tooltip="DND5E.Initiative" aria-label="{{ localize 'DND5E.Initiative' }}"
                     data-action="roll" data-type="initiative"{{/if}}>
                    {{#if editable}}
                    <button type="button" class="config-button unbutton" data-action="showConfiguration"
                            data-config="initiative">
                        <i class="fas fa-cog" inert></i>
                    </button>
                    {{else}}
                    <span>{{ dnd5e-numberFormat system.attributes.init.total signDisplay="always" }}</span>
                    {{/if}}
                </div>

                {{!-- Initiative Score --}}
                {{#if showInitiativeScore}}
                <div class="initiative-score">{{ system.attributes.init.score }}</div>
                {{/if}}
            </div>

            {{!-- Loyalty --}}
            {{#if showLoyalty}}
            <div class="loyalty-badge badge" aria-label="{{ localize 'DND5E.Loyalty' }}"
                 {{#unless editable}}data-tooltip="DND5E.Loyalty"{{/unless}}>
                {{#if editable}}
                <input type="text" class="uninput" name="system.attributes.loyalty.value" inputmode="numeric"
                       pattern="^[+=\-]?\d*" placeholder="—" value="{{ source.attributes.loyalty.value }}"
                       data-dtype="Number">
                {{else if system.attributes.loyalty.value includeZero=true}}
                {{ system.attributes.loyalty.value }}
                {{else}}
                &mdash;
                {{/if}}
            </div>
            {{/if}}
        </div>

        {{!-- Vitals --}}
        <div class="bottom vitals">

            {{!-- AC --}}
            <div class="left ac">

                <div class="ac-badge badge" aria-label="{{ localize 'DND5E.ArmorClass' }}">
                    {{#if editable}}
                    <button type="button" class="config-button unbutton" data-action="showConfiguration"
                            data-config="armorClass" data-tooltip="DND5E.ArmorConfig"
                            aria-label="{{ localize 'DND5E.ArmorConfig' }}">
                        <i class="fas fa-cog" inert></i>
                    </button>
                    {{else}}
                    <div data-attribution="attributes.ac" data-attribution-caption="DND5E.ArmorClass"
                         data-tooltip-direction="DOWN">
                        {{ system.attributes.ac.value }}
                    </div>
                    {{/if}}
                </div>

            </div>

            {{!-- HP --}}
            <div class="right">

                {{!-- HP --}}
                {{#with system.attributes.hp}}
                <div class="meter hit-points sectioned">
                    <div class="progress hit-points {{#if (gt tempmax 0)}}temp-positive{{else if (lt tempmax 0)~}}
                         temp-negative{{/if}}" role="meter" aria-valuemin="0" aria-valuenow="{{ value }}"
                         aria-valuemax="{{ max }}" style="--bar-percentage: {{ pct }}%">
                        <div class="label">
                            <span class="value">{{ value }}</span>
                            <span class="separator">&sol;</span>
                            <span class="max">{{ effectiveMax }}</span>
                            {{#if tempmax}}
                            <span class="bonus">{{ dnd5e-numberFormat tempmax signDisplay="always" }}</span>
                            {{/if}}
                            {{#if @root.editable}}
                            <button type="button" class="config-button unbutton" data-action="showConfiguration"
                                    data-config="hitPoints" data-tooltip="DND5E.HitPointsConfig"
                                    aria-label="{{ localize 'DND5E.HitPointsConfig' }}">
                                <i class="fas fa-cog" inert></i>
                            </button>
                            {{/if}}
                        </div>
                        <input type="text" name="system.attributes.hp.value" data-dtype="Number" placeholder="0"
                               value="{{ value }}" inputmode="numeric" pattern="^[+=\-]?\d*" hidden>
                    </div>
                    {{#if showDeathSaves}}
                    <div class="tmp">
                        <input type="text" name="system.attributes.hp.temp" data-dtype="Number" inputmode="numeric"
                               placeholder="{{ localize 'DND5E.TMP' }}" value="{{ temp }}" pattern="^[+=\-]?\d*">
                    </div>
                    {{/if}}
                </div>
                {{/with}}

                {{!-- Temp & Tempmax --}}
                {{#with system._source.attributes.hp}}
                <div class="meter sectioned split">
                    <div class="temp">
                        <input type="text" name="system.attributes.hp.temp" data-dtype="Number" inputmode="numeric"
                               placeholder="{{ localize 'DND5E.TMP' }}" value="{{#if temp}}{{ temp }}{{/if}}"
                               pattern="^[+=\-]?\d*">
                    </div>
                    <div class="tempmax">
                        <input type="text" name="system.attributes.hp.tempmax" data-dtype="Number"
                               inputmode="numeric" placeholder="+{{ localize 'DND5E.Max' }}"
                               value="{{#if tempmax}}{{ tempmax }}{{/if}}" pattern="^[+=\-]?\d*">
                    </div>
                </div>
                {{/with}}

            </div>

        </div>

    </div>

    {{!-- Ability Scores & Other Statistics --}}
    <div class="right stats">

        <div class="top">

            {{!-- Name, Type, Size, & Alignment --}}
            <div class="left">

                {{!-- 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}}

                {{!-- Size, Type, & Alignment --}}
                <ul class="labels unlist">

                    {{!-- Size --}}
                    <li class="creature-size">
                        {{#if editable}}
                        <select class="unselect" name="system.traits.size">
                            {{ selectOptions CONFIG.actorSizes selected=source.traits.size labelAttr="label" }}
                        </select>
                        {{else}}
                        <span>{{ lookup (lookup CONFIG.actorSizes system.traits.size) "label" }}</span>
                        {{/if}}
                    </li>

                    {{!-- Type --}}
                    <li class="creature-type">
                        {{#if editable}}
                        <button type="button" class="config-button unbutton header-interactable"
                                data-action="showConfiguration" data-config="creatureType"
                                data-tooltip="DND5E.CreatureTypeConfig"
                                aria-label="{{ localize 'DND5E.CreatureTypeConfig' }}">
                            <span>{{ system.details.type.label }}</span>
                            <i class="fas fa-cog" inert></i>
                        </button>
                        {{else}}
                        <span>{{ system.details.type.label }}</span>
                        {{/if}}
                    </li>

                    {{!-- Alignment --}}
                    <li class="creature-alignment">
                        {{#if editable}}
                        <input type="text" name="system.details.alignment" value="{{ source.details.alignment }}"
                               placeholder="{{ localize 'DND5E.Alignment' }}">
                        {{else}}
                        <span>{{ system.details.alignment }}</span>
                        {{/if}}
                    </li>

                </ul>

            </div>

            {{!-- Resting, Special Traits, & Proficiency --}}
            {{#if actor.isOwner}}
            <div class="right">

                <div class="left">

                    <div class="sheet-header-buttons">
                        {{#if showRests}}
                        <button type="button" class="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="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>
                        {{/if}}
                    </div>

                    <div class="proficiency">
                        <span>{{ localize "DND5E.Proficiency" }}</span>
                        <strong>{{ dnd5e-formatModifier system.attributes.prof }}</strong>
                    </div>

                </div>

                {{!-- CR --}}
                <div class="right cr-badge badge" aria-label="{{ localize 'DND5E.CRLabel' cr=system.details.cr }}"
                     {{#unless editable}}data-tooltip="DND5E.ChallengeRating"{{/unless}}>
                    {{#if editable}}
                    <input type="text" class="uninput" name="system.details.cr"
                           value="{{ dnd5e-formatCR source.details.cr }}">
                    {{else}}
                    {{{ dnd5e-formatCR system.details.cr }}}
                    {{/if}}
                </div>

            </div>
            {{/if}}

        </div>

        {{!-- Ability Scores --}}
        <div class="middle ability-scores card flexrow">
            {{#each abilities}}
            <div class="ability-score" data-ability="{{ key }}">
                {{#if icon}}<img src="{{ icon }}" alt="{{ label }}">{{/if}}
                <a class="label {{ @root.rollableClass }} ability-check" data-action="roll" data-type="ability">
                    {{ abbr }}
                </a>
                <div class="mod">
                    {{#if @root.editable}}
                    <button type="button" class="config-button unbutton" data-action="showConfiguration"
                            data-config="ability" data-tooltip="{{ localize 'DND5E.AbilityConfigure' ability=label }}"
                            aria-label="{{ localize 'DND5E.AbilityConfigure' ability=label }}">
                        <i class="fas fa-cog" inert></i>
                    </button>
                    {{else}}
                    {{ dnd5e-formatModifier mod }}
                    {{/if}}
                </div>
                <div class="score">
                    {{#if @root.editable}}
                    <input type="text" name="system.abilities.{{ key }}.value" value="{{ source.value }}"
                           placeholder="10" data-dtype="Number" class="uninput">
                    {{else}}
                    {{ value }}
                    {{/if}}
                </div>
                <div class="save-tab saving-throw {{#unless @root.editable}}{{ @root.rollableClass }}{{/unless}}"
                     {{#unless @root.editable}}data-tooltip="{{ localize 'DND5E.SavingThrowRoll' ability=label }}"
                     aria-label="{{ localize 'DND5E.SavingThrowRoll' ability=label }}" data-action="roll"
                     data-type="ability"{{/unless}}>
                    <proficiency-cycle type="ability" name="{{ concat 'system.abilities.' key '.proficient' }}"
                                       data-tooltip="{{ hover }}" aria-label="{{ localize hover }}"
                                       value="{{ source.proficient }}"
                                       {{ disabled (not @root.editable) }}></proficiency-cycle>
                    <span class="save">{{ dnd5e-formatModifier save.value }}</span>
                    <i class="fas fa-shield-heart" inert></i>
                </div>
            </div>
            {{/each}}
        </div>

        {{!-- Legendary Actions & Resistances, Lair Actions, & Classes --}}
        <div class="bottom">

            {{#if hasClasses}}
            {{> "dnd5e.actor-classes" }}
            {{/if}}

            {{#if (or hasLegendaries editable)}}
            <div class="legendary">
                {{#if editable}}
                <label class="legact">
                    <span class="label roboto-upper">{{ localize "DND5E.LegendaryAction.Label" }}</span>
                    {{ numberInput source.resources.legact.max name="system.resources.legact.max" step=1 min=0 }}
                </label>
                <label class="legres">
                    <span class="label roboto-upper">{{ localize "DND5E.LegendaryResistance.Label" }}</span>
                    {{ numberInput source.resources.legres.max name="system.resources.legres.max" step=1 min=0 }}
                </label>
                <label class="lair">
                    {{#if modernRules}}
                    <span class="label roboto-upper">{{ localize "DND5E.LAIR.HasLair" }}</span>
                    <div class="spacer checkbox">
                        <dnd5e-checkbox name="system.resources.lair.value"
                                        {{ checked source.resources.lair.value }}></dnd5e-checkbox>
                    </div>
                    {{else}}
                    <span class="label roboto-upper">{{ localize "DND5E.LAIR.Action.Label" }}</span>
                    {{ numberInput source.resources.lair.initiative name="system.resources.lair.initiative"
                                   placeholder="—" step=1 min=0 }}
                    {{/if}}
                </label>
                {{else}}
                {{#if system.resources.legact.max}}
                <div class="legact">
                    <span class="label roboto-upper">{{ localize "DND5E.LegendaryAction.Label" }}</span>
                    <div class="pips" data-prop="system.resources.legact.spent">
                        {{#each legact}}
                            {{> ".pip" }}
                        {{/each}}
                    </div>
                </div>
                {{/if}}
                {{#if system.resources.legres.max}}
                <div class="legres">
                    <span class="label roboto-upper">{{ localize "DND5E.LegendaryResistance.Label" }}</span>
                    <div class="pips" data-prop="system.resources.legres.spent">
                        {{#each legres}}
                            {{> ".pip" }}
                        {{/each}}
                    </div>
                </div>
                {{/if}}
                {{#if modernRules}}
                {{#if system.resources.lair.value}}
                <label class="lair">
                    <span class="label roboto-upper">{{ localize "DND5E.LAIR.Inside" }}</span>
                    <div class="spacer toggle">
                        <slide-toggle name="system.resources.lair.inside"
                                      {{ checked system.resources.lair.inside }}></slide-toggle>
                    </div>
                </label>
                {{/if}}
                {{else if system.resources.lair.initiative}}
                <label class="lair">
                    <span class="label roboto-upper">{{ localize "DND5E.LAIR.Action.Label" }}</span>
                    <span class="value">{{ system.resources.lair.initiative }}</span>
                </label>
                {{/if}}
                {{/if}}
            </div>
            {{/if}}

        </div>

    </div>

</header>

{{#*inline ".pip"}}
    <button type="button" class="{{ classes }}" data-action="togglePip" data-n="{{ n }}" data-tooltip="{{ tooltip }}"
            aria-label="{{ label }}" aria-pressed="{{ filled }}"></button>
{{/inline}}
