<form class="{{cssClass}}" autocomplete="off">
  {{!-- Sheet Header --}}
  <header class="sheet-header card clipped-bot">
    <h1 class="name">
      <i class="cci cci-npc-tier-{{system.tier}} tier-icon theme--npc" data-tooltip="Tier {{system.tier}}"></i>
      <input
        class="lancer-input"
        name="name"
        type="text"
        value="{{actor.name}}"
        placeholder='{{localize "lancer.placeholder.name"}}'
      >
    </h1>
    {{{ref-portrait-img actor.img "img" actor}}}
    <div class="header-details flexcol monospace">
      <div>
        <span>{{localize "lancer.npc-sheet.header.class"}} :: </span>
        <span class="major">
          {{#if system.class}}
            {{system.class.name}}
          {{else}}
            {{localize "lancer.npc-sheet.class.none"}}
          {{/if}}
        </span>
        {{#if system.class.system.role}}
          <span> // {{system.class.system.role}}</span>
        {{/if}}
      </div>
    </div>
  </header>

  {{!-- Sheet Body --}}
  <section class="sheet-body">
    <div class="flexcol">
      {{!-- Stats --}}
      <div class="wraprow quintuple">
        {{{clicker-stat-card "tier" (concat "cci cci-npc-tier-" system.tier) "system.tier" true}}}
        {{{stat-rollable-card "hull" "" "system.hull"}}}
        {{{stat-rollable-card "agi" "" "system.agi"}}}
        {{{stat-rollable-card "sys" "" "system.sys"}}}
        {{{stat-rollable-card "eng" "" "system.eng"}}}
        {{{stat-edit-max-card "hp" "mdi mdi-heart-outline" "system.hp.value" "system.hp.max"}}}
        {{{stat-edit-max-card "heat" "cci cci-heat" "system.heat.value" "system.heat.max"}}}
        {{{stat-view-card "armor" "mdi mdi-shield-outline" "system.armor"}}}
        {{{stat-edit-card "overshield" "mdi mdi-shield-star-outline" "system.overshield.value"}}}
        {{{stat-edit-rollable-card "burn" "cci cci-burn" "system.burn"}}}
        {{{stat-view-card "speed" "mdi mdi-arrow-right-bold-hexagon-outline" "system.speed"}}}
        {{{stat-view-card "evasion" "cci cci-evasion" "system.evasion"}}}
        {{{stat-view-card "edef" "cci cci-edef" "system.edef"}}}
        {{{stat-view-card "sensor_range" "cci cci-sensor" "system.sensor_range"}}}
        {{{stat-view-card "save" "cci cci-save" "system.save"}}}
        {{#if (eq system.size 0.5)}}
          {{{stat-view-card "size" (concat "cci cci-size-half") "system.size"}}}
        {{else}}
          {{{stat-view-card "size" (concat "cci cci-size-" system.size) "system.size"}}}
        {{/if}}
        {{{stat-view-card "activations" "cci cci-activate" "system.activations"}}}
        {{{stat-edit-max-card "structure" "cci cci-structure" "system.structure.value" "system.structure.max"}}}
        {{{stat-edit-max-card "stress" "cci cci-reactor" "system.stress.value" "system.stress.max"}}}
        {{{tech-flow-card "tech_attack" "cci cci-tech-full" "system.sys"}}}
      </div>

      {{!-- Class and templates --}}
      <div class="card clipped flexrow">
        <div style="padding-right: 5px">
          <div class="lancer-header lancer-primary submajor" style="height: 30px">
            {{localize "lancer.npc-sheet.class.label"}}
          </div>
          <div class="flexcol">
            {{#if system.class}}
              {{{ref-npc-class system.class "system.class"}}}
            {{else}}
              {{localize "lancer.npc-sheet.class.none"}}
            {{/if}}
          </div>
        </div>

        <div class="flexcol" style="padding-left: 5px">
          <span class="lancer-header lancer-primary submajor clipped-top">{{
              localize "lancer.npc-sheet.templates.label"
            }}</span>
          {{#each itemTypes.npc_template as |template index|}}
            {{{ref-npc-template template (concat "itemTypes.npc_template." index)}}}
          {{/each}}
        </div>
      </div>

      {{!-- Basic attack buttons --}}
      <div class="card clipped">
        <span class="lancer-header lancer-primary submajor">{{
            localize "lancer.common-sheet.headers.combatUtilities"
          }}</span>
        <div class="lancer-flow-button-grid">
          {{{flow-button (localize "lancer.common-sheet.buttons.basicAttack") "BasicAttack"}}}
          {{{flow-button (localize "lancer.common-sheet.buttons.damage") "Damage"}}}
          {{{flow-button (localize "lancer.common-sheet.buttons.tech") "TechAttack"}}}
        </div>
      </div>

      {{!-- Features --}}
      <div class="card clipped">
        <div class="lancer-header lancer-primary submajor">
          <div style="width: 120px"></div>
          <span>{{localize "lancer.npc-sheet.features.label"}}</span>
          <div class="lancer-button charge-macro" style="margin-top: 2px; margin-bottom: 2px; font-size: 0.75rem">
            <i class="mdi mdi-refresh i--3"></i> Recharge
          </div>
        </div>
        <div class="wraprow double">
          {{#each itemTypes.npc_feature as |feature index|}}
            {{{npc-feat-preview (concat "itemTypes.npc_feature." index)
          tier=../system.tier}}}
          {{/each}}
        </div>
      </div>

      {{!-- Notes --}}
      {{{textarea-card "NOTES" "system.notes"}}}

      {{!-- Active Effects --}}
      <div class="card clipped">
        <span class="lancer-header lancer-primary submajor">{{localize "lancer.npc-sheet.effects.label"}}</span>
        {{{effect-categories-view actor effect_categories}}}
      </div>
    </div>
  </section>
</form>
