<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 details" data-group="primary" data-tab="description">

      <label class="generic-label">Description</label>
      <div class="medium-editor item-text-long-line">
        {{editor data.description target="data.description" button=true owner=owner editable=editable}}
      </div>
      <label class="generic-label">Environment</label>
      <div class="medium-editor item-text-long-line">
        {{editor data.environment target="data.environment" button=true owner=owner editable=editable}}
      </div>
      <label class="generic-label">Society/Culture</label>
      <div class="medium-editor item-text-long-line">
        {{editor data.society_culture target="data.society_culture" button=true owner=owner editable=editable}}
      </div>
      <label class="generic-label">Outlook</label>
      <div class="medium-editor item-text-long-line">
        {{editor data.outlook target="data.outlook" 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">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="system.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="system.selectablestats" {{checked
            system.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="system.statsonlyonce" {{checked
            system.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="system.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="system.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="system.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="system.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="system.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="system.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="system.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>

    </div>

  </section>
</form>