<form class="{{cssClass}} swalt-sheet" autocomplete="off">

    {{!-- NPC Sheet Header --}}
    <header class="panel">
        <img class="profile" src="{{actor.img}}" title="{{actor.name}}" data-edit="img" />
        <h1 class="character-name">
            <input name="name" type="text" value="{{actor.name}}" placeholder="{{ localize 'SW5E.Name' }}" />
        </h1>
        <div class="level-experience">
            <div class="charlevel">
                {{ localize "SW5E.AbbreviationCR" }}
                <input name="data.details.cr" type="text" value="{{labels.cr}}" placeholder="1" />
            </div>

            <div class="experience">
                <span class="max">{{data.details.xp.value}} XP</span>
            </div>

        </div>
        <div class="summary">
			<span class="npc-size">{{lookup config.actorSizes data.traits.size}}</span>
			<input type="text" name="data.details.alignment" value="{{data.details.alignment}}"
				placeholder="{{ localize 'SW5E.Alignment' }}" />
                <input type="text" name="data.details.type" value="{{data.details.type}}"
                placeholder="{{ localize 'SW5E.Type' }}" />
                <input type="text" name="data.details.source" value="{{data.details.source}}"
                        placeholder="{{ localize 'SW5E.Source' }}" />
        </div>
        <div class="attributes">
			{{!-- ARMOR CLASS --}}
			<section>
				<h1>{{ localize "SW5E.ArmorClass" }}</h1>
				<div class="attribute-value">
					<input class="ac-display" name="data.attributes.ac.value" type="text"
						value="{{data.attributes.ac.value}}" data-dtype="Number" placeholder="10" />
                </div>
                <footer class="attribute-footer proficiency">
                    {{ localize "SW5E.Proficiency" }}
                    {{numberFormat data.attributes.prof decimals=0 sign=true}}
                </footer>
			</section>

			{{!-- HIT POINTS --}}
			<section class="attribute health">
                <h1 class="attribute-name rollable">{{ localize "SW5E.Health" }}</h1>
                <div class="attribute-value multiple">
                    <input name="data.attributes.hp.value" type="text" value="{{data.attributes.hp.value}}"
                        data-dtype="Number" placeholder="10" class="value-number" />
                    <span class="value-separator">/</span>
                    <input name="data.attributes.hp.max" type="text" value="{{data.attributes.hp.max}}"
                        data-dtype="Number" placeholder="10" class="value-number" />
                </div>
                <footer class="attribute-footer hit-points">
                    <input name="data.attributes.hp.formula" class="hpformula" type="text"
                            placeholder="{{ localize 'SW5E.HealthFormula' }}" value="{{data.attributes.hp.formula}}" />
                </footer>
            </section>
            <section>
				<h1>{{ localize "SW5E.Movement" }}
                    <a class="config-button" data-action="movement" title="{{localize 'SW5E.MovementConfig'}}"><i class="fas fa-cog"></i></a>
                </h1>
                <div class="attribute-value">
                    <span>{{movement.primary}}</span>
                </div>
                <footer class="attribute-footer">
                    <span>{{movement.special}}</span>
                </footer>
            </section>
        </div>
        
    </header>

    {{!-- NPC Sheet Navigation --}}
    <nav class="sheet-navigation root-tabs" data-group="primary">
        <button class="item active" data-tab="attributes">{{ localize "SW5E.Attributes" }}</button>
        <button class="item" data-tab="features">{{ localize "SW5E.Features" }}</button>
        <button class="item" data-tab="powerbook">{{ localize "SW5E.Powerbook" }}</button>
        <button class="item" data-tab="effects">{{ localize "SW5E.Effects" }}</button>
        <button class="item" data-tab="biography">{{ localize "SW5E.Biography" }}</button>
    </nav>

    {{!-- NPC Sheet Body --}}
    <section class="sheet-body">
        <section class="tab attributes core" data-group="primary" data-tab="attributes">
			<section class="panel abilities">
                {{!-- Ability Scores --}}
                <section class="scores">
                    <h1>Ability Scores</h1>
                    <ol>
                        {{#each data.abilities as |ability id|}}
                        <li class="ability {{#if ability.proficient}}proficient{{/if}}" data-ability="{{id}}">
                            <h2 class="ability-name rollable">{{ability.label}}</h4>
                                <input class="ability-score" name="data.abilities.{{id}}.value" type="text"
                                    value="{{ability.value}}" data-dtype="Number" placeholder="10" />
                                <div class="ability-modifiers">
                                    <span class="ability-mod"
                                        title="Modifier">{{numberFormat ability.mod decimals=0 sign=true}}</span>
                                    <input type="hidden" name="data.abilities.{{id}}.proficient"
                                        value="{{ability.proficient}}" data-dtype="Number" />
                                    <button class="proficiency-toggle ability-proficiency"
                                        title="Proficiency">{{{ability.icon}}}</button>
                                    <span class="ability-save"
                                        title="Saving Throw">{{numberFormat ability.save decimals=0 sign=true}}</span>
                                </div>
                        </li>
                        {{/each}}
                    </ol>
                </section>
                {{!-- Skills --}}
                <section class="skills">
                    <h1>Skills</h1>
                    <ol>
                        {{#each data.skills as |skill s|}}
                        <li class="skill {{#if skill.value}}proficient{{/if}}" data-skill="{{s}}">
                            <input type="hidden" name="data.skills.{{s}}.value" value="{{skill.value}}"
                                data-dtype="Number" />
                            <button class="proficiency-toggle skill-proficiency"
                                title="{{skill.hover}}">{{{skill.icon}}}</button>
                            <span class="skill-name rollable">{{skill.label}}</span>
                            <span class="skill-ability">{{skill.ability}}</span>
                            <span class="skill-mod">{{numberFormat skill.total decimals=0 sign=true}}</span>
                            {{!-- <input class="skill-bonus" name="data.skills.{{s}}.bonus" type="text" value="{{numberFormat skill.bonus decimals=0 sign=true}}" data-dtype="Number" placeholder="0" title="Misc. Modifier"/> --}}
                            {{!-- <span class="skill-passive">({{skill.passive}})</span> --}}
                        </li>
                        {{/each}}
                    </ol>
                </section>
            </section>
            <section class="panel traits-resources">
                {{!-- Legendary Actions --}}
                <div class="counters">
                    <div class="counter legendary">
                        <strong>{{ localize "SW5E.LegAct" }}</strong>  
                        <div class="counter-value">
                            <input name="data.resources.legact.value" type="number"
                                value="{{data.resources.legact.value}}" placeholder="0" />
                            <span class="sep">/</span>
                            <input name="data.resources.legact.max" type="number" value="{{data.resources.legact.max}}"
                                placeholder="0" />
                        </div>
                    </div>
                    <div class="counter legendary">
                        <strong>{{ localize "SW5E.LegRes" }}</strong>
                        <div class="counter-value">
                            <input name="data.resources.legres.value" type="number"
                                value="{{data.resources.legres.value}}" placeholder="0" />
                            <span class="sep">/</span>
                            <input name="data.resources.legres.max" type="number" value="{{data.resources.legres.max}}"
                                placeholder="0" />
                        </div>
                    </div>
                    <div class="counter lair">
                        <strong>{{ localize "SW5E.LairAct" }}</strong>
                        <div class="counter-value">
                            <input name="data.resources.lair.value" type="checkbox"
                                value="{{data.resources.lair.value}}" data-dtype="Boolean"
                                {{checked data.resources.lair.value}} />
                            <input name="data.resources.lair.initiative" type="number"
                                value="{{data.resources.lair.initiative}}" placeholder="20" />
                        </div>
                    </div>
                </div>
                <div class="core-traits">
                    {{> "systems/sw5e/templates/actors/newActor/parts/swalt-traits.html"}}
                </div>
            </section>
		</section>

        {{!-- Features Tab --}}
        <div class="tab features flexcol" data-group="primary" data-tab="features">
            {{> "systems/sw5e/templates/actors/newActor/parts/swalt-features.html" sections=features}}
        </div>

        {{!-- Powerbook Tab --}}
        <div class="tab powerbook flexcol" data-group="primary" data-tab="powerbook">
            {{> "systems/sw5e/templates/actors/newActor/parts/swalt-powerbook.html"}}
        </div>

        {{!-- Effects Tab --}}
        <div class="tab effects flexcol" data-group="primary" data-tab="effects">
            {{> "systems/sw5e/templates/actors/newActor/parts/swalt-active-effects.html"}}
        </div>

        {{!-- Biography Tab --}}
        <div class="tab biography flexcol" data-group="primary" data-tab="biography">
            <div class="panel">
                <section>
                    <h1>Biography</h1>
                    {{editor content=data.details.biography.value target="data.details.biography.value" button=true owner=owner editable=editable}}

                </section>
            </div>
        </div>
    </section>
</form>