<section class="mgne-sheet">
  <div class="sheet-header">
    <img class="actor-portrait" src="{{actor.img}}" data-edit="img" data-action="editImage" alt="{{actor.name}}" />
    <div class="header-fields">
      <input type="text" name="name" value="{{source.name}}" />
      <div class="grid three">
        <div class="resource-box resource-box-track resource-box-compact resource-box-inline resource-box-inline-track">
          <label class="resource-label-accent">{{localize "MGNE.Common.HP"}}</label>
          <div class="resource-track">
            <div class="numeric-cluster">
              <span class="numeric-caption numeric-caption-strong">{{localize "MGNE.Common.Current"}}</span>
              <input class="numeric-input" type="number" name="system.hp.value" value="{{source.system.hp.value}}" />
            </div>
            <span class="track-separator">/</span>
            <div class="numeric-cluster">
              <span class="numeric-caption numeric-caption-strong">{{localize "MGNE.Common.Max"}}</span>
              <input class="numeric-input" type="number" name="system.hp.max" value="{{source.system.hp.max}}" />
            </div>
          </div>
        </div>
        <div class="resource-box resource-box-compact">
          <label>{{localize "MGNE.Common.Morale"}}</label>
          <div class="numeric-pill">
            <select class="compact-select" name="system.morale">
              {{#each selectOptions.moraleValues}}
                <option value="{{value}}" {{#if (isEqual ../source.system.morale value)}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
          </div>
        </div>
        <div class="resource-box resource-box-compact">
          <label>{{localize "MGNE.Common.ArmorDie"}}</label>
          <div class="numeric-pill">
            <select class="compact-select" name="system.armor.die">
              {{#each selectOptions.armorDice}}
                <option value="{{value}}" {{#if (isEqual ../source.system.armor.die value)}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="inventory-section">
    <div class="inventory-header">
      <h3>{{localize "MGNE.Common.Attack"}}</h3>
    </div>
    <fieldset>
      <div class="grid three">
        <div>
          <label>{{localize "MGNE.Common.Label"}}</label>
          <input type="text" name="system.attack.label" value="{{source.system.attack.label}}" />
        </div>
        <div>
          <label>{{localize "MGNE.Common.Damage"}}</label>
          <input type="text" name="system.attack.damage" value="{{source.system.attack.damage}}" />
        </div>
        <div class="inline-buttons">
          <button type="button" class="rollable" data-roll-type="profile-attack">{{localize "MGNE.Common.Attack"}}</button>
          <button type="button" class="rollable" data-roll-type="profile-damage">{{localize "MGNE.Common.Damage"}}</button>
          <button type="button" class="rollable" data-roll-type="morale">{{localize "MGNE.Common.Morale"}}</button>
        </div>
      </div>
    </fieldset>
  </div>

  <div class="grid three">
    <div>
      <label>{{localize "MGNE.Companion.TheyValue"}}</label>
      <input type="text" name="system.valueText" value="{{source.system.valueText}}" />
    </div>
    <div>
      <label>{{localize "MGNE.Companion.Trait"}}</label>
      <input type="text" name="system.traitText" value="{{source.system.traitText}}" />
    </div>
    <div>
      <label>{{localize "MGNE.Companion.Specialty"}}</label>
      <input type="text" name="system.specialtyText" value="{{source.system.specialtyText}}" />
    </div>
  </div>

  <div class="grid two">
    <!-- Adventuring Behavior Table -->
    <div class="inventory-section creature-action-table-section">
      <div class="inventory-header">
        <h3>{{localize "MGNE.Companion.AdventuringBehavior"}}</h3>
        {{#if adventuringTable}}
          <div class="action-table-buttons">
            <button type="button" data-action="rollAdventuringBehavior" class="rollable" data-tooltip="{{localize "MGNE.Companion.RollBehavior"}}">
              <i class="fa-solid fa-dice-d20"></i> {{localize "MGNE.Companion.RollBehavior"}}
            </button>
            <button type="button" data-action="openAdventuringBehavior" data-tooltip="{{localize "MGNE.Creature.OpenTable"}}">
              <i class="fa-solid fa-table-list"></i> {{localize "MGNE.Creature.OpenTable"}}
            </button>
            <button type="button" data-action="clearAdventuringBehavior" data-tooltip="{{localize "MGNE.Creature.ClearTable"}}">
              <i class="fa-solid fa-xmark"></i>
            </button>
          </div>
        {{/if}}
      </div>
      <div class="action-table-drop-zone {{#unless adventuringTable}}drop-hint{{/unless}}" data-behavior-slot="adventuring">
        {{#if adventuringTable}}
          <i class="fa-solid fa-table-list"></i>
          <span class="action-table-name">{{adventuringTable.name}}</span>
        {{else}}
          <i class="fa-solid fa-cloud-arrow-down"></i>
          <span>{{localize "MGNE.Creature.DropTableHint"}}</span>
        {{/if}}
      </div>
    </div>
    <!-- Combat Behavior Table -->
    <div class="inventory-section creature-action-table-section">
      <div class="inventory-header">
        <h3>{{localize "MGNE.Companion.CombatBehavior"}}</h3>
        {{#if combatTable}}
          <div class="action-table-buttons">
            <button type="button" data-action="rollCombatBehavior" class="rollable" data-tooltip="{{localize "MGNE.Companion.RollBehavior"}}">
              <i class="fa-solid fa-dice-d20"></i> {{localize "MGNE.Companion.RollBehavior"}}
            </button>
            <button type="button" data-action="openCombatBehavior" data-tooltip="{{localize "MGNE.Creature.OpenTable"}}">
              <i class="fa-solid fa-table-list"></i> {{localize "MGNE.Creature.OpenTable"}}
            </button>
            <button type="button" data-action="clearCombatBehavior" data-tooltip="{{localize "MGNE.Creature.ClearTable"}}">
              <i class="fa-solid fa-xmark"></i>
            </button>
          </div>
        {{/if}}
      </div>
      <div class="action-table-drop-zone {{#unless combatTable}}drop-hint{{/unless}}" data-behavior-slot="combat">
        {{#if combatTable}}
          <i class="fa-solid fa-table-list"></i>
          <span class="action-table-name">{{combatTable.name}}</span>
        {{else}}
          <i class="fa-solid fa-cloud-arrow-down"></i>
          <span>{{localize "MGNE.Creature.DropTableHint"}}</span>
        {{/if}}
      </div>
    </div>
  </div>

  <div class="grid two">
    <div class="inventory-section">
      <div class="inventory-header">
        <h3>{{localize "MGNE.Common.Description"}}</h3>
      </div>
      <fieldset>
        {{formInput systemFields.description enriched=(lookup enrichedFields "description") value=system.description name="system.description" toggled=true}}
      </fieldset>
    </div>
    <div class="inventory-section">
      <div class="inventory-header">
        <h3>{{localize "MGNE.Common.Notes"}}</h3>
      </div>
      <fieldset>
        {{formInput systemFields.notes enriched=(lookup enrichedFields "notes") value=system.notes name="system.notes" toggled=true}}
      </fieldset>
    </div>
  </div>
</section>
