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

      <ul class="summary flexrow-coc7">
        <li class="flex2">
          <input type="text" name="system.source" value="{{data.system.source}}" placeholder="{{ localize 'CoC7.Source' }}" />
        </li>
        <li class="flex3">
          {{occupationPointsString}}
        </li>
      </ul>

    </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>
    {{#unless isOwned}}<a style="line-height: 24px;" class="item" data-tab="details">{{ localize "CoC7.Details" }}</a>{{/unless}}
    <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">

    {{!-- Description Tab --}}
    <div class="tab flexrow-coc7 active" data-group="primary" data-tab="description">

      <div class="item-properties">
        <ol class="properties-list">
          {{#each itemProperties}}
            <li>{{this}}</li>
          {{/each}}
        </ol>
      </div>

      {{editor enrichedDescriptionValue target="system.description.value" engine="prosemirror" button=true owner=owner editable=editable}}
    </div>

    {{!-- Spells Tab --}}
    <div class="tab details" data-group="primary" data-tab="details">

      <h3 class="form-header">{{ localize "CoC7.OccupationType" }}</h3>
      <div class="occupation-type form-group stacked">
        <div class="flexrow-coc7">
          <label class="checkbox">
            <input type="checkbox" name="system.type.classic" {{checked data.system.type.classic}} /> {{ localize "CoC7.Classic" }}
          </label>
          <label class="checkbox">
            <input type="checkbox" name="system.type.lovecraftian" {{checked data.system.type.lovecraftian}} /> {{ localize "CoC7.Lovecraftian" }}
          </label>
          <label class="checkbox">
            <input type="checkbox" name="system.type.modern" {{checked data.system.type.modern}} /> {{ localize "CoC7.Modern" }}
          </label>
          <label class="checkbox">
            <input type="checkbox" name="system.type.pulp" {{checked data.system.type.pulp}} /> {{ localize "CoC7.Pulp" }}
          </label>
        </div>
      </div>

      <h3 class="form-header">{{ localize "CoC7.OccupationPoints" }}</h3>

      <div class="form-group">
        <label class="checkbox">
          <input type="checkbox" name="system.occupationSkillPoints.str.selected" {{checked data.system.occupationSkillPoints.str.selected}} /> {{ localize "CHARAC.Strengh" }}
        </label>
        {{#if data.system.occupationSkillPoints.str.selected}}
          <label class="checkbox">
            <input type="checkbox" name="system.occupationSkillPoints.str.optional" {{checked data.system.occupationSkillPoints.str.optional}} /> {{ localize "CoC7.Optional" }}
          </label>
          <input type="text" name="system.occupationSkillPoints.str.multiplier" value="{{data.system.occupationSkillPoints.str.multiplier}}" data-dtype="Number" placeholder="{{ localize 'CoC7.Multiplier' }}" />
        {{/if}}
      </div>

      <div class="form-group">
        <label class="checkbox">
          <input type="checkbox" name="system.occupationSkillPoints.con.selected" {{checked data.system.occupationSkillPoints.con.selected}} /> {{ localize "CHARAC.Constitution" }}
        </label>
        {{#if data.system.occupationSkillPoints.con.selected}}
          <label class="checkbox">
            <input type="checkbox" name="system.occupationSkillPoints.con.optional" {{checked data.system.occupationSkillPoints.con.optional}} /> {{ localize "CoC7.Optional" }}
          </label>
          <input type="text" name="system.occupationSkillPoints.con.multiplier" value="{{data.system.occupationSkillPoints.con.multiplier}}" data-dtype="Number" placeholder="{{ localize 'CoC7.Multiplier' }}" />
        {{/if}}
      </div>

      <div class="form-group">
        <label class="checkbox">
          <input type="checkbox" name="system.occupationSkillPoints.siz.selected" {{checked data.system.occupationSkillPoints.siz.selected}} /> {{ localize "CHARAC.Size" }}
        </label>
        {{#if data.system.occupationSkillPoints.siz.selected}}
          <label class="checkbox">
            <input type="checkbox" name="system.occupationSkillPoints.siz.optional" {{checked data.system.occupationSkillPoints.siz.optional}} /> {{ localize "CoC7.Optional" }}
          </label>
          <input type="text" name="system.occupationSkillPoints.siz.multiplier" value="{{data.system.occupationSkillPoints.siz.multiplier}}" data-dtype="Number" placeholder="{{ localize 'CoC7.Multiplier' }}" />
        {{/if}}
      </div>

      <div class="form-group">
        <label class="checkbox">
          <input type="checkbox" name="system.occupationSkillPoints.dex.selected" {{checked data.system.occupationSkillPoints.dex.selected}} /> {{ localize "CHARAC.Dexterity" }}
        </label>
        {{#if data.system.occupationSkillPoints.dex.selected}}
          <label class="checkbox">
            <input type="checkbox" name="system.occupationSkillPoints.dex.optional" {{checked data.system.occupationSkillPoints.dex.optional}} /> {{ localize "CoC7.Optional" }}
          </label>
          <input type="text" name="system.occupationSkillPoints.dex.multiplier" value="{{data.system.occupationSkillPoints.dex.multiplier}}" data-dtype="Number" placeholder="{{ localize 'CoC7.Multiplier' }}" />
        {{/if}}
      </div>

      <div class="form-group">
        <label class="checkbox">
          <input type="checkbox" name="system.occupationSkillPoints.app.selected" {{checked data.system.occupationSkillPoints.app.selected}} /> {{ localize "CHARAC.Appearance" }}
        </label>
        {{#if data.system.occupationSkillPoints.app.selected}}
          <label class="checkbox">
            <input type="checkbox" name="system.occupationSkillPoints.app.optional" {{checked data.system.occupationSkillPoints.app.optional}} /> {{ localize "CoC7.Optional" }}
          </label>
          <input type="text" name="system.occupationSkillPoints.app.multiplier" value="{{data.system.occupationSkillPoints.app.multiplier}}" data-dtype="Number" placeholder="{{ localize 'CoC7.Multiplier' }}" />
        {{/if}}
      </div>

      <div class="form-group">
        <label class="checkbox">
          <input type="checkbox" name="system.occupationSkillPoints.int.selected" {{checked data.system.occupationSkillPoints.int.selected}} /> {{ localize "CHARAC.Intelligence" }}
        </label>
        {{#if data.system.occupationSkillPoints.int.selected}}
          <label class="checkbox">
            <input type="checkbox" name="system.occupationSkillPoints.int.optional" {{checked data.system.occupationSkillPoints.int.optional}} /> {{ localize "CoC7.Optional" }}
          </label>
          <input type="text" name="system.occupationSkillPoints.int.multiplier" value="{{data.system.occupationSkillPoints.int.multiplier}}" data-dtype="Number" placeholder="{{ localize 'CoC7.Multiplier' }}" />
        {{/if}}
      </div>

      <div class="form-group">
        <label class="checkbox">
          <input type="checkbox" name="system.occupationSkillPoints.pow.selected" {{checked data.system.occupationSkillPoints.pow.selected}} /> {{ localize "CHARAC.Power" }}
        </label>
        {{#if data.system.occupationSkillPoints.pow.selected}}
          <label class="checkbox">
            <input type="checkbox" name="system.occupationSkillPoints.pow.optional" {{checked data.system.occupationSkillPoints.pow.optional}} /> {{ localize "CoC7.Optional" }}
          </label>
          <input type="text" name="system.occupationSkillPoints.pow.multiplier" value="{{data.system.occupationSkillPoints.pow.multiplier}}" data-dtype="Number" placeholder="{{ localize 'CoC7.Multiplier' }}" />
        {{/if}}
      </div>

      <div class="form-group">
        <label class="checkbox">
          <input type="checkbox" name="system.occupationSkillPoints.edu.selected" {{checked data.system.occupationSkillPoints.edu.selected}} /> {{ localize "CHARAC.Education" }}
        </label>
        {{#if data.system.occupationSkillPoints.edu.selected}}
          <label class="checkbox">
            <input type="checkbox" name="system.occupationSkillPoints.edu.optional" {{checked data.system.occupationSkillPoints.edu.optional}} /> {{ localize "CoC7.Optional" }}
          </label>
          <input type="text" name="system.occupationSkillPoints.edu.multiplier" value="{{data.system.occupationSkillPoints.edu.multiplier}}" data-dtype="Number" placeholder="{{ localize 'CoC7.Multiplier' }}" />
        {{/if}}
      </div>

      <h3 class="form-header">{{ localize "CoC7.CoCIDFlag.keys.i.skill.credit-rating" }}</h3>
      <div class="form-group">
        <input type="text" name="system.creditRating.min" value="{{data.system.creditRating.min}}" placeholder="{{  localize 'CoC7.Minimum' }}" />
        <input type="text" name="system.creditRating.max" value="{{data.system.creditRating.max}}" placeholder="{{  localize 'CoC7.Maximum' }}" />
      </div>
    </div>

    {{!-- Spells Tab --}}
    <div class="tab skills" data-group="primary" data-tab="skills">
      <div class='{{#unless isOwned}}droppable{{/unless}} main-skills'>

        <h3 class="form-header">{{ localize "CoC7.CommonSkills" }}</h3>

        {{#if skillListEmpty}}
          <h3 class="warning">{{ localize "CoC7.EmptySkillList" }}</h3>
        {{/if}}

        <ol class="item-list">
          {{#each data.system.skills as |skill|}}
            <li class="item flexrow-coc7" data-item-id="{{skill._id}}" data-cocid="{{skill.flags.CoC7.cocidFlag.id}}">
              <div class="item-name flexrow-coc7">
                <h4>{{skill.name}} ({{skill.system.base}}%)</h4>
              </div>

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

      {{#unless isOwned}}
        <h3 class="form-header">
          {{ localize "CoC7.OptionSkills" }}
          <a class="group-control add-group"><i class="fas fa-plus"></i></a>
        </h3>

        {{#each data.system.groups as |group i|}}
          <ol class="item-list group" style='border: 1px groove;' 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}}
                <h3 class="warning">{{ localize "CoC7.EmptySkillList" }}</h3>
              {{/if}}
              {{#each group.skills as |skill|}}
                <li class="item flexrow-coc7" data-item-id="{{skill._id}}" data-cocid="{{skill.flags.CoC7.cocidFlag.id}}">
                  <div class="item-name flexrow-coc7">
                    <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}}

        <h3 class="form-header">
          {{ localize "CoC7.AdditionalSkills" }}
        </h3>
        <div class='form-group'>
          <input type="text" name="system.personal" value="{{data.system.personal}}" data-dtype="Number" placeholder="0" style="flex: 0 0 2rem;" />
          <input type="text" name="system.personalText" value="{{data.system.personalText}}" placeholder="{{ localize 'CoC7.PersonalSpecialityPlaceholder' }}" />
        </div>
      {{/unless}}
    </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>