<form class="{{cssClass}} flexcol-coc7" autocomplete="off">
  <div class="container">
    <div class="portrait">
      <img src="{{item.img}}" title="{{item.name}}" data-edit="img" />
    </div>
    <div class="information">
      <div class="flexrow-coc7">
        <input class="name" name="name" type="text" value="{{item.name}}" />
      </div>
      {{#if (or isKeeper initialReading)}}
        <div class="flexrow-coc7">
          <label>{{localize "CoC7.Author"}}:</label>
          <input type="text" name="system.author" value="{{data.system.author}}" />
        </div>
        <div class="flexrow-coc7">
          <label>{{localize "CoC7.Date"}}:</label>
          <input type="text" name="system.date" value="{{data.system.date}}" />
        </div>
        <div class="flexrow-coc7">
          <label>{{localize "CoC7.language"}}:</label>
          <input type="text" name="system.language" value="{{data.system.language}}" />
        </div>
      {{/if}}
    </div>
    <div class="aside">
      {{#if data.system.initialReading}}
        <div class="flexrow-coc7">
          <span>
            <label>
              {{localize "CoC7.InitialReading"}}
            </label>
          </span>
          <i class="fas fa-check"></i>
        </div>
        <div class="flexrow-coc7">
          <span>
            <label>
              {{localize "CoC7.FullStudies"}}:
            </label>
          </span>
          <span>
            <label>
              {{data.system.fullStudies}}
            </label>
          </span>
          <span>
            {{#if studyCompleted}}
              <i id="redo-full-study" class="fas fa-redo" title="{{localize "CoC7.RedoFullStudy"}}"></i>
            {{/if}}
          </span>
        </div>
      {{else}}
        <div class="flexrow-coc7">
          {{#if (and hasOwner (or isKeeper isOwner))}}
            <span id="attempt-initial-reading">
              <label>
                {{localize "CoC7.InitialReading"}}
              </label>
            </span>
          {{/if}}
        </div>
      {{/if}}
    </div>
    <div class="progress">
      {{#if data.system.type.mythos}}
        {{#if (or isKeeper initialReading)}}
          {{#if isKeeper}}
            <i id="decrease-progress" class="fas fa-minus"></i>
          {{/if}}
          <progress id="progress" name="system.study.progress" value="{{data.system.study.progress}}" max="{{data.system.study.necessary}}" {{#unless exhausted}} data-label="{{localize "CoC7.Progress"}}:
                {{data.system.study.progress}} / {{data.system.study.necessary}}
                {{localize data.system.study.units}}" {{/unless}}></progress>
          {{#if isKeeper}}
            <i id="increase-progress" class="fas fa-plus increase-progress"></i>
          {{/if}}
        {{/if}}
      {{/if}}
    </div>
    <nav class="navigation tabs" data-group="primary">
      <a data-tab="description">
        <div class="tab-name">
          <span>
            {{localize "CoC7.Description"}}
          </span>
        </div>
      </a>
      {{#if (or isKeeper initialReading)}}
        <a data-tab="content">
          <div class="tab-name">
            <span>
              {{localize "CoC7.Content"}}
            </span>
          </div>
        </a>
      {{/if}}
      {{#if isKeeper}}
        <a data-tab="details">
          <div class="tab-name">
            <span>
              {{localize "CoC7.Details"}}
            </span>
          </div>
        </a>
      {{/if}}
      {{#if (or data.system.type.mythos data.system.type.occult)}}
        {{#if (or isKeeper initialReading)}}
          <a data-tab="spells">
            <div class="tab-name">
              <span>
                {{localize "CoC7.Spells"}}
              </span>
            </div>
          </a>
        {{/if}}
      {{/if}}
      {{#if isKeeper}}
        <a data-tab="notes" class="keeper-only-tab" title="{{localize 'CoC7.GmNotes'}}">
          <div class="tab-name">
            <span><i class="game-icon game-icon-tentacles-skull"></i></span>
          </div>
        </a>
      {{/if}}
    </nav>
    <section class="body">
      <div class="tab" data-group="primary" data-tab="description">
        {{editor enrichedDescriptionValue target="system.description.value" engine="prosemirror" button=true owner=owner editable=editable}}
      </div>
      <div class="tab" data-group="primary" data-tab="content">
        {{editor enrichedContent target="system.content" engine="prosemirror" button=true owner=owner editable=editable}}
      </div>
      <div class="tab" data-group="primary" data-tab="details">
        {{> "systems/CoC7/templates/items/book/details.html"}}
      </div>
      <div class="tab" data-group="primary" data-tab="spells">
        <div class="spells">
          {{#if spellListEmpty}}
            <label>{{localize "CoC7.DragSpell"}}</label>
          {{/if}}
          <ul>
            {{#each data.system.spells as |spell key|}}
              <li class="spell" data-index="{{@index}}" data-id="{{spell._id}}">
                <div class="portrait">
                  <img src="{{spell.img}}" />
                </div>
                <div class="name">
                  <label class="spell-name">
                    {{spell.name}}
                  </label>
                </div>
                <div class="edit">
                  {{#if (or ../isKeeper spell.data.learned)}}
                    <i class="fas fa-edit edit-spell"></i>
                  {{/if}}
                  {{#if ../isKeeper}}
                    <i class="fas fa-trash delete-spell"></i>
                  {{/if}}
                </div>
                {{#if (and hasOwner (not spell.data.learned))}}
                  <div class="status">
                    <i class="fas fa-book-open teach-spell"></i>
                  </div>
                {{/if}}
              </li>
            {{/each}}
          </ul>
        </div>
      </div>
      <div class="tab" data-group="primary" data-tab="notes">
        {{editor enrichedDescriptionKeeper target="system.description.keeper" engine="prosemirror" button=true owner=owner editable=editable}}
      </div>
    </section>
  </div>
</form>