<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">

      {{> systems/fvtt-pegasus-rpg/templates/partial-item-description.html}}

      <div class="tab details" data-group="primary" data-tab="details">
        <li class="flexrow"><label class="generic-label">Unavailable Vice</label>
        </li>
        <li>
          <ul class="ul-level1">
            <li class="flexrow"><div class="drop-virtue-vice"><label>Drop Vice here !</label></div>
            </li>
            {{#each data.unavailablevice as |vice idx|}}
            <li class="flexrow">
              <label name="system.unavailablevice[{{idx}}].name"><a class="view-subitem" data-type="unavailablevice" data-index="{{idx}}">{{vice.name}}</a></label>
              <div class="item-controls padd-left">
                <a class="item-control delete-subitem padd-left" data-type="unavailablevice" data-index="{{idx}}" title="Delete Vice"><i class="fas fa-trash"></i></a>
              </div>   
            </li>
            {{/each}}
          </ul>              
        </li>

        <li class="flexrow">
          <label class="generic-label">Activated ? </label>
          <label class="attribute-value checkbox"><input type="checkbox" name="system.activated" {{checked
              data.activated}} /></label>
        </li>

        <li class="flexrow"><label class="generic-label">Effects Gained</label>
        </li>
        <li>
          <ul class="ul-level1">
            <li class="flexrow"><div class="drop-virtue-vice-effect"><label>Drop Effects here !</label></div>
            </li>
            {{#each data.effectsgained as |effect idx|}}
            <li class="flexrow">
              <label name="system.effectsgained[{{idx}}].name"><a class="view-subitem" data-type="effectsgained" data-index="{{idx}}">{{effect.name}}</a></label>
              <div class="item-controls padd-left">
                <a class="item-control delete-subitem padd-left" data-type="effectsgained" data-index="{{idx}}" title="Delete Effect"><i class="fas fa-trash"></i></a>
              </div>   
            </li>
            {{/each}}
          </ul>              
        </li>

        <li class="flexrow"><label class="generic-label">Threat Level Value</label>
          <input type="text" class="input-numeric-short padd-right" name="system.threatlevel" value="{{data.threatlevel}}" data-dtype="Number"/>
        </li>

      </ul>
    </div>
      
    </section>
</form>