<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">Abilities</label>
            </li>
              <ul class="ul-level1">
                <li class="flexrow"><div class="drop-abilities"><label>Drop Abilities here !</label></div>
                </li>
                {{#each data.abilities as |ability idx|}}
                <li class="flexrow">
                  <label name="data.abilities[{{idx}}].name"><a class="view-subitem" data-type="abilities" data-index="{{idx}}">{{ability.name}}</a></label>
                  <div class="item-controls padd-left">
                    <a class="item-control delete-subitem padd-left" data-type="abilities" data-index="{{idx}}" title="Delete Ability"><i class="fas fa-trash"></i></a>
                  </div>   
                </li>
              {{/each}}
            </ul>
          </ul>

          <ul>            
            <li class="flexrow"><label class="generic-label">Selectable Stats ?</label>
              <label class="attribute-value checkbox"><input type="checkbox" name="data.selectablestats" {{checked data.selectablestats}}/></label>
            </li>
            {{#if data.selectablestats}}
              <li class="flexrow"><label class="generic-label">Select 1 stat only once?</label>
                <label class="attribute-value checkbox"><input type="checkbox" name="data.statsonlyonce" {{checked data.statsonlyonce}}/></label>
              </li>
              <li class="flexrow"><label class="generic-label">Number of selectable stats</label>
                <input type="text" class="input-numeric-short padd-right" name="data.numberstats" value="{{data.numberstats}}" data-dtype="Number"/>
              </li>
            {{/if}}
          </ul>
          
          <ul>            
            <li class="flexrow"><label class="generic-label">Number of Optionnal Abilities</label>
              <input type="text" class="input-numeric-short padd-right" name="data.nboptionnal" value="{{data.nboptionnal}}" data-dtype="Number"/>
            </li>

            <li class="flexrow"><label class="generic-label">Optionnal Abilities</label>
            </li>
              <ul class="ul-level1">
                <li class="flexrow"><div class="drop-optionnal-abilities"><label>Drop Abilities here !</label></div>
                </li>
                {{#each data.optionnalabilities as |ability idx|}}
                <li class="flexrow">
                  <label name="data.optionnalabilities[{{idx}}].name"><a class="view-subitem" data-type="optionnalabilities" data-index="{{idx}}">{{ability.name}}</a></label>
                  <div class="item-controls padd-left">
                    <a class="item-control delete-subitem padd-left" data-type="optionnalabilities" data-index="{{idx}}" title="Delete Ability"><i class="fas fa-trash"></i></a>
                  </div>   
                </li>
              {{/each}}
            </ul>
          </ul>

          <ul>            
            <li class="flexrow"><label class="generic-label">Perks Gained ?</label>
              <label class="attribute-value checkbox"><input type="checkbox" name="data.perksgained" {{checked data.perksgained}}/></label>
            </li>
            {{#if data.perksgained}}
              <li class="flexrow"><label class="generic-label">Choose in all available perks?</label>
                <label class="attribute-value checkbox"><input type="checkbox" name="data.perksall" {{checked data.perksall}}/></label>
              </li>
              <li class="flexrow"><label class="generic-label">Number of perks to gain</label>
                <input type="text" class="input-numeric-short padd-right" name="data.perksnumber" value="{{data.perksnumber}}" data-dtype="Number"/>
              </li>
              {{#if data.perksall}}
              {{else}}
              <ul class="ul-level1">
                <li class="flexrow"><div class="drop-race-perk"><label>Drop Perks here !</label></div>
                </li>
                {{#each data.perks as |perk idx|}}
                <li class="flexrow">
                  <label name="data.perks[{{idx}}].name"><a class="view-subitem" data-type="perks" data-index="{{idx}}">{{perk.name}}</a></label>
                  <div class="item-controls padd-left">
                    <a class="item-control delete-subitem padd-left" data-type="perks" data-index="{{idx}}" title="Delete Perk"><i class="fas fa-trash"></i></a>
                  </div>   
                </li>
                {{/each}}
              </ul>
              {{/if}}
            {{/if}}
          </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">Environment</label>
          <div class="small-editor item-text-long-line">
          {{editor content=data.environment target="data.environment" button=true owner=owner editable=editable}}
          </div>
          <label class="generic-label">Society/Culture</label>
          <div class="small-editor item-text-long-line">
          {{editor content=data.society_culture target="data.society_culture" button=true owner=owner editable=editable}}
          </div>
          <label class="generic-label">Outlook</label>
          <div class="small-editor item-text-long-line">
          {{editor content=data.outlook target="data.outlook" button=true owner=owner editable=editable}}
          </div>
        </div>

    </section>
</form>