<form class="{{cssClass}}" autocomplete="off">
  <header class="sheet-header">
    <img class="item-sheet-img" src="{{img}}" data-edit="img" title="{{name}}" />
    <div class="header-fields">
      <h1 class="charname"><input name="name" type="text" value="{{name}}" placeholder="Name" /></h1>
    </div>
  </header>

  {{> systems/fvtt-pegasus-rpg/templates/partial-item-nav.html}}

  {{!-- Sheet Body --}}
  <section class="sheet-body">

    <div class="tab description" data-group="primary" data-tab="description">
      <div class="medium-editor item-text-long-line">
        <label class="generic-label">Description</label>
        {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
      </div>
      <div class="medium-editor item-text-long-line">
        <label class="generic-label">Available Effects</label>
        {{editor content=data.effects target="data.effects" button=true owner=owner editable=editable}}
      </div>
      <div class="medium-editor item-text-long-line">
        <label class="generic-label">Purchased Effects</label>
          {{editor content=data.purchasedeffects target="data.purchasedeffects" button=true owner=owner
          editable=editable}}
      </div>
    </div>

    <div class="tab details" data-group="primary" data-tab="details">
      <ul>
        <li class="flexrow"><label class="generic-label">Roll Needed ?</label>
          <label class="attribute-value checkbox"><input type="checkbox" name="system.rollneeded" {{checked
              data.rollneeded}} /></label>
        </li>
        {{#if data.rollneeded}}
        <li class="flexrow"><label class="generic-label">Related Statistic (only if roll is needed)</label>
          <select class="competence-base flexrow" type="text" name="system.statistic" value="{{data.statistic}}"
            data-dtype="String">
            {{#select data.statistic}}
            {{> systems/fvtt-pegasus-rpg/templates/partial-options-statistics.html}}
            {{/select}}
          </select>
        </li>
        {{/if}}

        <li class="flexrow">
          <label class="generic-label">Activated ? </label>
          <label class="attribute-value checkbox"><input type="checkbox" name="system.activated" {{checked
              data.activated}} /></label>
        </li>

        <li class="flexrow"><label class="generic-label">NRG Cost</label>
          <input type="text" class="input-numeric-short padd-right" name="system.cost" value="{{data.cost}}"
            data-dtype="Number" />
        </li>
        <li class="flexrow"><label class="generic-label">NRG Spent</label>
          <input type="text" class="input-numeric-short padd-right" name="system.costspent" value="{{data.costspent}}"
            data-dtype="Number" />
        </li>
                
        <li class="flexrow"><label class="generic-label">Power Level</label>
          <input type="text" class="input-numeric-short padd-right" name="system.powerlevel" value="{{data.powerlevel}}" data-dtype="Number"/>
        </li>            

        <li class="flexrow"><label class="generic-label">Range</label>
          <select class="competence-base flexrow" type="text" name="system.range" value="{{data.range}}"
            data-dtype="String">
            {{#select data.range}}
            {{> systems/fvtt-pegasus-rpg/templates/partial-options-range.html notapplicable=true}}
            {{/select}}
          </select>
        </li>
        <li class="flexrow"><label class="generic-label">Action</label>
          <select class="competence-base flexrow" type="text" name="system.action" value="{{data.action}}"
            data-dtype="String">
            {{#select data.action}}
            <option value="soft">Soft</option>
            <option value="hard">Hard</option>
            <option value="full">Full</option>
            <option value="reactive">Reactive</option>
            {{/select}}
          </select>
        </li>
        <li class="flexrow"><label class="generic-label">Type</label>
          <select class="competence-base flexrow" type="text" name="system.type" value="{{data.type}}"
            data-dtype="String">
            {{#select data.type}}
            <option value="instant">Instant</option>
            <option value="active">Active</option>
            <option value="permanent">Permanent</option>
            <option value="reactive">Reactive</option>
            {{/select}}
          </select>
        </li>
        <li class="flexrow"><label class="generic-label">Power Source</label>
          <input type="text" class="padd-right" name="system.powersource" value="{{data.powersource}}"
            data-dtype="String" />
        </li>

        <li class="flexrow">
          <label class="generic-label">DMG Roll Needed ? </label>
          <label class="attribute-value checkbox"><input type="checkbox" name="system.dmgroll" {{checked
              data.dmgroll}} /></label>
        </li>
        {{#if data.dmgroll}}
        <li class="flexrow"><label class="generic-label">Related DMG Statistic </label>
          <select class="competence-base flexrow" type="text" name="system.dmgstatistic" value="{{data.dmgstatistic}}"
            data-dtype="String">
            {{#select data.dmgstatistic}}
            {{> systems/fvtt-pegasus-rpg/templates/partial-options-statistics.html}}
            {{/select}}
          </select>
        </li>
        {{/if}}

        <li class="flexrow"><label class="generic-label">When purchased display text</label>
          <input type="text" class="padd-right" name="system.purchasedtext" value="{{data.purchasedtext}}" data-dtype="String"/>
        </li>
        <li class="flexrow"><label class="generic-label">When activated display text</label>
          <input type="text" class="padd-right" name="system.activatedtext" value="{{data.activatedtext}}" data-dtype="String"/>
        </li>
        <li class="flexrow"><label class="generic-label">When deactivated display text</label>
          <input type="text" class="padd-right" name="system.deactivatedtext" value="{{data.deactivatedtext}}" data-dtype="String"/>
        </li>

        <li class="flexrow"><label class="generic-label">Power Level Cost</label>
          <input type="text" class="input-numeric-short padd-right" name="system.powerlevelcost" value="{{data.powerlevelcost}}"
            data-dtype="Number" />
        </li>

        <li class="flexrow"><label class="generic-label">Effects Gained</label>
        </li>
        <li>
          <ul class="ul-level1">
            <li class="flexrow">
              <div class="drop-power-effect"><label>Drop Effects here !</label></div>
            </li>
            {{#each data.effectsgained as |effect idx|}}
            <li class="flexrow">
              <label name="system.effectsgained[{{idx}}].name"><a class="view-subitem" data-type="effectsgained"
                  data-index="{{idx}}">{{effect.name}}</a></label>
              <div class="item-controls padd-left">
                <a class="item-control delete-subitem padd-left" data-type="effectsgained" data-index="{{idx}}"
                  title="Delete Effect"><i class="fas fa-trash"></i></a>
              </div>
            </li>
            {{/each}}
          </ul>
        </li>

      </ul>
    </div>

  </section>
</form>