<form class="{{cssClass}}" autocomplete="off">
    <header class="sheet-header">
        <img class="profile-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>

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

        <div class="tab" data-group="primary">
          <ul>
            <li class="flexrow"><label class="generic-label">Active ?</label>
              <label class="attribute-value checkbox"><input type="checkbox" name="data.active" {{checked data.active}}/></label>
            </li>
            <li class="flexrow"><label class="generic-label">Level</label>
              <input type="text" class="input-numeric-short padd-right" name="data.level" value="{{data.level}}" data-dtype="Number"/>
            </li>
            <li class="flexrow"><label class="generic-label">Remaining round</label>
              <select class="competence-base flexrow" type="text" name="data.roundcount" value="{{data.roundcount}}" data-dtype="Number">
                {{#select data.roundcount}}
                <option value="3">Ready</option>
                <option value="2">Activated</option>
                <option value="1">2 Rounds left</option>
                <option value="0">1 Round left</option>
                {{/select}}
              </select> 
            </li>
            <li class="flexrow"><label class="generic-label">Number of use during activation</label>
              <select class="competence-base flexrow" type="text" name="data.nbuse" value="{{data.nbuse}}" data-dtype="Number">
                {{#select data.nbuse}}
                <option value="perkduration">For Duration of Perk</option>
                <option value="next1action">Next 1 Stated Action</option>
                <option value="next2action">Next 2 Stated Action</option>
                <option value="next3action">Next 3 Stated Action</option>
                {{/select}}
              </select> 
            </li>
            <li class="flexrow"><label class="generic-label">Gain Stat Dice</label>
              <select class="competence-base flexrow" type="text" name="data.gainstatdice" value="{{data.gainstatdice}}" data-dtype="String">
                {{#select data.gainstatdice}}
                {{> systems/fvtt-pegasus-rpg/templates/partial-options-statistics.html notapplicable=true}}
                {{/select}}
              </select> 
            </li>
            <li class="flexrow"><label class="generic-label">Gain Bonus Dice</label>
              <select class="competence-base flexrow" type="text" name="data.gainbonusdice" value="{{data.gainbonusdice}}" data-dtype="String">
                {{#select data.gainbonusdice}}
                {{> systems/fvtt-pegasus-rpg/templates/partial-options-statistics.html notapplicable=true}}
                {{/select}}
              </select> 
            </li>
            <li class="flexrow"><label class="generic-label">Gain Other Dice</label>
              <select class="competence-base flexrow" type="text" name="data.gainotherdice" value="{{data.gainotherdice}}" data-dtype="String">
                {{#select data.gainotherdice}}
                {{> systems/fvtt-pegasus-rpg/templates/partial-options-statistics.html notapplicable=true}}
                {{/select}}
              </select> 
            </li>
            <li class="flexrow"><label class="generic-label">Specialisation Affected</label>
              {{#each data.specialisation as |spec idx|}}
              <label name="data.specialisation[{{idx}}].name"><a class="view-spec" data-spec-index="{{idx}}">{{spec.name}}</a></label>
              <div class="item-controls padd-left">
                <a class="item-control delete-spec padd-left" data-spec-index="{{idx}}" title="Delete Spec"><i class="fas fa-trash"></i></a>
              </div>   
              {{/each}}
            </li>
            <li class="flexrow"><label class="generic-label">Range</label>
              <select class="competence-base flexrow" type="text" name="data.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">AoE</label>
              <select class="competence-base flexrow" type="text" name="data.aoe" value="{{data.aoe}}" data-dtype="String">
                {{#select data.aoe}}
                {{> systems/fvtt-pegasus-rpg/templates/partial-options-range.html notapplicable=true}}
                {{/select}}
              </select> 
            </li>
            <li class="flexrow"><label class="generic-label">Quantity of Targets</label>
              <input type="text" class="padd-right" name="data.nbtargets" value="{{data.nbtargets}}" data-dtype="Number"/>
            </li>
            <li class="flexrow"><label class="generic-label">NRG Cost</label>
              <input type="text" class="padd-right" name="data.nrgcost" value="{{data.nrgcost}}" data-dtype="Number"/>
            </li>        
          </ul>

          <label class="generic-label">Description</label>
          <div class="small-editor item-text-long-line">
          {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
          </div>
          <label class="generic-label">Rules</label>
          <div class="small-editor item-text-long-line">
          {{editor content=data.rules target="data.rules" button=true owner=owner editable=editable}}
          </div>
          <label class="generic-label">Upgrades</label>
          <div class="small-editor item-text-long-line">
          {{editor content=data.upgrades target="data.upgrades" button=true owner=owner editable=editable}}
          </div>
        </div>

    </section>
</form>