<form class="{{cssClass}} {{actor.type}} flexcol" autocomplete="off">
  {{!-- Sheet Header --}}
  <header class="sheet-header">
    <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100"/>
    <div class="header-fields">
      <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name"/></h1>

      <div class="resources grid">
        <div class="resource flex-group-center">
          <label for="system.trope" class="resource-label">Trope</label>
          <div class="resource-content flexrow flex-center flex-between">
          <input type="text" name="system.trope" value="{{system.trope}}" data-dtype="String"/>
          </div>
        </div>
      </div>
    </div>
  </header>

  {{!-- Sheet Tab Navigation --}}
  <nav class="sheet-tabs tabs" data-group="primary">
    {{!-- Default tab is specified in actor-sheet.mjs --}}
    <a class="item" data-tab="features">Features</a>
    <a class="item" data-tab="schoolbag">School Bag</a>
    <a class="item" data-tab="strengths">Strengths</a>
    <a class="item" data-tab="trope">Trope Questions</a>
  </nav>

  {{!-- Sheet Body --}}
  <section class="sheet-body">

    {{!-- Owned Features Tab --}}
    <div class="tab features" data-group="primary" data-tab="features">
      <section class="grid grid-3col">
        <section class="main grid-span-2">
          {{> "systems/kids-on-brooms/templates/actor/parts/actor-features.html"}}
          {{> "systems/kids-on-brooms/templates/actor/parts/actor-adversity.html"}}
        </section>

        <aside class="sidebar">
          {{> "systems/kids-on-brooms/templates/actor/parts/actor-stats.html"}}
          
        </aside>

      </section>
    </div>
    {{!-- Schoolbag Tab --}}
    <div class="tab features editor-border" data-group="primary" data-tab="schoolbag">
      {{editor schoolbag target="system.schoolbag" engine="prosemirror" button=false collaborate=false editable=true}}
    </div>

    {{!-- Strengths Tab --}}
    <div class="tab features editor-border" data-group="primary" data-tab="strengths">
      {{editor strengths target="system.strengths" engine="prosemirror" button=false collaborate=false editable=true}}
    </div>

    {{!-- Trope Questions Tab --}}
    <div class="tab features editor-border" data-group="primary" data-tab="trope">
      {{editor tropequestions target="system.tropequestions" engine="prosemirror" button=false collaborate=false editable=true}}
    </div>
    
  </section>
</form>