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

{{#*inline "ability-score"}}
    <div class="ability-score {{#if flipped}}flipped{{/if}}" data-ability="{{ key }}">
        <a class="label {{ @root.rollableClass }} ability-check">{{ abbr }}</a>
        <div class="mod">
            {{#if @root.editable}}
            <a class="config-button" data-action="ability"
               data-tooltip="{{ localize "DND5E.AbilityConfigure" ability=label }}"
               aria-label="{{ localize "DND5E.AbilityConfigure" ability=label }}">
                <i class="fas fa-cog"></i>
            </a>
            {{else}}
            {{ dnd5e-formatModifier mod }}
            {{/if}}
        </div>
        <div class="score">
            {{#if @root.editable}}
            <input type="text" name="system.abilities.{{ key }}.value" value="{{ baseValue }}" placeholder="10"
                   data-dtype="Number" class="uninput">
            {{else}}
            {{ value }}
            {{/if}}
        </div>
    </div>
{{/inline}}

<form class="{{ cssClass }} flexcol" autocomplete="off">

    {{!-- Header --}}
    <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.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 actor.isOwner}}
                <div class="sheet-header-buttons">
                    <button type="button" class="short-rest gold-button" data-tooltip="DND5E.REST.Short.Label"
                            aria-label="{{ localize "DND5E.REST.Short.Label" }}">
                        <i class="fas fa-utensils"></i>
                    </button>
                    <button type="button" class="long-rest gold-button" data-tooltip="DND5E.REST.Long.Label"
                            aria-label="{{ localize "DND5E.REST.Long.Label" }}">
                        <i class="fas fa-campground"></i>
                    </button>
                </div>
                {{/if}}

                {{!-- XP --}}
                {{#unless disableExperience}}
                {{#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}}
                {{/unless}}
            </div>
        </div>
    </header>

    {{!-- Body --}}
    <section class="sheet-body">

        {{!-- Main Content --}}
        <div class="main-content">

            {{!-- Sidebar --}}
            <div class="sidebar">

                {{!-- Character Card --}}
                <div class="card">

                    {{!-- Collapser --}}
                    <button type="button" class="sidebar-collapser collapser card-tab vertical unbutton interface-only"
                        {{#if sidebarCollapsed}}
                        data-tooltip="JOURNAL.ViewExpand" aria-label="{{ localize "JOURNAL.ViewExpand" }}"
                        {{else}}
                        data-tooltip="JOURNAL.ViewCollapse" aria-label="{{ localize "JOURNAL.ViewCollapse" }}"
                        {{/if}}>
                        <i class="fas fa-caret-{{#if sidebarCollapsed}}right{{else}}left{{/if}}"></i>
                    </button>

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

                        <img src="{{ portrait.src }}" alt="{{ actor.name }}"
                             {{#if (and editable portrait.path)}}data-edit="{{ portrait.path }}"{{/if}}>
                    </div>

                    {{!-- Stats --}}
                    <div class="stats">

                        {{!-- AC & Exhaustion --}}
                        <div class="top">

                            {{#if exhaustion}}
                            <div class="pips" data-prop="system.attributes.exhaustion">
                                {{#each exhaustion.left}}
                                    {{> pip }}
                                {{/each}}
                            </div>
                            {{/if}}

                            {{!-- AC --}}
                            <div class="ac-badge badge" aria-label="{{ localize "DND5E.ArmorClass" }}">
                                {{#if editable}}
                                <a class="config-button" data-action="armor" data-tooltip="DND5E.ArmorConfig"
                                   aria-label="{{ localize "DND5E.ArmorConfig" }}">
                                    <i class="fas fa-cog"></i>
                                </a>
                                {{else}}
                                <div data-attribution="attributes.ac" data-attribution-caption="DND5E.ArmorClass"
                                     data-tooltip-direction="DOWN">
                                    {{ system.attributes.ac.value }}
                                </div>
                                {{/if}}
                            </div>

                            {{#if exhaustion}}
                            <div class="pips" data-prop="system.attributes.exhaustion">
                                {{#each exhaustion.right}}
                                    {{> pip }}
                                {{/each}}
                            </div>
                            {{/if}}
                        </div>

                        {{!-- Initiative, Speed, & Proficiency --}}
                        <div class="lozenges">

                            {{!-- Initiative --}}
                            <div class="lozenge {{#unless editable}}{{ rollableClass }}{{/unless}}"
                                 {{#unless editable}}data-action="rollInitiative"{{/unless}}>
                                <div class="value">
                                    {{#if editable}}
                                    <a class="config-button" data-action="initiative"
                                       data-tooltip="DND5E.InitiativeConfig"
                                       aria-label="{{ localize "DND5E.InitiativeConfig" }}">
                                        <i class="fas fa-cog"></i>
                                    </a>
                                    {{else}}
                                    <span>
                                        {{ dnd5e-numberFormat system.attributes.init.total signDisplay="always" }}
                                    </span>
                                    {{/if}}
                                </div>
                                <div class="label roboto-condensed-upper">{{ localize "DND5E.Initiative" }}</div>
                            </div>

                            {{!-- Speed --}}
                            <div class="lozenge" data-attribution="attributes.movement">
                                <div class="value">
                                    {{#if editable}}
                                    <a class="config-button" data-action="movement" data-tooltip="DND5E.MovementConfig">
                                        <i class="fas fa-cog"></i>
                                    </a>
                                    {{else}}
                                    {{ speed.value }}
                                    {{/if}}
                                </div>
                                <div class="label roboto-condensed-upper">{{ speed.label }}</div>
                            </div>

                            {{!-- Proficiency --}}
                            <div class="lozenge">
                                <div class="value">
                                    {{ dnd5e-numberFormat system.attributes.prof signDisplay="always" }}
                                </div>
                                <div class="label roboto-condensed-upper">{{ localize "DND5E.Proficiency" }}</div>
                            </div>
                        </div>

                        {{!-- Hit Points --}}
                        <div class="meter-group">
                            <div class="label roboto-condensed-upper">
                                <span>{{ localize "DND5E.HitPoints" }}</span>
                                {{#if editable}}
                                <a class="config-button" data-action="hitPoints" data-tooltip="DND5E.HitPointsConfig"
                                   aria-label="{{ localize "DND5E.HitPointsConfig" }}">
                                    <i class="fas fa-cog"></i>
                                </a>
                                {{/if}}
                            </div>
                            {{#with system.attributes.hp}}
                            <div class="meter sectioned hit-points">
                                <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}}
                                    </div>
                                    <input type="text" name="system.attributes.hp.value" data-dtype="Number"
                                           placeholder="0" value="{{ value }}" hidden>
                                </div>
                                <div class="tmp">
                                    <input type="text" name="system.attributes.hp.temp" data-dtype="Number"
                                           placeholder="{{ localize "DND5E.TMP" }}"
                                           value="{{#if temp}}{{ temp }}{{/if}}">
                                </div>
                            </div>
                            {{/with}}
                        </div>

                        {{!-- Hit Dice --}}
                        {{#with system.attributes.hd}}
                        <div class="meter-group">
                            <div class="label roboto-condensed-upper">
                                <span>{{ localize "DND5E.HitDice" }}</span>
                                {{#if @root.editable}}
                                <a class="config-button" data-action="hitDice" data-tooltip="DND5E.HitDiceConfig"
                                   aria-label="{{ localize "DND5E.HitDiceConfig" }}">
                                    <i class="fas fa-cog"></i>
                                </a>
                                {{/if}}
                            </div>
                            <div class="meter hit-dice progress" 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">{{ max }}</span>
                                </div>
                            </div>
                        </div>
                        {{/with}}
                    </div>

                    {{!-- Death Saves --}}
                    <div class="death-tray {{#if death.open}}open{{/if}}">
                        <div class="death-saves">

                            {{!-- Successes --}}
                            <div class="pips" data-prop="system.attributes.death.success">
                                {{#each death.success}}
                                    {{> pip }}
                                {{/each}}
                            </div>

                            {{!-- Roll Death Save --}}
                            {{#if editable}}
                            <button type="button" data-action="death" data-tooltip="DND5E.DeathSaveConfigure"
                                    aria-label="{{ localize "DND5E.DeathSaveConfigure" }}"
                                    class="death-save config-button unbutton">
                              <i class="fas fa-cog" inert></i>
                            </button>
                            {{else}}
                            <button type="button" data-action="rollDeathSave" data-tooltip="DND5E.DeathSaveRoll"
                                    aria-label="{{ localize "DND5E.DeathSaveRoll" }}"
                                    class="{{ rollableClass }} death-save unbutton">
                                <dnd5e-icon src="systems/dnd5e/icons/svg/statuses/dead.svg"></dnd5e-icon>
                            </button>
                            {{/if}}

                            {{!-- Failures --}}
                            <div class="pips" data-prop="system.attributes.death.failure">
                                {{#each death.failure}}
                                    {{> pip }}
                                {{/each}}
                            </div>

                        </div>

                        <button type="button" class="death-tab card-tab horizontal unbutton interface-only"
                                {{#if death.open}}
                                    data-tooltip="DND5E.DeathSaveShow" aria-label="{{ localize "DND5E.DeathSaveShow" }}"
                                {{else}}
                                    data-tooltip="DND5E.DeathSaveHide" aria-label="{{ localize "DND5E.DeathSaveHide" }}"
                                {{/if}}>
                            <i class="fas fa-skull"></i>
                        </button>
                    </div>

                </div>

                {{!-- Favorites --}}
                <div class="favorites">
                    <h3 class="icon">
                        <i class="fas fa-bookmark"></i>
                        <span class="roboto-upper">{{ localize "DND5E.Favorites" }}</span>
                    </h3>
                    <ul class="unlist">
                        {{#each favorites}}

                        {{!-- Favorite --}}
                        <li class="{{#if itemId}}item-tooltip{{/if}} {{ type }} {{#if suppressed}}suppressed{{/if}}"
                            data-favorite-id="{{ id }}" {{#if key}}data-key="{{ key }}"{{/if}}
                            {{#if itemId}}data-item-id="{{ itemId }}"{{/if}}
                            {{#if effectId}}data-effect-id="{{ effectId }}"{{/if}}
                            {{#if parentId}}data-parent-id="{{ parentId }}"{{/if}}
                            {{#if activityId}}data-activity-id="{{ activityId }}" data-action="useFavorite"{{/if}}
                            {{#if reference}}data-reference-tooltip="{{ reference }}"{{/if}}
                            {{#if preparationMode}}data-preparation-mode="{{ preparationMode }}"{{/if}}
                            {{#if level}}data-level="{{ level }}"{{/if}}
                            {{#if toggle.applicable}}data-action="useFavorite"{{/if}}>

                            {{!-- Icon --}}
                            <figure>
                                <img class="gold-icon" alt="{{ title }}" src="{{ img }}">

                                {{!-- Favorite Deletion --}}
                                {{#if @root.editable}}
                                <a class="deletion-control" data-action="removeFavorite" data-tooltip-class
                                   data-tooltip-direction data-tooltip="DND5E.FavoriteRemove"
                                   aria-label="{{ localize "DND5E.FavoriteRemove" }}">
                                    <i class="fas fa-circle-xmark"></i>
                                </a>
                                {{/if}}
                            </figure>

                            {{!-- Name --}}
                            <div class="name-stacked {{ rollableClass }}" role="button" data-action="useFavorite">
                                <span class="title">{{ title }}</span>
                                {{#if subtitle}}
                                <span class="subtitle">{{{ subtitle }}}</span>
                                {{/if}}
                            </div>

                            {{!-- Info --}}
                            <div class="info">
                                <div class="primary {{ css }}">
                                    {{!-- Item Uses & Capacity --}}
                                    {{#if uses.max}}
                                    {{#with uses}}
                                    {{#if (and name @root.actor.isOwner)}}
                                    <input type="text" class="uninput value" value="{{ value }}"
                                           {{#unless ../bareName}}data-{{/unless}}name="{{ name }}"
                                           data-dtype="Number" inputmode="numeric" pattern="[0-9+=\-]*">
                                    {{else}}
                                    <span class="value">{{ value }}</span>
                                    {{/if}}
                                    <span class="separator">&sol;</span>
                                    <span class="max">{{ max }}</span>
                                    {{/with}}

                                    {{!-- Modifiers --}}
                                    {{else if modifier includeZero=true}}
                                    {{ dnd5e-formatModifier modifier }}

                                    {{!-- Passive Score --}}
                                    {{#if passive}}
                                    <span class="passive">({{ passive }})</span>
                                    {{/if}}

                                    {{!-- Saves --}}
                                    {{else if save.dc.value}}
                                    {{#with save}}
                                    <span class="ability">
                                        {{ ability }}
                                    </span>
                                    <span class="value">{{ dc.value }}</span>
                                    {{/with}}

                                    {{!-- Other Value --}}
                                    {{else if value includeZero=true}}
                                    <span class="value">{{ value }}</span>

                                    {{!-- Quantity --}}
                                    {{else if quantity}}
                                    <span class="sign">&times;</span>
                                    <span class="value">{{ quantity }}</span>

                                    {{!-- Toggleable --}}
                                    {{else if toggle.applicable}}
                                    <i class="fas fa-toggle-{{#if toggle.value}}on{{else}}off{{/if}}"></i>

                                    {{!-- Legacy Resources --}}
                                    {{else if resource}}
                                    {{#if @root.actor.isOwner}}
                                    <input type="text" class="uninput value" value="{{ resource.value }}"
                                           data-dtype="Number" name="system.{{ id }}.value" inputmode="numeric"
                                           pattern="[0-9+=\-]*">
                                    {{else}}
                                    <span class="value">{{ resource.value }}</span>
                                    {{/if}}
                                    <span class="separator">&sol;</span>
                                    {{#if @root.editable}}
                                    <input type="text" class="uninput max" value="{{ resource.source.max }}"
                                           data-dtype="Number" name="system.{{ id }}.max" inputmode="numeric"
                                           pattern="[0-9+=\-]*">
                                    {{else}}
                                    <span class="max">{{ resource.max }}</span>
                                    {{/if}}
                                    {{/if}}
                                </div>
                                <div class="secondary">
                                    {{!-- Quantity --}}
                                    {{#if (and uses quantity)}}
                                    <span class="quantity">&times; {{ quantity }}</span>

                                    {{!-- Range --}}
                                    {{else if range.value}}
                                    {{#with range}}
                                    <span class="range">
                                        {{ value }}
                                        {{#if long}}&sol; {{ long }}{{/if}}
                                        {{ units }}
                                    </span>
                                    {{/with}}

                                    {{!-- Reach --}}
                                    {{else if range.reach}}
                                    <span class="range">{{ range.reach }} {{ range.units }}</span>
                                    {{/if}}
                                </div>
                            </div>

                        </li>

                        {{/each}}

                        {{!-- Drop Indicator --}}
                        <li class="drop roboto-upper">{{ localize "DND5E.FavoriteDrop" }}</li>
                    </ul>
                </div>
            </div>

            {{!-- Tabbed Content --}}
            <section class="tab-body">

                {{!-- Character Details --}}
                {{> "dnd5e.character-details" }}

                {{!-- Inventory --}}
                <div class="tab inventory" data-group="primary" data-tab="inventory">
                    {{> "dnd5e.inventory2" sections=inventory }}
                </div>

                {{!-- Features --}}
                <div class="tab features" data-group="primary" data-tab="features">
                    {{> "dnd5e.creature-features" sections=features.sections filters=features.filters }}
                </div>

                {{!-- Spells --}}
                <div class="tab spells" data-group="primary" data-tab="spells">
                    {{> "dnd5e.creature-spells" }}
                </div>

                {{!-- Effects --}}
                <div class="tab effects" data-group="primary" data-tab="effects">
                    {{> "dnd5e.active-effects2" }}
                </div>

                {{!-- Biography --}}
                {{~> "dnd5e.character-biography" ~}}

                {{!-- Bastion --}}
                {{~> "dnd5e.character-bastion" ~}}

                {{!-- Special Traits --}}
                <div class="tab special-traits" data-group="primary" data-tab="special-traits">
                    {{~> "dnd5e.creature-special-traits" ~}}
                </div>

            </section>

        </div>

    </section>

    {{!-- Ability Scores --}}
    <section class="ability-scores optional-ability-{{ abilityRows.optional }}">
        <div class="rows">
            <div class="top">
                {{#each abilityRows.top}}
                    {{> ability-score flipped=true }}
                {{/each}}
            </div>
            <div class="bottom">
                {{#each abilityRows.bottom}}
                    {{> ability-score }}
                {{/each}}
            </div>
        </div>
    </section>

    {{!-- Child Creation --}}
    <button type="button" class="create-child gold-button"
            aria-label="{{ localize "SIDEBAR.Create" type=(localize "DOCUMENT.Item") }}">
        <i class="fas fa-plus"></i>
    </button>

    {{!-- Warnings --}}
    {{> "dnd5e.actor-warnings-dialog" }}

</form>
