<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-dark-stars/templates/partials/partial-item-nav.hbs}}

    {{!-- Sheet Body --}}
    <section class="sheet-body">

      {{> systems/fvtt-dark-stars/templates/partials/partial-item-description.hbs}}

      <div class="tab details" data-group="primary" data-tab="details">

        <li class="flexrow"><label class="item-field-label-long">Perk Type</label>
          <select class="item-field-label-vlong" type="text" name="system.perktype" value="{{system.perktype}}" data-dtype="String">
            {{#select system.perktype}}
              {{#each config.perktypes as |type key|}}
              <option value="{{key}}">{{type}}</option>
              {{/each}}
            {{/select}}
          </select> 
        </li>

        {{#if (eq system.perktype "normal")}}
        <li class="flexrow">
          <label class="item-field-label-long">Starting Skill Cost</label>
          <input type="text" class="item-field-label-medium input-numeric-short padd-right" name="system.cost" value="{{system.cost}}" data-dtype="Number"/>
        </li>
        {{else}}

          {{#if (eq system.perktype "role")}}
          <li class="flexrow">
            <label class="item-field-label-long">Role</label>
            <input type="text" class="item-field-label-vlong" name="system.role" value="{{system.role}}" data-dtype="String"/>
          </li>
          {{/if}}

          <li class="flexrow">
            <label class="item-field-label-long">Requirements</label>
            <input type="text" class="item-field-label-vlong" name="system.requirements" value="{{system.requirements}}" data-dtype="String"/>
          </li>
          <li class="flexrow">
            <label class="item-field-label-long">XP Cost</label>
            <input type="text" class="item-field-label-medium input-numeric-short padd-right" name="system.xpcost" value="{{system.xpcost}}" data-dtype="Number"/>
          </li>
        {{/if}}

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