<form class="{{cssClass}}" autocomplete="off">
    <header class="sheet-header">
        <img class="profile-img" src="{{data.img}}" data-edit="img" title="{{data.name}}"/>
        <div class="header-fields">
            <h1 class="charname"><input name="name" type="text" value="{{data.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">Value</label><input type="text" name="data.data.value" value="{{data.data.value}}" data-dtype="Number"/></li>
            <ul class="stat-list alternate-list">              
              <li class="stat flexrow list-item" data-attribute="{{key}}">
                <span class="generic-label flexrow tooltip tooltip-nobottom" name="">Experiences list : </span>
              </li>
              {{#each skillExperienceList as |skillXP key|}}
              <li class="stat flexrow list-item item" data-item-id="{{skillXP._id}}">
                <span class="generic-label flexrow tooltip tooltip-nobottom" name="">{{skillXP.name}}</span>
                <div class="item-controls">
                  <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
                  <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
                </div>
              </li>
              {{/each}}
            </ul>
          <label class="generic-label">Description</label>
          {{editor content=data.data.description target="data.description" button=true owner=owner editable=editable}}
        </div>

    </section>
</form>