fvtt-prism-rpg/templates/character-main.hbs

<section class="character-main-v2">
  {{log "character-main-v2" this}}

  <div class="character-sheet-wrapper">
    {{! Character Header with Name }}
    <div class="character-header">
      <div class="character-name-banner">
        {{formInput
          fields.name
          value=source.name
          rootId=partId
          disabled=isPlayMode
          placeholder="Character Name"
        }}
      </div>
      <div class="character-toggle-controls">
        <a
          class="control"
          data-action="toggleSheet"
          data-tooltip="PRISMRPG.ToggleSheet"
          data-tooltip-direction="UP"
        >
          <i class="fa-solid fa-user-{{ifThen isPlayMode 'lock' 'pen'}}"></i>
        </a>
      </div>
    </div>

    <div class="character-main-grid">
      {{! Left Column - Portrait, Attributes & HP }}
      <div class="character-left-column">
        {{! Portrait + HP column }}
        <div class="portrait-hp-column">
          {{! Portrait }}
          <div class="character-portrait">
            <img
              class="character-img"
              src="{{actor.img}}"
              data-edit="img"
              data-action="editImage"
              data-tooltip="{{actor.name}}"
            />
          </div>

          {{! HP Shields (3 shields) - Below portrait }}
          <div class="hp-shields-section">
            <div class="hp-shields">
              <div class="hp-item">
                <div class="hp-label">HP</div>
                <a data-action="hpMinus"><i class="fa-solid fa-minus"></i></a>
                <div class="hp-value">
                  {{formInput
                    systemFields.hp.fields.value
                    value=system.hp.value
                    disabled=isPlayMode
                  }}
                </div>
                <a data-action="hpPlus"><i class="fa-solid fa-plus"></i></a>
                <div class="hp-separator">/</div>
                <div class="hp-max">
                  {{formInput
                    systemFields.hp.fields.max
                    value=system.hp.max
                    disabled=isPlayMode
                  }}
                </div>
              </div>
              <div class="hp-item">
                <div class="hp-label">MANA</div>
                <a data-action="manaPointsMinus"><i class="fa-solid fa-minus"></i></a>
                <div class="hp-value">
                  {{formInput
                    systemFields.manaPoints.fields.value
                    value=system.manaPoints.value
                    disabled=isPlayMode
                  }}
                </div>
                <a data-action="manaPointsPlus"><i class="fa-solid fa-plus"></i></a>
                <div class="hp-separator">/</div>
                <div class="hp-max">
                  {{formInput
                    systemFields.manaPoints.fields.max
                    value=system.manaPoints.max
                    disabled=isPlayMode
                  }}
                </div>
              </div>
              <div class="hp-item">
                <div class="hp-label">ARMOR</div>
                <a data-action="armorPointsMinus"><i class="fa-solid fa-minus"></i></a>
                <div class="hp-value">
                  {{formInput
                    systemFields.armorPoints.fields.value
                    value=system.armorPoints.value
                    disabled=isPlayMode
                  }}
                </div>
                <a data-action="armorPointsPlus"><i class="fa-solid fa-plus"></i></a>
                <div class="hp-separator">/</div>
                <div class="hp-max">
                  {{formInput
                    systemFields.armorPoints.fields.max
                    value=system.armorPoints.max
                    disabled=isPlayMode
                  }}
                </div>
              </div>
              <div class="hp-item">
                <div class="hp-label" data-tooltip="Action Points">AP</div>
                <a data-action="actionPointsMinus"><i class="fa-solid fa-minus"></i></a>
                <div class="hp-value">
                  {{formInput
                    systemFields.actionPoints.fields.value
                    value=system.actionPoints.value
                    disabled=isPlayMode
                  }}
                </div>
                <a data-action="actionPointsPlus"><i class="fa-solid fa-plus"></i></a>
                <div class="hp-separator">/</div>
                <div class="hp-max">
                  {{formInput
                    systemFields.actionPoints.fields.max
                    value=system.actionPoints.max
                    disabled=isPlayMode
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>

        {{! Core Attributes (STR, DEX, CON, INT, WIS, CHA) }}
        <div class="character-attributes">
          <div class="attribute-shield">
            <div class="attribute-label">
              <a class="rollable" data-roll-type="characteristic" data-roll-key="str">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
                STR
              </a>
            </div>
            <div class="attribute-value">
              {{formInput
                systemFields.characteristics.fields.str.fields.value
                value=system.characteristics.str.value
                disabled=isPlayMode
              }}
            </div>
            <div class="attribute-save">
              <a class="rollable save-rollable" data-roll-type="save" data-roll-key="str" data-tooltip="{{localize 'PRISMRPG.RollSavingThrow'}}">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
              </a>
              {{formInput
                systemFields.saves.fields.str.fields.value
                value=system.saves.str.value
                disabled=isPlayMode
              }}
            </div>
          </div>
          <div class="attribute-shield">
            <div class="attribute-label">
              <a class="rollable" data-roll-type="characteristic" data-roll-key="dex">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
                DEX
              </a>
            </div>
            <div class="attribute-value">
              {{formInput
                systemFields.characteristics.fields.dex.fields.value
                value=system.characteristics.dex.value
                disabled=isPlayMode
              }}
            </div>
            <div class="attribute-save">
              <a class="rollable save-rollable" data-roll-type="save" data-roll-key="dex" data-tooltip="{{localize 'PRISMRPG.RollSavingThrow'}}">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
              </a>
              {{formInput
                systemFields.saves.fields.dex.fields.value
                value=system.saves.dex.value
                disabled=isPlayMode
              }}
            </div>
          </div>
          <div class="attribute-shield">
            <div class="attribute-label">
              <a class="rollable" data-roll-type="characteristic" data-roll-key="con">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
                CON
              </a>
            </div>
            <div class="attribute-value">
              {{formInput
                systemFields.characteristics.fields.con.fields.value
                value=system.characteristics.con.value
                disabled=isPlayMode
              }}
            </div>
            <div class="attribute-save">
              <a class="rollable save-rollable" data-roll-type="save" data-roll-key="con" data-tooltip="{{localize 'PRISMRPG.RollSavingThrow'}}">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
              </a>
              {{formInput
                systemFields.saves.fields.con.fields.value
                value=system.saves.con.value
                disabled=isPlayMode
              }}
            </div>
          </div>
          <div class="attribute-shield">
            <div class="attribute-label">
              <a class="rollable" data-roll-type="characteristic" data-roll-key="int">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
                INT
              </a>
            </div>
            <div class="attribute-value">
              {{formInput
                systemFields.characteristics.fields.int.fields.value
                value=system.characteristics.int.value
                disabled=isPlayMode
              }}
            </div>
            <div class="attribute-save">
              <a class="rollable save-rollable" data-roll-type="save" data-roll-key="int" data-tooltip="{{localize 'PRISMRPG.RollSavingThrow'}}">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
              </a>
              {{formInput
                systemFields.saves.fields.int.fields.value
                value=system.saves.int.value
                disabled=isPlayMode
              }}
            </div>
          </div>
          <div class="attribute-shield">
            <div class="attribute-label">
              <a class="rollable" data-roll-type="characteristic" data-roll-key="wis">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
                WIS
              </a>
            </div>
            <div class="attribute-value">
              {{formInput
                systemFields.characteristics.fields.wis.fields.value
                value=system.characteristics.wis.value
                disabled=isPlayMode
              }}
            </div>
            <div class="attribute-save">
              <a class="rollable save-rollable" data-roll-type="save" data-roll-key="wis" data-tooltip="{{localize 'PRISMRPG.RollSavingThrow'}}">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
              </a>
              {{formInput
                systemFields.saves.fields.wis.fields.value
                value=system.saves.wis.value
                disabled=isPlayMode
              }}
            </div>
          </div>
          <div class="attribute-shield">
            <div class="attribute-label">
              <a class="rollable" data-roll-type="characteristic" data-roll-key="cha">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
                CHA
              </a>
            </div>
            <div class="attribute-value">
              {{formInput
                systemFields.characteristics.fields.cha.fields.value
                value=system.characteristics.cha.value
                disabled=isPlayMode
              }}
            </div>
            <div class="attribute-save">
              <a class="rollable save-rollable" data-roll-type="save" data-roll-key="cha" data-tooltip="{{localize 'PRISMRPG.RollSavingThrow'}}">
                <i class="fa-duotone fa-solid fa-dice-d20"></i>
              </a>
              {{formInput
                systemFields.saves.fields.cha.fields.value
                value=system.saves.cha.value
                disabled=isPlayMode
              }}
            </div>
          </div>
        </div>
      </div>

      {{! Right Column - Race, Classes }}
      <div class="character-right-column">
        {{! Race }}
        <div class="race-section">
          <div class="race-box">
            <h4 class="race-label">Race</h4>
            <div class="race-content">
              {{#if race}}
                <div class="race-item" data-item-id="{{race.id}}" data-item-uuid="{{race.uuid}}">
                  <img class="item-img" src="{{race.img}}" data-tooltip="{{race.name}}" data-action="postItemToChat" />
                  <div class="race-name">{{race.name}}</div>
                  <div class="controls">
                    <a data-tooltip="{{localize 'PRISMRPG.Edit'}}" data-action="edit" data-item-id="{{race.id}}"
                      data-item-uuid="{{race.uuid}}"><i class="fas fa-edit"></i></a>
                    <a data-tooltip="{{localize 'PRISMRPG.Delete'}}" data-action="delete" data-item-id="{{race.id}}"
                      data-item-uuid="{{race.uuid}}"><i class="fas fa-trash"></i></a>
                  </div>
                </div>
              {{else}}
                <div class="no-race">
                  <p>{{localize "PRISMRPG.Message.dropRace"}}</p>
                </div>
              {{/if}}
            </div>
          </div>
        </div>

        {{! Classes (Three boxes) }}
        <div class="classes-section">
          {{#each classSlots as |classItem index|}}
            <div class="class-box">
              <h4 class="class-label">Class {{add index 1}}</h4>
              <div class="class-content">
                {{#if classItem}}
                  <div class="class-item" data-item-id="{{classItem.id}}" data-item-uuid="{{classItem.uuid}}">
                    <img class="item-img" src="{{classItem.img}}" data-tooltip="{{classItem.name}}" data-action="postItemToChat" />
                    <div class="class-name">{{classItem.name}}</div>
                    <div class="controls">
                      <a data-tooltip="{{localize 'PRISMRPG.Edit'}}" data-action="edit" data-item-id="{{classItem.id}}"
                        data-item-uuid="{{classItem.uuid}}"><i class="fas fa-edit"></i></a>
                      <a data-tooltip="{{localize 'PRISMRPG.Delete'}}" data-action="delete" data-item-id="{{classItem.id}}"
                        data-item-uuid="{{classItem.uuid}}"><i class="fas fa-trash"></i></a>
                    </div>
                  </div>
                {{else}}
                  <div class="no-class">
                    <p>{{localize "PRISMRPG.Message.dropClass"}}</p>
                  </div>
                {{/if}}
              </div>
            </div>
          {{/each}}

          {{! Alignment }}
          <div class="class-box">
            <h4 class="class-label">Alignment</h4>
            <div class="class-content">
              <div class="alignment-value">
                {{formInput
                  systemFields.biodata.fields.alignment
                  value=system.biodata.alignment
                  disabled=isPlayMode
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>