<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">Stat increase 1</label>
              <select class="competence-base flexrow" type="text" name="data.statincrease1" value="{{data.statincrease1}}" data-dtype="String">
                {{#select data.statincrease1}}
                {{> systems/fvtt-pegasus-rpg/templates/partial-options-statistics.html notapplicable=false mr=false}}
                {{/select}}
              </select> 
            </li>
            <li class="flexrow"><label class="generic-label">Stat increase 2</label>
              <select class="competence-base flexrow" type="text" name="data.statincrease2" value="{{data.statincrease2}}" data-dtype="String">
                {{#select data.statincrease2}}
                {{> systems/fvtt-pegasus-rpg/templates/partial-options-statistics.html notapplicable=false mr=false}}
                {{/select}}
              </select> 
            </li>
            <li class="flexrow">
              <label class="generic-label">Starting Specialisation at +1 DT (Two to be selected)</label>
            </li>
            <ul class="ul-level1">
              <li class="flexrow"> 
                <label class="generic-label">Starting Specialisations : </label>
              </li>
              <li class="flexrow"> 
                <input type="text" class="padd-right" name="data.messagespecplus1" value="{{data.messagespecplus1}}" data-dtype="String"/>
              </li>
              <li class="flexrow"><div class="drop-spec1"><label>Drop Specialisations here !</label></div>
              </li>
              {{#each data.specialisationsplus1 as |spec idx|}}
                <li class="flexrow">
                  <label name="data.specialisationsplus1[{{idx}}].name"><a class="view-subitem" data-type="specialisationsplus1" data-index="{{idx}}">{{spec.name}}</a></label>
                  <div class="item-controls padd-left">
                    <a class="item-control delete-subitem padd-left" data-type="specialisationsplus1" data-index="{{idx}}" title="Delete Spec"><i class="fas fa-trash"></i></a>
                  </div>   
                </li>
              {{/each}}
            </ul>
            <li class="flexrow">
              <label class="generic-label">Role Perk</label>
              </li>
              <ul class="ul-level1">
                <li class="flexrow"><div class="drop-specialperk1"><label>Drop Perks here !</label></div>
                </li>
                {{#each data.specialperk as |perk idx|}}
                <li class="flexrow">
                  <label name="data.specialperk[{{idx}}].name"><a class="view-subitem" data-type="specialperk" data-index="{{idx}}">{{perk.name}}</a></label>
                  <div class="item-controls padd-left">
                    <a class="item-control delete-subitem padd-left" data-type="specialperk" data-index="{{idx}}" title="Delete Perk"><i class="fas fa-trash"></i></a>
                  </div>   
                </li>
              {{/each}}
            </ul>
          </li>
            <li class="flexrow"><label class="generic-label">Statistic increase (Choose 2 at +1 DT)</label>
            </li>
            <ul class="ul-level1">
              <li class="flexrow">
                {{#each data.statincreasechoice as |stat idx|}}
                <label name="statchoice{{idx}}">{{stat.name}}</label>
                <label class="attribute-value checkbox"><input type="checkbox" class="stat-choice-flag" data-stat-idx="{{idx}}" {{checked stat.flag}}/></label>
                {{/each}}
              </li>
            </ul>
            <li class="flexrow"><label class="generic-label">Available specialisations (Choose 1 at +2 DT, Choose 2 at +1 DT)</label>
            </li>
            <ul class="ul-level1">
              <li class="flexrow"><div class="drop-spec2"><label>Drop Specialisations here !</label></div>
              </li>
              {{#each data.specincrease as |spec idx|}}
              <li class="flexrow">
                <label name="data.specincrease[{{idx}}].name"><a class="view-subitem" data-type="specincrease" data-index="{{idx}}">{{spec.name}}</a></label>
                <div class="item-controls padd-left">
                  <a class="item-control delete-subitem padd-left" data-type="specincrease" data-index="{{idx}}" title="Delete Spec"><i class="fas fa-trash"></i></a>
                </div>   
              </li>
            {{/each}}
            </ul>              
            </li>
            <li class="flexrow"><label class="generic-label">Available perks (Choose 2)</label>
            </li>  
              <ul class="ul-level1">
                <li class="flexrow"><div class="drop-perk2"><label>Drop Perks here !</label></div>
                </li>
                {{#each data.perks as |perk idx|}}
                <li class="flexrow">
                  <label name="data.perk[{{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>              
              </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>
        </div>

    </section>
</form>
