<form class="{{cssClass}} flexcol" autocomplete="off">
  <div class="tidy5e-sheet tidy5e-npc {{#if actor.flags.tidy5e-sheet.allow-edit}}allow-edit{{/if}}">
    
		{{!-- Item Info Card --}}
		<section id="item-info-container">
			<i class="item-info-container-background fab fa-d-and-d"></i>
			<div class="info-wrap">
				<article id="item-info-container-content">
					<!-- Info Card here -->
				</article>
				
				<article class="info-card-hint">
					<p><span class="key">X</span> {{localize "TIDY5E.ItemCardsKeyHint"}}</p>
					<p><i class="fas fa-mouse"></i> {{localize "TIDY5E.ItemCardsMouseHint"}}</p>
				</article>
			</div>
		</section>
    
    {{!-- NPC Sheet Header --}}
    <header class="tidy5e-header">
      <section class="profile-wrap">
        <div class="profile">
          {{!-- Portrait --}}
          <div class="portrait">
            <img class="player-image" src="{{actor.img}}" alt="{{actor.name}}" title="{{ localize 'TIDY5E.EditActorImage' }} / {{ localize 'TIDY5E.ShowActorImage' }}" data-edit="img">
						<div class="portrait-menu hidden">
							<a class="showActorArt" id="showPortrait">{{ localize 'TIDY5E.ShowPortraitArt' }}</a>
							<a class="showActorArt" id="showToken">{{ localize 'TIDY5E.ShowTokenArt' }}</a>
						</div>
          </div>

          {{!-- HP Overlay --}}
          <div class="hp-overlay-wrapper">
            <div class="hp-overlay" style="background: linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,0,0,1) calc(100% - ((100% / ({{data.attributes.hp.max}} + {{#if data.attributes.hp.tempmax}}{{data.attributes.hp.tempmax}}{{else}}0{{/if}} )) * ({{data.attributes.hp.value}} + {{#if data.attributes.hp.temp}}{{data.attributes.hp.temp}}{{else}}0{{/if}})) ), rgba(255,255,255,1) calc(100% - ((100% / ({{data.attributes.hp.max}} + {{#if data.attributes.hp.tempmax}}{{data.attributes.hp.tempmax}}{{else}}0{{/if}} )) * ({{data.attributes.hp.value}} + {{#if data.attributes.hp.temp}}{{data.attributes.hp.temp}}{{else}}0{{/if}})) ), rgba(255,255,255,1) 100%);">
            </div>
          </div>
          {{!-- Resting --}}
          <div class="rest-container has-note">
            <div class="note">{{ localize 'TIDY5E.RestHint' }}</div>
            <div class="resting">
              <span class="resting-icon"><i class="rest-icon fas fa-bed"></i></span>
              <a class="rest short-rest" title="{{ localize 'TIDY5E.RestS' }}"><i class="fas fa-hourglass-half"></i></a>
              <a class="rest long-rest" title="{{ localize 'TIDY5E.RestL' }}"><i class="fas fa-hourglass-end"></i></a>
            </div>
          </div>

          {{!-- Hit Points --}}
          <div class="portrait-hp" title="{{ localize 'DND5E.HitPoints' }}">
            <div class="hp-bar" style="background: linear-gradient(
								-90deg,
								transparent 0%,
								transparent calc(100% - ((100% / ({{#if (eq data.attributes.hp.max 0)}} 1 {{else}} {{data.attributes.hp.max}} {{/if}} + {{#if data.attributes.hp.tempmax}}{{data.attributes.hp.tempmax}}{{else}}0{{/if}} )) * ({{data.attributes.hp.value}} + {{#if data.attributes.hp.temp}}{{data.attributes.hp.temp}}{{else}}0{{/if}})) ),
								 	rgba(0,200,0,0.5) calc(100% - ((100% / ({{#if (eq data.attributes.hp.max 0)}} 1 {{else}} {{data.attributes.hp.max}} {{/if}} + {{#if data.attributes.hp.tempmax}}{{data.attributes.hp.tempmax}}{{else}}0{{/if}} )) * ({{data.attributes.hp.value}} + {{#if data.attributes.hp.temp}}{{data.attributes.hp.temp}}{{else}}0{{/if}})) ),
								 	rgba(0,200,0,0.5) 100%);">
						</div>
            <input class="hp-min" name="data.attributes.hp.value" type="text" value="{{data.attributes.hp.value}}"
            data-dtype="Number" placeholder="0" maxlength="5">
            <span class="value-seperator">/</span>
            <input class="hp-max" name="data.attributes.hp.max" type="text" value="{{data.attributes.hp.max}}"
            data-dtype="Number" placeholder="0" maxlength="5">
          </div>
        </div>

        <div class="portrait-hp-formula health" title="{{ localize 'DND5E.HPFormula' }}">
          <span class="rollable" title="{{ localize 'DND5E.HitDiceRoll'}}"><i class="fas fa-dice-six"></i></span>
          <div class="formula-edit">
            <input name="data.attributes.hp.formula" class="hpformula" type="text" placeholder="{{ localize 'DND5E.HPFormula' }}" value="{{data.attributes.hp.formula}}"  maxlength="12" title="{{ localize 'DND5E.HPFormula' }}: {{data.attributes.hp.formula}}">
          </div>
        </div>

        {{!-- Temp Hit Points --}}
        <div class="portrait-temp">
          <input name="data.attributes.hp.temp" type="text" class="temphp" placeholder="+{{ localize 'DND5E.Temp' }}" title="+{{ localize 'DND5E.Temp' }}"
          value="{{#if (eq data.attributes.hp.temp 0)}}{{else}}{{data.attributes.hp.temp}}{{/if}}" data-dtype="Number" maxlength="5">
          <input name="data.attributes.hp.tempmax" type="text" class="max-temphp" placeholder="+{{ localize 'DND5E.Max' }}" title="+{{ localize 'DND5E.Max' }}"
          value="{{#if (eq data.attributes.hp.tempmax 0)}}{{else}}{{data.attributes.hp.tempmax}}{{/if}}" data-dtype="Number" maxlength="5">
        </div>

      </section>

      {{!-- Character Details --}}
      <div class="character-details">
        <section class="general-information">
          <input data-input="{{actor._id}}-name" name="name" type="hidden" value="{{actor.name}}" placeholder="{{ localize 'DND5E.Name' }}" maxlength="40">
          <i class="link-state fas fa-link" title="{{ localize 'TIDY5E.TokenLinked' }}"></i>
          <i class="link-state fas fa-unlink" title="{{ localize 'TIDY5E.TokenUnlinked' }}"></i>
          <h1 class="char-name" contenteditable="true" spellcheck="false" data-target="{{actor._id}}-name" data-placeholder="{{ localize 'DND5E.Name' }}" data-maxlength="40">{{actor.name}}</h1>
          <div class="level-information">
            <div class="xp">
              <span>{{data.details.xp.value}} XP</span>
            </div>
            <div class="level">
              <input data-input="{{actor._id}}-cr" name="data.details.cr" type="hidden" value="{{labels.cr}}" placeholder="0" maxlength="4">
              <div>{{ localize "DND5E.AbbreviationCR" }} <span contenteditable="true" data-target="{{actor._id}}-cr" data-placeholder="0" data-maxlength="4">{{labels.cr}}</span></div>
            </div>
          </div>
        </section>

        {{!-- Character Summary --}}
        <ul class="origin-summary">
          <li>
            <ul class="actor-size-select">
              <li><span class="size-label" data-size="{{data.traits.size}}">{{lookup config.actorSizes data.traits.size}}</span>
                <ul class="size-list" data-target="data.traits.size">
                  {{#each config.actorSizes as |label size|}}
                    <li data-size="{{size}}">{{label}}</li>
                  {{/each}}
                </ul>
              </li>
            </ul>
            <span class="creature-type" title="{{labels.type}}">
              <a class="config-button" data-action="type" title="{{localize 'DND5E.CreatureTypeConfig'}}">{{#if (or (eq labels.type '') (eq labels.type none))}} {{localize 'DND5E.CreatureType'}} {{else}} {{labels.type}} {{/if}}</a>
            </span>
            <span class="environment" title="{{ localize 'TIDY5E.Environment' }}"><i class="fas fa-tree"></i><span class="environment-label"><span contenteditable="true" spellcheck="false" data-target="{{actor._id}}-environment" data-placeholder="{{ localize 'TIDY5E.Environment' }}" data-maxlength="80">{{data.details.environment}}</span></span></span>
            <span contenteditable="true" spellcheck="false" data-target="{{actor._id}}-alignment" data-placeholder="{{ localize 'DND5E.Alignment' }}">{{data.details.alignment}}</span>
            <span class="source-info" contenteditable="true" spellcheck="false" data-target="{{actor._id}}-source" data-placeholder="{{ localize 'DND5E.Source' }}" class="source">{{data.details.source}}</span>
            <input type="hidden" data-input="{{actor._id}}-environment" name="data.details.environment" value="{{data.details.environment}}" placeholder="{{ localize 'TIDY5E.Environment' }}">
            <input type="hidden" data-input="{{actor._id}}-alignment" name="data.details.alignment" value="{{data.details.alignment}}" placeholder="{{ localize 'DND5E.Alignment' }}">
            <input data-input="{{actor._id}}-source" name="data.details.source" type="hidden" value="{{data.details.source}}" placeholder="{{ localize 'DND5E.Source' }}">
          </li>
          <li class="proficiency">
            {{ localize 'DND5E.Proficiency' }}: {{numberFormat data.attributes.prof decimals=0 sign=true}}
          </li>
        </ul>

        {{!-- Character Movement --}}

        <section class="movement">
          <ul class="speed-form">
            <li><h4>{{ localize 'DND5E.Speed' }}</h4></li>
            {{#if movement.primary}}
            <li class="movement-primary" title="{{movement.primary}}">{{movement.primary}}</li>
            {{/if}}
            {{#if movement.special}}
            <li class="movement-special" title="{{movement.special}}">{{movement.special}}</li>
            {{/if}}
            <li class="configure-movement"><a class="config-button" data-action="movement" title="{{localize 'DND5E.MovementConfig'}}"><i class="fas fa-cog"></i></a></li>
          </ul>
        </section>

        <section class="character-stats">
          {{!-- Header Attributes --}}
          <ul class="header-attributes">
            <li class="header-attribute ac-display" title="{{ localize 'DND5E.ArmorClass' }}">
              <svg version="1.1" x="0px" y="0px" viewBox="0 0 90 100" xml:space="preserve">
              <path d="M45,100C-2.6,79.3,0,12.6,0,12.6c0-2.2,1.8-4,4.4-4.6l39.1-7.9C44,0,44.5,0,45,0c0.5,0,1,0,1.4,0.1L85.5,8
                c2.6,0.5,4.4,2.4,4.4,4.6C90,12.6,92.6,79.3,45,100L45,100z"/>
              </svg>
              <input class="value" name="data.attributes.ac.value" type="text" value="{{data.attributes.ac.value}}" data-dtype="Number" placeholder="10"maxlength="2">
            </li>
            <li class="header-attribute initiative">
              <h4 class="attribute-name rollable" data-action="rollInitiative" title="{{ localize 'DND5E.Initiative' }}">Ini</h4>
              <div class="value">
                <span>{{numberFormat data.attributes.init.total decimals=0 sign=true}}</span>
              </div>
              <footer class="value-footer">
                <label for="{{@root/appId}}-ini-mod">{{ localize 'TIDY5E.AbbrMod' }}</label>
                <input id="{{@root/appId}}-ini-mod" class="ini-mod" name="data.attributes.init.value" type="text" placeholder="0" data-dtype="Number" value="{{numberFormat data.attributes.init.value decimals=0 sign=true}}" maxlength="2">
            </footer>
            </li>
          </ul>

          {{!-- Ability Scores --}}
          <ul class="ability-scores">
            {{#each data.abilities as |ability id|}}
            <li class="ability {{#if ability.proficient}}proficient{{/if}}" data-ability="{{id}}">
							<div class="wrapper" data-ability="{{id}}">
                <h4 class="ability-name box-title rollable" title="{{ability.label}}">{{ability.abbr}}</h4>
                <div class="value">
                  <input class="ability-score" name="data.abilities.{{id}}.value" type="text" value="{{ability.value}}" data-dtype="Number" placeholder="10">
                </div>
                <div class="ability-modifiers value-footer">
                  <span class="ability-mod rollable" title="{{ localize 'DND5E.AbilityModifier' }}">{{numberFormat ability.mod decimals=0 sign=true}}</span>
                  <input type="hidden" name="data.abilities.{{id}}.proficient" value="{{ability.proficient}}" data-dtype="Number">
                  <a class="proficiency-toggle ability-proficiency" title="{{ localize 'DND5E.Proficiency' }}">
                  {{{ability.icon}}}</a>
                  <span class="ability-save rollable" title="{{ localize 'DND5E.ActionSave' }}">{{numberFormat ability.save decimals=0 sign=true}}</span>
                </div>
                <span class="mod-label ability-mod-label">{{ localize 'TIDY5E.AbbrMod' }}</span>
                <span class="mod-label save-mod-label">{{ localize 'TIDY5E.AbbrSavingThrow' }}</span>
              </div>
            </li>
            {{/each}}
          </ul>
        </section>

      </div>
    </header>

    {{!-- NPC Sheet Navigation --}}
    <nav class="flex tidy5e-navigation tabs" data-group="primary">
      <a class="item active" data-tab="attributes">{{ localize "TIDY5E.Abilities" }}</a>
      <a class="item" data-tab="effects">{{ localize "DND5E.Effects" }}</a>
      <a class="item" data-tab="biography">{{ localize "DND5E.Biography" }}</a>
      <a class="item" data-tab="journal">{{ localize "TIDY5E.Journal" }}</a>
      {{#if owner}}
      <div class="toggle-allow-edit"><span><i class="fas fa-lock" title="{{localize 'TIDY5E.EnableEdit'}} - {{localize 'TIDY5E.EditHint'}}"></i><i class="fas fa-lock-open" title="{{localize 'TIDY5E.DisableEdit'}} - {{localize 'TIDY5E.EditHint'}}"></i></span></div>
      {{/if}}
    </nav>

    {{!-- NPC Sheet Body --}}
    <section class="sheet-body">
      <div class="tab attributes flexrow" data-group="primary" data-tab="attributes">

        <div class="left-pane">
          {{!-- Skills --}}
          <ul class="skills-list {{#if actor.flags.tidy5e-sheet.npcSkillsExpanded}}expanded{{/if}} {{#if actor.flags.tidy5e-sheet.npcSkillsAlwaysVisible}}.always-visible{{/if}}">
            {{#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">
              <a class="proficiency-toggle skill-proficiency" title="{{skill.hover}}">{{{skill.icon}}}</a>
              <h4 class="skill-name rollable">{{skill.label}}</h4>
              <span class="skill-ability">{{skill.ability}}</span>
              <span class="skill-mod">{{numberFormat skill.total decimals=0 sign=true}}</span>
              <span class="skill-passive" title="{{skill.label}} ({{ localize 'DND5E.Passive' }})">({{skill.passive}})</span>
            </li>
            {{/each}}
            <li class="toggle-proficient" data-show-skills="{{ localize 'TIDY5E.Show' }}" data-hide-skills="{{ localize 'TIDY5E.Hide' }}"> {{ localize "DND5E.NotProficient" }}</li>
          </ul>
          {{!-- Traits --}}
          {{> "modules/tidy5e-sheet/templates/actors/parts/tidy5e-traits.html"}}
        </div>

        <section class="center-pane">

          {{!-- Legendary Actions --}}
          <div class="counters">
            <div class="counter legendary">
              <h4>{{ localize "DND5E.LegAct" }}</h4>
              <div class="counter-value">
                <input type="text" name="data.resources.legact.value" data-dtype="Number" placeholder="0"
                value="{{data.resources.legact.value}}">
                <span class="sep">/</span>
                <input type="text" name="data.resources.legact.max" data-dtype="Number" placeholder="0"
                value="{{data.resources.legact.max}}">
              </div>
            </div>
            <div class="counter legendary">
              <h4>{{ localize "DND5E.LegRes" }}</h4>
              <div class="counter-value">
                <input type="text" name="data.resources.legres.value" data-dtype="Number" placeholder="0"
                value="{{data.resources.legres.value}}">
                <span class="sep">/</span>
                <input type="text" name="data.resources.legres.max" data-dtype="Number" placeholder="0"
                value="{{data.resources.legres.max}}">
              </div>
            </div>
            <div class="counter lair">
              <h4>{{ localize "DND5E.LairAct" }}</h4>
              <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="text" value="{{data.resources.lair.initiative}}"
                data-dtype="Number" placeholder="Init.">
              </div>
            </div>
          </div>
          
          {{!-- Alternative Trait Position --}}
					<div class="alt-trait-pos"></div>

          {{> "modules/tidy5e-sheet/templates/actors/parts/tidy5e-features.html" sections=features}}
          {{> "modules/tidy5e-sheet/templates/actors/parts/tidy5e-npc-spellbook.html"}}
        </section>
      </div>

      {{!-- Effects Tab --}}
      <div class="tab effects" data-group="primary" data-tab="effects">
        {{>  "modules/tidy5e-sheet/templates/actors/parts/tidy5e-effects.html"}}
      </div>

      {{!-- Biography Tab --}}
      <div class="tab biography" data-group="primary" data-tab="biography">
        <div class="top-notes note-entries">
					<article>
						<ul class="character-details">
							<li><span>{{ localize "TIDY5E.Gender" }}:</span><span {{#if owner}}contenteditable="true"{{/if}} spellcheck="false" data-target="{{actor._id}}-gender" data-maxlength="40">{{data.details.gender}}</span><input data-input="{{actor._id}}-gender" type="hidden" name="data.details.gender" value="{{data.details.gender}}"></li>
							<li><span>{{ localize "TIDY5E.Age" }}:</span><span {{#if owner}}contenteditable="true"{{/if}} spellcheck="false" data-target="{{actor._id}}-age" data-maxlength="5">{{data.details.age}}</span><input data-input="{{actor._id}}-age" type="hidden" name="data.details.age" value="{{data.details.age}}"></li>
							<li><span>{{ localize "TIDY5E.Height" }}:</span><span {{#if owner}}contenteditable="true"{{/if}} spellcheck="false" data-target="{{actor._id}}-height" data-maxlength="20">{{data.details.height}}</span><input data-input="{{actor._id}}-height" type="hidden" name="data.details.height" value="{{data.details.height}}"></li>
							<li><span>{{ localize "TIDY5E.Weight" }}:</span><span {{#if owner}}contenteditable="true"{{/if}} spellcheck="false" data-target="{{actor._id}}-weight" data-maxlength="20">{{data.details.weight}}</span><input data-input="{{actor._id}}-weight" type="hidden" name="data.details.weight" value="{{data.details.weight}}"></li>
							<li><span>{{ localize "TIDY5E.Eyes" }}:</span><span {{#if owner}}contenteditable="true"{{/if}} spellcheck="false" data-target="{{actor._id}}-eyes" data-maxlength="40">{{data.details.eyes}}</span><input data-input="{{actor._id}}-eyes" type="hidden" name="data.details.eyes" value="{{data.details.eyes}}"></li>
							<li><span>{{ localize "TIDY5E.Skin" }}:</span><span {{#if owner}}contenteditable="true"{{/if}} spellcheck="false" data-target="{{actor._id}}-skin" data-maxlength="40">{{data.details.skin}}</span><input data-input="{{actor._id}}-skin" type="hidden" name="data.details.skin" value="{{data.details.skin}}"></li>
							<li><span>{{ localize "TIDY5E.Hair" }}:</span><span {{#if owner}}contenteditable="true"{{/if}} spellcheck="false" data-target="{{actor._id}}-hair" data-maxlength="40">{{data.details.hair}}</span><input data-input="{{actor._id}}-hair" type="hidden" name="data.details.hair" value="{{data.details.hair}}"></li>
						</ul>
					</article>
				</div>
        <div class="toggle-personality-info" title="{{localize 'TIDY5E.TogglePersonalityInfo'}}">{{#if actor.flags.tidy5e-sheet.showNpcPersonalityInfo}}<i class="fas fa-angle-double-left"></i>{{else}}<i class="fas fa-angle-double-right"></i>{{/if}}</div>
        <div class="left-notes note-entries hidden">
          <article>
						<div class="section-titles biopage">{{ localize "DND5E.PersonalityTraits" }}</div>
						{{editor content=data.details.trait target="data.details.trait" button=true owner=owner editable=editable}}
					</article>
					<article>
						<div class="section-titles biopage">{{ localize "DND5E.Ideals" }}</div>
						{{editor content=data.details.ideal target="data.details.ideal" button=true owner=owner editable=editable}}
					</article>
					<article>
						<div class="section-titles biopage">{{ localize "DND5E.Bonds" }}</div>
						{{editor content=data.details.bond target="data.details.bond" button=true owner=owner editable=editable}}
					</article>
					<article>
						<div class="section-titles biopage">{{ localize "DND5E.Flaws" }}</div>
						{{editor content=data.details.flaw target="data.details.flaw" button=true owner=owner editable=editable}}
					</article>
        </div>

        <div class="right-notes note-entries">
          <article class="biography-notes">
            <div class="section-titles">{{ localize "DND5E.Background" }}/{{ localize "DND5E.Biography" }}</div>
            {{editor content=data.details.biography.value target="data.details.biography.value" button=true owner=owner editable=editable}}
          </article>
        </div>
      </div>

      {{!-- Journal Tab --}}
      <div class="tab journal" data-group="primary" data-tab="journal">
        <div class="left-notes note-entries">
          <article>
            <div class="section-titles">
              <input type="text" name="data.details.notes1name" value="{{data.details.notes1name}}" placeholder="{{ localize 'TIDY5E.JournalPoi' }}"/>
            </div>
            {{editor content=data.details.notes1.value target="data.details.notes1.value" button=true owner=owner editable=editable}}
          </article>
          <article>
            <div class="section-titles">
              <input type="text" name="data.details.notes2name" value="{{data.details.notes2name}}" placeholder="{{ localize 'TIDY5E.JournalLoi' }}"/>
            </div>
            {{editor content=data.details.notes2.value target="data.details.notes2.value" button=true owner=owner editable=editable}}
          </article>
          <article>
            <div class="section-titles">
              <input type="text" name="data.details.notes3name" value="{{data.details.notes3name}}" placeholder="{{ localize 'TIDY5E.JournalQuests' }}"/>
            </div>
            {{editor content=data.details.notes3.value target="data.details.notes3.value" button=true owner=owner editable=editable}}
          </article>
          <article>
            <div class="section-titles">
              <input type="text" name="data.details.notes4name" value="{{data.details.notes4name}}" placeholder="{{ localize 'TIDY5E.JournalMisc' }}"/>
            </div>
            {{editor content=data.details.notes4.value target="data.details.notes4.value" button=true owner=owner editable=editable}}
          </article>
        </div>
        <div class="right-notes note-entries">
          <article class="journal-notes">
            <div class="section-titles">{{ localize 'TIDY5E.JournalEntries' }}</div>
            {{editor content=data.details.notes.value target="data.details.notes.value" button=true owner=owner editable=editable}}
          </article>
        </div>
      </div>

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