<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">Roll Needed ?</label>
              <label class="attribute-value checkbox"><input type="checkbox" name="data.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="data.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">NRG Cost</label>
              <input type="text" class="input-numeric-short padd-right" name="data.cost" value="{{data.cost}}" data-dtype="Number"/>
            </li>
            <li class="flexrow"><label class="generic-label">NRG Spent</label>
              <select class="competence-base flexrow" type="text" name="data.costtype" value="{{data.costtype}}" data-dtype="String">
                {{#select data.family}}
                <option value="once">Once</option>
                <option value="perlevel">Per Level</option>
                <option value="perround">Per Round</option>
                {{/select}}
              </select> 
            </li>
            <li class="flexrow"><label class="generic-label">Range</label>
              <input type="text" class="input-numeric-short padd-right" name="data.range" value="{{data.range}}" data-dtype="Number"/>
            </li>
            <li class="flexrow"><label class="generic-label">Action</label>
              <select class="competence-base flexrow" type="text" name="data.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="data.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">Available Effects</label>
              <div class="small-editor item-text-long-line">
              {{editor content=data.effects target="data.effects" button=true owner=owner editable=editable}}
              </div>
            </li>
            <li class="flexrow"><label class="generic-label">Purchased Effects</label>
              <div class="small-editor item-text-long-line">
              {{editor content=data.purchasedeffects target="data.purchasedeffects" button=true owner=owner editable=editable}}
              </div>
            </li>
          </ul>
        </div>

    </section>
</form>