<form class="{{cssClass}} lancer-sheet" autocomplete="off">
  {{!-- Sheet Header --}}
  <header class="sheet-header card clipped-bot">
    <div class="flexcol grow">
      <h1 class="charname"><input class="header-field" name="name" type="text" value="{{item.name}}" placeholder="{{localize "lancer.placeholder.name"}}"/></h1>
      {{{item-edit-license}}}
    </div>
    {{{ ref-portrait-img item.img "img" item }}}
  </header>

  {{{textarea-card "DESCRIPTION" "system.description"}}}

  {{!-- Frame Stats --}}
  <div class="card clipped wraprow quadruple">
    <div class="wraprow quadruple">
      {{{clicker-stat-card "HP"          "mdi mdi-heart-outline"     "system.stats.hp" false }}}
      {{{clicker-stat-card "ARMOR"       "mdi mdi-shield-outline"    "system.stats.armor" false }}}
      {{{clicker-stat-card "REPAIRS"     "cci cci-repair"            "system.stats.repcap" false }}}
      {{{clicker-stat-card "EVASION"     "cci cci-evasion"           "system.stats.evasion" false }}}
      {{{clicker-stat-card "E-DEF"       "cci cci-edef"              "system.stats.edef" false }}}
      {{{clicker-stat-card "HEAT CAP"    "cci cci-heatcap"           "system.stats.heatcap" false }}}
      {{{clicker-stat-card "SPEED"       "mdi mdi-arrow-right-bold-hexagon-outline" "system.stats.speed" false }}}
      {{{clicker-stat-card "TECH ATK"    "cci cci-tech-full"         "system.stats.tech_attack" false }}}
      {{{clicker-stat-card "SENSORS"     "cci cci-sensor"            "system.stats.sensor_range" false }}}
      {{{clicker-stat-card "SAVE"        "cci cci-save"              "system.stats.save" false }}}
      {{{clicker-stat-card "SYS POINTS"  "cci cci-system"            "system.stats.sp" false }}}
      {{{clicker-stat-card "SIZE"        "cci cci-hexagon"           "system.stats.size" false }}}
    </div>
  </div>

  {{!-- Mounts --}}
  <div class="flexcol">
    <div>
      <span class="minor" style="float: left">AVAILABLE WEAPON MOUNTS</span>
      <a class="gen-control" data-action="append" data-path="system.mounts" data-action-value="(struct)mount_type" style="float: right">+</a>
    </div>
    <div class="flexrow">
      {{#each system.mounts as |mount key|}}
      <div class="flexrow mount arrayed-item">
        <select class="mount-selector" name="system.mounts.{{key}}" data-type="String" index="{{key}}">
          {{#select mount}}
          <option value="Aux/Aux">AUX/AUX</option>
          <option value="Main">MAIN</option>
          <option value="Main/Aux">MAIN/AUX</option>
          <option value="Flex">FLEX</option>
          <option value="Heavy">HEAVY</option>
          <option value="Integrated">INTEGRATED</option>
          <option value="Superheavy">SUPERHEAVY</option>
          <option value="delete">DELETE</option>
          {{/select}}
        </select>
      </div>
      {{/each}}
    </div>
  </div>

  {{!-- Traits --}}
  <div class="card">
    <div class="lancer-header lancer-primary">
      <span class="major left">TRAITS</span>
      <a class="gen-control" data-action="append" data-path="system.traits" data-action-value="(struct)frame_trait" style="float: right">+</a>
    </div>
    {{#each system.traits as |trait trait_index|}}
      <div class="card clipped lancer-trait">
        <div class="lancer-header lancer-trait major">
          <i class="cci cci-trait i--m i--light header-icon"> </i>
          <input class="lancer-invisible-input i--light" name="system.traits.{{trait_index}}.name" value="{{trait.name}}" type="text" data-dtype="String" />
          {{{popout-editor-button (concat "system.traits." trait_index ".description") }}}
          <a class="gen-control" data-action="splice" data-path="system.traits.{{trait_index}}">
            <i class="fas fa-trash"></i>
          </a>
        </div>
        <div class="desc-text">{{{safe-html trait.description }}}</div>
        {{{bonuses-view (concat "system.traits." trait_index ".bonuses") ../editable}}}
      </div>
    {{/each}}
  </div>

  {{!-- Core System --}}
  <div class="card clipped-top frame_core lancer-border-bonus">
    {{!-- General Description --}}
    <div class="lancer-header lancer-bonus frame_core medium">
      <i></i>
      <input class="lancer-invisible-input major i--light" name="system.core_system.name" value="{{system.core_system.name}}" data-dtype="String" />
      <div class="medium faded" style="justify-self: right;"> // CORE SYSTEM</div>
      {{{popout-editor-button "system.core_system.description" }}}
    </div>
    <div class="desc-text">{{{safe-html system.core_system.description }}}</div>

    {{!-- Integrated --}}
    <div class="integrated-wrapper card clipped flexcol">
      <div class="lancer-header lancer-primary">INTEGRATED GEAR</div>
      <ul>
      {{#each system.core_system.integrated as |integrated index|}}
        <li>
          <code>
            {{integrated}}
          </code>
        </li>
      {{/each}}
      {{{item-edit-arrayed-deployables "system.core_system.deployables" "DEPLOYABLES"}}}
      </ul>
    </div>

    {{!-- Passive Description + Bonuses --}}
    <div class="card clipped-top frame_core lancer-border-bonus">
      <div class="lancer-header lancer-bonus">
        <i class="mdi mdi-circle-expand i--m i--light"> </i>
        <input class="lancer-invisible-input medium i--light" name="system.core_system.passive_name" value="{{system.core_system.passive_name}}" data-dtype="String" />
        <div class="medium faded" style="justify-self: right;"> // PASSIVE</div>
        {{{popout-editor-button "system.core_system.passive_effect" }}}
      </div>
      <div class="desc-text">{{{safe-html system.core_system.passive_effect }}}</div>
      {{{bonuses-view "system.core_system.passive_bonuses" editable }}} 
      {{#each system.core_system.passive_actions as |action index|}}
        todo action
      {{/each}}
    </div>

    {{!-- Active Description + Bonuses --}}
    <div class="card clipped-top frame_core lancer-border-bonus">
      <div class="lancer-header lancer-bonus">
        <i class="cci cci-corebonus i--m i--light"> </i>
        <input class="lancer-invisible-input medium i--light" name="system.core_system.active_name" value="{{system.core_system.active_name}}" data-dtype="String" />
        <div class="faded" style="justify-self: right;"> // ACTIVE</div>
        {{{popout-editor-button "system.core_system.active_effect" }}}
      </div>
      <div class="desc-text">{{{safe-html system.core_system.active_effect }}}</div>
      {{{bonuses-view "system.core_system.active_bonuses" editable}}}
      {{#each system.core_system.active_actions as |action index|}}
        todo action
      {{/each}}
    </div>
    {{{item-edit-arrayed-tags "system.core_system.tags" "TAGS"}}}
  </div>
</form>
