<form class="{{cssClass}} flexcol-coc7" autocomplete="off">
  <div class="item-header flexrow-coc7" style="flex: 0 0 110px;">
    <div class="item-property" style="display: flex; flex-direction: column; flex: 1;">
      <div class="item-name" style="display: flex; flex-direction: row; height: 24px;">
        <input type="hidden" name="name" value="{{item.name}}" />
        {{#if isSpecialized}}
          <input class="item-class" style="flex: 1;" type="text" name="system.skillName" value="{{data.system.skillName}}" placeholder="{{localize 'CoC7.Name'}}" />
          <span style="line-height: 22px;padding-right: 3px;">/</span>
          {{#if canModifySpec}}
            <input class="item-subclass" style="flex: 1;" type="text" name="system.specialization" value="{{data.system.specialization}}" placeholder="{{localize 'CoC7.SkillSpecial'}}" />
          {{else}}
            <div class="item-subclass" style="flex: 1;line-height: 22px;">{{data.system.specialization}}</div>
          {{/if}}
        {{else}}
          <input class="item-class" style="flex: 1;" type="text" name="system.skillName" value="{{data.system.skillName}}" placeholder="{{localize 'CoC7.Name'}}" />
        {{/if}}
        {{#if hadNonCharacterOwner}}
          <label>{{localize 'CoC7.Value'}}</label>
          <input type="text" name="system.value" value="{{data.system.value}}" />
        {{else}}
          <label>{{localize 'CoC7.SkillBase'}}</label>
          <input type="text" name="system.base" value="{{data.system.base}}" />
        {{/if}}
      </div>
      <div class="skill-attributes" style="display: block;" data-set="properties">
        {{#each _properties as |property key|}}
          <span class="toggle-switch {{#if property.isEnabled}} switched-on {{/if}}" data-property="{{property.id}}">{{localize property.name}} </span>
        {{/each}}
      </div>

      {{#unless hasOwner}}
        <div class="flexrow-coc7" style="margin: 4px 0;">
          <label style="margin-right: 10px;">{{ localize "CoC7.Eras" }}</label>
          <div class="skill-attributes" data-set="eras">
            {{#each _eras as |era key|}}
              <span class="toggle-switch {{#if era.isEnabled}} switched-on {{/if}}" data-property="{{era.id}}">{{era.name}}</span>
            {{/each}}
          </div>
        </div>
      {{/unless}}
    </div>
    <img class="profile-img" style="flex: 0 0 100px;" src="{{item.img}}" data-edit="img" title="{{item.name}}" height="100" width="100" />
  </div>

  <nav style="flex: 0 0 24px;margin-bottom: 4px;font-family: 'Modesto Condensed', 'Palatino Linotype', serif;font-size: 16px;font-weight: 700;" class="sheet-navigation tabs" data-group="primary">
    <a style="line-height: 24px;" class="item active" data-tab="description">{{ localize "CoC7.Description" }}</a>
    <a class="keeper-only-tab" data-tab="effects" title="{{localize 'CoC7.Effects'}}">
      <div class="tab-name"><span><i class="game-icon game-icon-aura"></i></span></div>
    </a>
    {{#if isKeeper}}
      <a style="line-height: 24px;" class="item keeper-only-tab" data-tab="keeper" title="{{localize 'CoC7.GmNotes'}}"><i class="game-icon game-icon-tentacles-skull"></i></a>
    {{/if}}
  </nav>

  <section class="sheet-body">
    <div class="tab description flexrow-coc7 active" style="border-top: 2px groove #eeede0;padding: 0 0 0 5px;overflow: auto;" data-group="primary" data-tab="description">
      {{editor enrichedDescriptionValue target="system.description.value" engine="prosemirror" button=true owner=owner editable=editable}}
    </div>
    <div class="tab coc7" data-group="primary" data-tab="effects">
      {{> "systems/CoC7/templates/common/active-effects.hbs"}}
    </div>
    {{#if isKeeper}}
      <div class="tab keeper flexcol-coc7" style="border-top: 2px groove #eeede0;padding: 0 5px;" data-group="primary" data-tab="keeper">
        {{editor enrichedDescriptionKeeper target="system.description.keeper" engine="prosemirror" button=true owner=owner editable=editable}}
      </div>
    {{/if}}
  </section>
</form>
