<form class="{{cssClass}} flexcol" autocomplete="off">
  <header class="sheet-header flexrow" style="flex: 0 0 64px;padding-bottom: 2px;">
    <div class="header-details flexcol">
      <h1 class="name" style="height: 48px;">
        <input name="name" type="text" value="{{item.name}}" placeholder="{{ localize 'CoC7.Name' }}" />
      </h1>
      <input type="text" name="system.age" value="{{data.system.age}}" placeholder="{{localize 'CoC7.Age'}}" />
    </div>
    <img class="profile" src="{{item.img}}" data-edit="img" title="{{item.name}}" height="64" width="64" />
  </header>

  {{!-- Item Sheet Navigation --}}
  <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 style="line-height: 24px;" class="item" data-tab="details">{{localize 'CoC7.Details'}}</a>
    <a style="line-height: 24px;" class="item" data-tab="skills">{{ localize "CoC7.Skills" }}</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>

  {{!-- Item Sheet Body --}}
  <section style="overflow: hidden;flex: 1;" class="sheet-body">
    <div class="tab flexcol active" style="border-top: 2px groove #eeede0;padding: 0 5px;" data-group="primary" data-tab="description">
      {{editor enrichedDescriptionValue target="system.description.value" engine="prosemirror" button=true owner=owner editable=editable}}
    </div>

    <div class="tab flexcol details" style="border-top: 2px groove #eeede0;padding: 0 5px;" data-group="primary" data-tab="details">
      <div class="toggle-attributes" data-set="properties">
        <span class="toggle-property{{#if data.system.properties.cthulhuGain}} switched-on{{/if}}" data-property="cthulhuGain">{{localize 'CoC7.MythosGain'}}</span>
        <span class="toggle-property{{#if data.system.properties.sanityLoss}} switched-on{{/if}}" data-property="sanityLoss">{{localize 'CoC7.SANLoss'}}</span>
        <span class="toggle-property{{#if data.system.properties.sanitySame}} switched-on{{/if}}" data-property="sanitySame">{{localize 'CoC7.SANSameLossAsMythosGain'}}</span>
      </div>

      {{#if data.system.properties.cthulhuGain}}
        <div class="form-group" style="flex: 0 0 auto;">
          <label>{{localize 'CoC7.MythosGain'}}</label>
          <input type="text" name="system.cthulhuGain" value="{{data.system.cthulhuGain}}" placeholder="{{localize 'CoC7.MythosGain'}}" />
        </div>
      {{/if}}
      {{#if data.system.properties.sanityLoss}}
        <div class="form-group" style="flex: 0 0 auto;">
          <label>{{localize 'CoC7.SANLoss'}}</label>
          <input type="text" name="system.sanityLoss" value="{{data.system.sanityLoss}}" placeholder="{{localize 'CoC7.SANLoss'}}" />
        </div>
      {{/if}}
      {{#if data.system.properties.cthulhuGain}}
        <div class="form-group" style="flex: 0 0 auto;">
          <label>{{localize 'CoC7.PromptAddSpells'}}</label>
          <label class="checkbox" style="text-align: center;"><input type="checkbox" name="system.addSpells" {{checked data.system.addSpells}}></label>
        </div>
      {{/if}}
      <h3 class="form-header" style="flex: 0 0 auto;margin-top:1rem;">{{localize 'CoC7.ExperiencePackageBackground'}}</h3>
      <div class="form-group" style="flex: 0 0 auto;">
        <label>{{localize 'CoC7.ItemQuantity'}}</label>
        <input type="text" name="system.backgroundQty" value="{{data.system.backgroundQty}}" placeholder="{{localize 'CoC7.ItemQuantity'}}" data-dtype="Number" />
      </div>
      <div class="form-group" style="flex: 0 0 auto;">
        <label>{{localize 'CoC7.PromptAddInjuryScar'}}</label>
        <label class="checkbox" style="text-align: center;"><input type="checkbox" name="system.backgroundInjury" {{checked data.system.backgroundInjury}}></label>
      </div>
      <div class="form-group" style="flex: 0 0 auto;">
        <label>{{localize 'CoC7.PromptAddStatus'}}</label>
        <label class="checkbox" style="text-align: center;"><input type="checkbox" name="system.backgroundStatus" {{checked data.system.backgroundStatus}}></label>
      </div>
      <div class="form-group" style="flex: 0 0 auto;">
        <label>{{localize 'CoC7.AddSanityLossEncounter'}}</label>
        <label class="checkbox" style="text-align: center;"><input type="checkbox" name="system.backgroundEncounter" {{checked data.system.backgroundEncounter}}></label>
      </div>

      <h3 class="form-header" style="flex: 0 0 auto;margin-top:1rem;">{{localize 'CoC7.SanityLossImmunities'}}<a class="sanity-loss-type-add" style="float: right;" title="{{localize 'CoC7.AddSanityLossImmunity'}}" data-type="immunity"><i class="fas fa-plus-square"></i></a></h3>
      <div class="section-value">
        {{#each data.system.immunity as |type index|}}
          <div class="form-group item" data-index="{{index}}">
            <input type="text" name="system.immunity.{{index}}" value="{{type}}" placeholder="{{localize 'CoC7.SanityLossTypeReason'}}" />
            <div class="item-controls">
              <a class="item-control sanity-loss-type-delete" title="{{localize 'CoC7.DeleteSanityLossImmunity'}}"><i class="fas fa-trash"></i></a>
            </div>
          </div>
        {{/each}}
      </div>
    </div>

    <div class="tab skills" style="border-top: 2px groove #eeede0;padding: 0 5px;" data-group="primary" data-tab="skills">
      <div class="form-group">
        <label>{{ localize "CoC7.BonusPoints" }}</label>
        <input type="text" name="system.points" value="{{data.system.points}}" data-dtype="Number" />
      </div>

      <div class='{{#unless isOwned}}droppable{{/unless}} main-skills'>
        <h3 class="form-header">{{ localize "CoC7.CommonSkills" }}</h3>
        {{#if skillListEmpty}}
          <h4 class="warning">{{ localize "CoC7.EmptySkillList" }}</h4>
        {{/if}}
        <ol class="item-list">
          {{#each data.system.skills as |skill|}}
            <li class="item flexrow" data-item-id="{{skill._id}}" data-cocid="{{skill.flags.CoC7.cocidFlag.id}}">
              <div class="item-name flexrow">
                <h4>{{skill.name}} ({{skill.system.base}}%)</h4>
              </div>

              <div class="item-controls">
                <a class="item-control item-delete" title="{{localize 'CoC7.DeleteItem'}}"><i class="fas fa-trash"></i></a>
              </div>
            </li>
          {{/each}}
        </ol>
      </div>

      <h3 class="form-header" style="flex: 0 0 auto;margin-top:1rem;">{{ localize "CoC7.OptionSkills" }}<a class="group-control add-group" style="float: right;"><i class="fas fa-plus-square"></i></a></h3>

      {{#each data.system.groups as |group i|}}
        <ol class="item-list group" style="border: 1px groove;padding: 0 0.3rem;" data-group={{i}}>
          <div class='droppable optional-skills'>
            <div class="form-group">
              <label>{{ localize "CoC7.Choose" }}</label>
              <input type="text" name="system.groups.{{i}}.options" value="{{lookup this 'options'}}" placeholder="{{ localize 'CoC7.ChoiceNumber' }}" />
              <a class="group-control remove-group"><i class="fas fa-minus" style="line-height: 20px;"></i></a>
            </div>
            {{#if group.isEmpty}}
              <h4 class="warning">{{ localize "CoC7.EmptySkillList" }}</h4>
            {{/if}}
            {{#each group.skills as |skill|}}
              <li class="item flexrow" data-item-id="{{skill._id}}" data-cocid="{{skill.flags.CoC7.cocidFlag.id}}">
                <div class="item-name flexrow">
                  <h4>{{skill.name}} ({{skill.system.base}}%)</h4>
                </div>
                <div class="item-controls">
                  <a class="item-control group-item-delete" title="{{localize 'CoC7.DeleteItem'}}"><i class="fas fa-trash"></i></a>
                </div>
              </li>
            {{/each}}
          </div>
        </ol>
      {{/each}}
    </div>
    {{#if isKeeper}}
      <div class="tab keeper" 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>