<form class="{{cssClass}}" 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 isKeeper}}
        <div class="flexrow-coc7">
          <label>{{localize "CoC7.Source"}}:</label>
          <input type="text" name="system.source" value="{{data.system.source}}" />
        </div>
        <div class="flexrow-coc7">
          <label>{{localize "CoC7.SpellCastingTime"}}:</label>
          <input type="text" name="system.castingTime" value="{{data.system.castingTime}}" />
        </div>
      {{/if}}
    </div>
    <div class="aside">
      {{#if (and hasOwner (or isKeeper isOwner))}}
        <div class="flexrow-coc7">
          <span id="cast-spell" class="cast-button">
            <label>
              {{localize "CoC7.Cast"}}
            </label>
          </span>
          {{#if isKeeper}}
            <span id="cast-spell-hidden" class="cast-button">
              <label>
                {{localize "CoC7.CastHidden"}}
              </label>
            </span>
          {{/if}}
        </div>
      {{/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 isKeeper}}
        <a data-tab="details">
          <div class="tab-name">
            <span>
              {{localize "CoC7.Details"}}
            </span>
          </div>
        </a>
        <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="details">
        {{> "systems/CoC7/templates/items/spell/details.html"}}
      </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>