<div class="tab main sheet-part" data-group="sheet" data-tab="main">
  {{!-- Toggle Edit/Play --}}
  <div class="sheet-header-toggle">
    {{#if isEditMode}}
      <button type="button" data-action="toggleSheet">{{localize "VERMINE.playMode"}}</button>
    {{else}}
      <button type="button" data-action="toggleSheet">{{localize "VERMINE.editMode"}}</button>
    {{/if}}
  </div>

  {{!-- Sheet Header --}}
  <header class="sheet-header">
    <img class="profile-img" src="{{actor.img}}" data-action="editImage" data-edit="img" title="{{actor.name}}" height="100" width="100"/>
    <div class="header-fields">
      <div class="resources grid grid-4col">
        <h1 class="charname grid-span-2">
          {{#if isEditMode}}
          <input name="name" type="text" value="{{actor.name}}" placeholder="{{ localize 'IDENTITY.name' }}"/>
          {{else}}
          <span>{{actor.name}}</span>
          {{/if}}
        </h1>
        <div class="resource flex-group-center grid-span-1">
          <label for="system.pattern.value" class="resource-label">{{ localize 'ADVERSITY.pattern' }}</label>
          <div class="resource-content">
            {{#if isEditMode}}
            <select name="system.pattern.value" id="system.pattern.value" data-dtype="Number">
              {{#each patternOptions}}
                <option value="{{@key}}" {{#ife @key @root.system.pattern.value}}selected{{/ife}}>
                  {{localize label}} ({{@key}})
                </option>
              {{/each}}
            </select>
            {{else}}
            <span>{{system.pattern.value}}</span>
            {{/if}}
          </div>
        </div>
        <div class="resource flex-group-center grid-span-1">
          <label for="system.role.value" class="resource-label">{{ localize 'ADVERSITY.role' }}</label>
          <div class="resource-content">
            {{#if isEditMode}}
            <select name="system.role.value" id="system.role.value" data-dtype="Number">
              {{#each roleOptions}}
                <option value="{{@key}}" {{#ife @key @root.system.role.value}}selected{{/ife}}>
                  {{localize label}} ({{@key}})
                </option>
              {{/each}}
            </select>
            {{else}}
            <span>{{system.role.value}}</span>
            {{/if}}
          </div>
        </div>
      </div>
      <div class="resources grid grid-4col">
        <div class="resource flex-group-center">
          <label for="system.size.value" class="resource-label">{{ localize 'ADVERSITY.size' }}</label>
          <div class="resource-content">
            {{#if isEditMode}}
            <select name="system.size.value" id="system.size.value" data-dtype="Number">
              {{#each sizeOptions}}
                <option value="{{@key}}" {{#ife @key @root.system.size.value}}selected{{/ife}}>
                  {{@key}} ({{localize label}})
                </option>
              {{/each}}
            </select>
            {{else}}
            <span>{{#if (ne system.size.value "0")}}{{system.size.value}} ({{localize sizeLabel}}){{else}}{{localize 'VERMINE.none'}}{{/if}}</span>
            {{/if}}
          </div>
        </div>
        <div class="resource flex-group-center">
          <label for="system.pack.value" class="resource-label">{{ localize 'ADVERSITY.pack' }}</label>
          <div class="resource-content">
            {{#if isEditMode}}
            <select name="system.pack.value" id="system.pack.value" data-dtype="Number">
              <option value="0" {{#ife "0" @root.system.pack.value}}selected{{/ife}}>{{ localize 'VERMINE.none' }}</option>
              {{#each packOptions}}
                {{#if (ne @key "0")}}
                  <option value="{{@key}}" {{#ife @key @root.system.pack.value}}selected{{/ife}}>
                    {{@key}} ({{localize label}})
                  </option>
                {{/if}}
              {{/each}}
            </select>
            {{else}}
            <span>{{#if system.pack.value}}{{system.pack.value}} ({{localize packLabel}}){{else}}{{ localize 'VERMINE.none' }}{{/if}}</span>
            {{/if}}
          </div>
        </div>
        <div class="resource flex-group-center grid-span-2">
          <label class="resource-label">{{ localize 'VERMINE.computed_values' }}</label>
          <div class="resource-content">
            <span>{{ localize 'VERMINE.total_attack' }}: {{ system.computed.attack }}</span>
            <span style="margin-left: 10px;">{{ localize 'ADVERSITY.damage' }}: {{ system.computed.damage }}</span>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>
