fvtt-machine-gods-noxian-expanse/templates/creature-main.hbs

<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>

  <!-- Type + Number row -->
  <div class="creature-meta-row">
    <div class="creature-type-group">
      <span class="creature-meta-label">{{localize "MGNE.Creature.Type"}}</span>
      {{#each creatureTypes}}
        <label class="creature-type-checkbox">
          <input type="checkbox" name="system.creatureType" value="{{key}}" {{#if checked}}checked{{/if}} />
          <span>{{label}}</span>
        </label>
      {{/each}}
    </div>
    <div class="creature-number-group">
      <label class="creature-meta-label" for="creature-number">{{localize "MGNE.Creature.Number"}}</label>
      <input id="creature-number" class="creature-number-input" type="text" name="system.number" value="{{source.system.number}}" />
    </div>
  </div>

  <!-- Action Table -->
  <div class="inventory-section creature-action-table-section">
    <div class="inventory-header">
      <h3>{{localize "MGNE.Creature.ActionTable"}}</h3>
      {{#if actionTable}}
        <div class="action-table-buttons">
          <button type="button" data-action="rollActionTable" class="rollable" data-tooltip="{{localize "MGNE.Creature.RollAction"}}">
            <i class="fa-solid fa-dice-d20"></i> {{localize "MGNE.Creature.RollAction"}}
          </button>
          <button type="button" data-action="openActionTable" data-tooltip="{{localize "MGNE.Creature.OpenTable"}}">
            <i class="fa-solid fa-table-list"></i> {{localize "MGNE.Creature.OpenTable"}}
          </button>
          <button type="button" data-action="clearActionTable" data-tooltip="{{localize "MGNE.Creature.ClearTable"}}">
            <i class="fa-solid fa-xmark"></i>
          </button>
        </div>
      {{/if}}
    </div>
    <div class="action-table-drop-zone {{#unless actionTable}}drop-hint{{/unless}}">
      {{#if actionTable}}
        <i class="fa-solid fa-table-list"></i>
        <span class="action-table-name">{{actionTable.name}}</span>
      {{else}}
        <i class="fa-solid fa-cloud-arrow-down"></i>
        <span>{{localize "MGNE.Creature.DropTableHint"}}</span>
      {{/if}}
    </div>
  </div>

  <!-- Traits -->
  <div class="creature-traits-container">
    <div class="creature-traits-header">
      <h3>{{localize "MGNE.Creature.Traits"}}</h3>
      <button type="button" data-action="createItem" data-item-type="creature-trait">
        <i class="fa-solid fa-plus"></i> {{localize "MGNE.Creature.AddTrait"}}
      </button>
    </div>
    <div class="creature-traits-list">
      {{#each traits}}
        <div class="creature-trait-card" data-item-id="{{id}}">
          <div class="creature-trait-card-header">
            <div class="creature-trait-name" {{#if tooltip}}data-tooltip="{{tooltip}}" data-tooltip-class="mgne-item-tooltip"{{/if}}>
              <i class="fa-solid fa-bolt-lightning"></i>
              <span>{{name}}</span>
            </div>
            {{#if system.trigger}}
              <span class="creature-trait-trigger">{{system.trigger}}</span>
            {{/if}}
            <div class="item-actions">
              <button type="button" data-action="editItem" data-tooltip="{{localize "MGNE.Common.Edit"}}"><i class="fa-solid fa-pen"></i></button>
              <button type="button" data-action="deleteItem" data-item-id="{{id}}" data-tooltip="{{localize "MGNE.Common.Delete"}}"><i class="fa-solid fa-trash"></i></button>
            </div>
          </div>
        </div>
      {{else}}
        <p class="empty-state">{{localize "MGNE.Empty.NoTraits"}}</p>
      {{/each}}
    </div>
  </div>

  <!-- Description -->
  <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>

</section>