fvtt-adventures-with-emmy/templates/character-main.hbs

<section class="character-main character-main-{{#if isPlayMode}}play{{else}}edit{{/if}}">

  {{!-- Header: image + name + basic stats --}}
  <div class="actor-header">
    <img class="actor-img" src="{{actor.img}}" data-edit="img" data-action="editImage" data-tooltip="{{actor.name}}" />
    <div class="actor-identity">
      {{formInput fields.name value=source.name classes="actor-name"}}
      <div class="actor-details">
        <div class="detail-item">
          <label>{{localize "AWEMMY.Character.Level"}}</label>
          {{formInput systemFields.level value=system.level disabled=isPlayMode}}
        </div>
        <div class="detail-item">
          <label>{{localize "AWEMMY.Character.Stride"}}</label>
          {{formInput systemFields.stride value=system.stride disabled=isPlayMode}}
        </div>
      </div>
    </div>

    <div class="actor-stats">
      {{!-- HP --}}
      <div class="resource-block">
        <label>{{localize "AWEMMY.Character.HP"}}</label>
        <div class="resource-values">
          {{formInput systemFields.hp.fields.value value=system.hp.value classes="hp-value"}}
          <span class="separator">/</span>
          {{formInput systemFields.hp.fields.max value=system.hp.max disabled=isPlayMode classes="hp-max"}}
        </div>
      </div>

      {{!-- Flow Points --}}
      <div class="resource-block">
        <label>{{localize "AWEMMY.Character.FlowPoints"}}</label>
        <div class="resource-values">
          {{formInput systemFields.flowPoints.fields.value value=system.flowPoints.value classes="fp-value"}}
        </div>
        {{#if isPlayMode}}
        <div class="resource-stepper">
          <button type="button" data-action="flowPointsPlus" data-tooltip="+1">+</button>
          <button type="button" data-action="flowPointsMinus" data-tooltip="-1">−</button>
        </div>
        {{/if}}
      </div>
    </div>

    <div class="sheet-controls">
      <button type="button" data-action="toggleSheet" data-tooltip="{{#if isPlayMode}}{{localize 'AWEMMY.Sheet.EditMode'}}{{else}}{{localize 'AWEMMY.Sheet.PlayMode'}}{{/if}}">
        {{#if isPlayMode}}<i class="fa-solid fa-lock"></i>{{else}}<i class="fa-solid fa-unlock"></i>{{/if}}
      </button>
    </div>
  </div>

  {{!-- Attributes Table --}}
  <fieldset>
    <legend>Attributes</legend>
    <table class="attributes-table">
      <thead>
        <tr>
          <th>Attribute</th>
          <th>{{localize "AWEMMY.Character.BoostLevel"}}</th>
          <th>{{localize "AWEMMY.Character.Mod"}}</th>
          <th>{{localize "AWEMMY.Character.DC"}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="attr-label rollable" data-attribute-id="agility">{{localize "AWEMMY.Attribute.Agility"}} <i class="fa-solid fa-dice-d20"></i></td>
          <td>{{formInput systemFields.attributes.fields.agility.fields.boostLevel value=system.attributes.agility.boostLevel disabled=isPlayMode}}</td>
          <td>{{system.attributes.agility.mod}}</td>
          <td>{{system.attributes.agility.dc}}</td>
        </tr>
        <tr>
          <td class="attr-label rollable" data-attribute-id="fitness">{{localize "AWEMMY.Attribute.Fitness"}} <i class="fa-solid fa-dice-d20"></i></td>
          <td>{{formInput systemFields.attributes.fields.fitness.fields.boostLevel value=system.attributes.fitness.boostLevel disabled=isPlayMode}}</td>
          <td>{{system.attributes.fitness.mod}}</td>
          <td>{{system.attributes.fitness.dc}}</td>
        </tr>
        <tr>
          <td class="attr-label rollable" data-attribute-id="awareness">{{localize "AWEMMY.Attribute.Awareness"}} <i class="fa-solid fa-dice-d20"></i></td>
          <td>{{formInput systemFields.attributes.fields.awareness.fields.boostLevel value=system.attributes.awareness.boostLevel disabled=isPlayMode}}</td>
          <td>{{system.attributes.awareness.mod}}</td>
          <td>{{system.attributes.awareness.dc}}</td>
        </tr>
        <tr>
          <td class="attr-label rollable" data-attribute-id="influence">{{localize "AWEMMY.Attribute.Influence"}} <i class="fa-solid fa-dice-d20"></i></td>
          <td>{{formInput systemFields.attributes.fields.influence.fields.boostLevel value=system.attributes.influence.boostLevel disabled=isPlayMode}}</td>
          <td>{{system.attributes.influence.mod}}</td>
          <td>{{system.attributes.influence.dc}}</td>
        </tr>
      </tbody>
    </table>
  </fieldset>

  {{!-- Abilities --}}
  <fieldset>
    <legend>{{localize "AWEMMY.Item.Ability"}}</legend>
    <div class="item-list">
      {{#each abilities as |item|}}
      <div class="item-row" data-item-id="{{item.id}}" data-item-uuid="{{item.uuid}}">
        <img class="item-img" src="{{item.img}}" data-tooltip="{{item.name}}" />
        <div class="item-name">{{item.name}}</div>
        <div class="item-cost">{{item.system.cost}}</div>
        <div class="item-controls">
          <a data-action="edit" data-item-id="{{item.id}}" data-item-uuid="{{item.uuid}}" data-tooltip="Edit"><i class="fas fa-edit"></i></a>
          {{#if ../isEditMode}}
          <a data-action="delete" data-item-id="{{item.id}}" data-item-uuid="{{item.uuid}}" data-tooltip="Delete"><i class="fas fa-trash"></i></a>
          {{/if}}
        </div>
      </div>
      {{/each}}
      {{#if isEditMode}}
      <div class="item-add">
        <button type="button" data-action="createAbility"><i class="fas fa-plus"></i> {{localize "AWEMMY.Item.Ability"}}</button>
      </div>
      {{/if}}
    </div>
  </fieldset>

</section>