<form class="npc-sheet simple" autocomplete="off" data-tooltip-class="pf2e">
    <div class="sidebar">
        {{!-- Image --}}
        <div class="image-container">
            <img class="actor-image" src="{{actor.img}}" data-edit="img" height="auto" width="100%" style="margin: 0 auto" />
            <a class="hover-icon" data-action="show-image" data-tooltip="SIDEBAR.CharArt"><i class="fa-solid fa-image fa-fw"></i></a>
        </div>

    {{!-- Hit Points --}}
    <div class="subsection health">
        <header>
            <label for="{{document.uuid}}-hp" data-tooltip="{{data.attributes.hp.breakdown}}">
                <span>{{localize "PF2E.HitPointsShortLabel"}}</span>
            </label>

            <span class="hit-points">
                {{#with data.attributes.hp as |hp|}}
                    <input
                        type="number"
                        name="system.attributes.hp.value"
                        class="current"
                        id="{{../document.uuid}}-hp"
                        value="{{hp.value}}"
                        placeholder="0"
                    />
                    <span class="slash">/</span>
                    <input
                        type="number"
                        class="max adjustable{{#if (lt hp.max 10)}} lt10{{else if (lt hp.max 100)}} lt100{{else}} lt1000{{/if}}{{#if hp.adjustedHigher}} adjusted-higher{{else if hp.adjustedLower}} adjusted-lower{{/if}}"
                        data-property="system.attributes.hp.max"
                        value="{{hp.max}}"
                        placeholder="0"
                    />
                {{/with}}
            </span>
        </header>

        {{!-- Temp HP --}}
        <div class="side-bar-section-content">
            <div class="hp-temp labeled-field">
                <label for="{{document.uuid}}-temp-hp">{{localize "PF2E.RuleElement.TempHPShortLabel"}}</label>
                <input
                    class="hp-temp-value"
                    type="number"
                    name="system.attributes.hp.temp"
                    id="{{document.uuid}}-temp-hp"
                    value="{{data.attributes.hp.temp}}"
                    placeholder="0"
                />
            </div>
        </div>
    </div>


        {{!-- Will --}}
        <div class="subsection will">
            <header>
                {{#with data.saves.will as |will|}}
                    <label>
                        <a
                            class="attribute-label roll"
                            data-action="roll-check"
                            data-statistic="will"
                            data-tooltip="{{will.breakdown}}"
                        >{{localize "PF2E.SavesWill"}}</a>
                    </label>
                    <input
                        type="text"
                        value="{{numberFormat will.totalModifier sign=true}}"
                        class="modifier adjustable{{#if will.adjustedHigher}} adjusted-higher{{/if}}{{#if will.adjustedLower}} adjusted-lower{{/if}}"
                        data-property="system.saves.will.value"
                        data-dtype="Number"
                        placeholder="0"
                    />
                {{/with}}
            </header>
        </div>

        {{!-- Perception --}}
        <div class="subsection perception">
            <header>
                <label>
                    <a
                        class="attribute-label roll"
                        data-action="roll-check"
                        data-statistic="perception"
                        data-tooltip="{{data.perception.breakdown}}"
                    >{{localize "PF2E.PerceptionLabel"}}</a>
                </label>
                {{#with data.perception as |perception|}}
                    <input
                        type="text"
                        value="{{numberFormat perception.mod sign=true}}"
                        class="modifier adjustable{{#if perception.adjustedHigher}} adjusted-higher{{/if}}{{#if perception.adjustedLower}} adjusted-lower{{/if}}"
                        data-property="system.perception.mod"
                        data-dtype="Number"
                        placeholder="0"
                    />
                {{/with}}
            </header>
            <div class="section-body">
                <ul class="senses comma-separated">
                    {{~#each data.perception.senses as |sense|}}
                        <li data-slug="{{sense.type}}">
                            {{~#if sense.emphasizeLabel}}<em>{{sense.label}}</em>{{else}}{{sense.label}}{{/if~}}
                        </li>
                    {{/each~}}
                    {{~#unless data.perception.vision}}<li>{{localize "PF2E.Actor.Creature.Sense.NoVision"}}</li>{{/unless}}
                </ul>

                <input
                    type="text"
                    name="system.perception.details"
                    value="{{data.perception.details}}"
                    placeholder="{{localize "PF2E.SpecialSensesLabel"}}"
                />
            </div>
        </div>

        {{!-- Skills --}}
        <div class="subsection skills">
            <header>
                <label>
                    <label class="attribute-label">{{localize "PF2E.SkillsLabel"}}</label>
                </label>
                {{#if editable}}
                    <div class="controls">
                        <a data-action="edit-skills" data-tooltip="PF2E.NPC.EditSkills"><i class="fa-solid fa-pen-to-square"></i></a>
                    </div>
                {{/if}}
            </header>
            <div class="side-bar-section-body">
                <div class="list">
                    {{#each data.skills as |skill|}}
                        {{#if skill.visible}}
                            <div class="skill-entry tag-legacy" data-statistic="{{skill.slug}}">
                                <a class="roll" data-action="roll-check">
                                    {{skill.label}}
                                    <span
                                        class="adjustable{{#if skill.adjustedHigher}} adjusted-higher{{else if skill.adjustedLower}} adjusted-lower{{/if}}"
                                    >{{numberFormat skill.value sign=true}}</span></a>
                                {{#if skill.variants}}
                                    {{#each skill.variants as |variant variantId|}}
                                        <a class="roll" data-action="roll-check" data-options="{{variant.options}}">({{variant.label}})</a>
                                    {{/each}}
                                {{/if}}
                            </div>
                        {{/if}}
                    {{/each}}
                </div>
            </div>
        </div>
    </div>

    <div class="npc-body">
        {{!--  Header  --}}
        <header>
            {{!-- Name & Level --}}
            <div class="name flexrow bottom-separator">
                <input class="name-value" name="name" type="text" value="{{actor.name}}" placeholder="{{localize "PF2E.CharacterNamePlaceholder"}}" spellcheck="false" />
                <label class="level-label">{{localize "PF2E.NPC.Creature"}}</label>
                {{#with data.details.level as |level|}}
                    <input class="level adjustable{{#if level.adjustedHigher}} adjusted-higher{{else if level.adjustedLower}} adjusted-lower{{/if}}" type="text" data-property="system.details.level.value" value="{{level.value}}" placeholder="1" data-dtype="Number" />
                {{/with}}
            </div>
            {{!-- Rarity and size --}}
            <div class="flexrow">
                <div class="flexrow tags paizo-style">
                    <select class="rarity-select traits-list-item tag rarity {{data.traits.rarity}}" data-property="system.traits.rarity">
                        {{selectOptions rarity selected=data.traits.rarity localize=true}}
                    </select>
                    <select class="size-select traits-list-item tag size" data-property="system.traits.size.value">
                        {{selectOptions actorSizes selected=data.traits.size.value localize=true}}
                    </select>
                </div>
            </div>
            {{!-- Traits Selector --}}
            <div class="flexrow">
                <tagify-tags class="tags paizo-style" name="system.traits.value" value="{{json traitTagifyData}}"
                    {{#if (eq data.traits.value.length 0)}}placeholder="{{localize "PF2E.Traits"}}"{{/if}} />
            </div>
            {{!-- Blurb --}}
            <div class="flexrow">
                <input name="system.details.blurb" type="text" value="{{data.details.blurb}}" />
            </div>
        </header>

        {{!--  Body  --}}
        <section class="sheet-body notes active">
            {{!-- Description --}}
            <div class="notes-section public-notes section-container">
                <h4>{{localize "PF2E.NPC.PublicNotes"}}</h4>
                <div class="notes-text">
                    {{editor enrichedContent.publicNotes target="system.details.publicNotes" button=true editable=editable engine="prosemirror"}}
                </div>
            </div>

            {{#if user.isGM}}
                {{!-- Private Notes --}}
                <div class="notes-section private-notes section-container">
                    <h4>{{localize "PF2E.NPC.PrivateNotes"}}</h4>
                    <div class="notes-text">
                        {{editor enrichedContent.privateNotes target="system.details.privateNotes" button=true editable=editable engine="prosemirror"}}
                    </div>
                </div>
            {{/if}}

            {{#if (and editable document.conditions.active.length)}}
                <div class="notes-section section-container effects">
                    <h4>{{localize "PF2E.ConditionsLabel"}}</h4>
                    <ol class="effects-list">
                        {{> "systems/pf2e/templates/actors/partials/effects.hbs" effects=document.conditions.active}}
                    </ol>
                </div>
            {{/if}}

            {{#if (and editable document.itemTypes.effect.length)}}
                <div class="notes-section section-container effects">
                    <h4>{{localize "PF2E.EffectsLabel"}}</h4>
                    <ol class="effects-list">
                        {{> "systems/pf2e/templates/actors/partials/effects.hbs" effects=document.itemTypes.effect}}
                    </ol>
                </div>
            {{/if}}

            {{#if user.isGM}}
                {{!-- Publication --}}
                <div class="notes-section publication">
                    <h4>Publication</h4>
                    <div class="notes-text">
                        {{> "systems/pf2e/templates/partials/publication-data.hbs" path="system.details.publication" data=data.details.publication}}
                    </div>
                </div>
            {{/if}}
        </section>
    </div>
</form>
