hbm-foundry-system/templates/actor/character.hbs

<div class="sheet-wrapper">
    <!-- ═══ STICKY HEADER ═══════════════════════════════════════════════════ -->
    <header class="sheet-header">
        <input class="charname" type="text" name="name" value="{{document.name}}"
            placeholder="{{localize 'HBM.ui.name'}}" />
        <div class="meta-row">
            <label>{{localize 'HBM.details.race'}}
                <select name="system.details.race">
                    <option value="">--</option>
                    {{#each races as |r|}}
                    <option value="{{r.key}}" {{#if (eq ../system.details.race r.key)}}selected{{/if}}>{{r.label}}
                    </option>
                    {{/each}}
                </select>
            </label>
            <label>{{localize 'HBM.details.year'}}
                <input type="number" name="system.details.year" value="{{system.details.year}}" min="1" max="4" />
            </label>
            <label>{{localize 'HBM.details.startingYear'}}
                <input type="number" name="system.details.startingYear" value="{{system.details.startingYear}}"
                    min="1900" />
            </label>
            <label>{{localize 'HBM.details.currentYear'}}
                <input type="number" name="system.details.currentYear" value="{{system.details.currentYear}}"
                    min="1900" />
            </label>
            <label>{{localize 'HBM.details.discipline'}}
                <select name="system.details.discipline">
                    <option value="">--</option>
                    {{#each disciplines as |d|}}
                    <option value="{{d.key}}" {{#if (eq ../system.details.discipline d.key)}}selected{{/if}}>{{d.label}}
                    </option>
                    {{/each}}
                </select>
            </label>
        </div>
        <!-- Tab navigation -->
        <nav class="tabs" data-group="primary">
            {{#each tabs as |tab|}}
            <button type="button" class="tab-item {{tab.cssClass}}" data-tab="{{tab.id}}">
                {{localize tab.label}}
            </button>
            {{/each}}
        </nav>
    </header>

    <!-- ═══ SCROLLABLE BODY ══════════════════════════════════════════════════ -->
    <div class="sheet-body">

        <!-- ── STATS ──────────────────────────────────────────────────────────── -->
        <section class="tab-panel {{#if (eq tabGroups.primary 'stats')}}active{{/if}}" data-tab="stats">

            <div class="attributes-grid">
                {{#each attributes as |attr|}}
                <div class="attribute" data-attr="{{attr.key}}">
                    <label>{{attr.label}}</label>
                    {{#if (eq attr.key 'magic')}}
                    <select name="system.attributes.magic.value">
                        <option value="0" {{#if (eq attr.value 0)}}selected{{/if}}>0</option>
                        <option value="1" {{#if (eq attr.value 1)}}selected{{/if}}>I</option>
                        <option value="2" {{#if (eq attr.value 2)}}selected{{/if}}>II</option>
                        <option value="3" {{#if (eq attr.value 3)}}selected{{/if}}>III</option>
                        <option value="4" {{#if (eq attr.value 4)}}selected{{/if}}>IV</option>
                        <option value="5" {{#if (eq attr.value 5)}}selected{{/if}}>V</option>
                        <option value="6" {{#if (eq attr.value 6)}}selected{{/if}}>VI</option>
                        <option value="7" {{#if (eq attr.value 7)}}selected{{/if}}>VII</option>
                        <option value="8" {{#if (eq attr.value 8)}}selected{{/if}}>VIII</option>
                        <option value="9" {{#if (eq attr.value 9)}}selected{{/if}}>IX</option>
                        <option value="10" {{#if (eq attr.value 10)}}selected{{/if}}>X</option>
                    </select>
                    <span class="actual-magic-badge" title="{{localize 'HBM.attributes.actualMagicHint'}}"
                        style="font-size: 0.75rem; margin-top: 0.15rem; color: #a03030; font-weight: bold;">
                        ({{localize 'HBM.attributes.actual'}}: {{attr.actualLabel}})
                    </span>
                    {{else}}
                    <input type="number" name="system.attributes.{{attr.key}}.value" value="{{attr.value}}" min="1"
                        max="9" />
                    {{/if}}
                    <button type="button" class="roll-btn" data-action="rollAttribute" data-attribute="{{attr.key}}"
                        title="{{localize 'HBM.roll.roll'}}">⚂</button>
                </div>
                {{/each}}
            </div>

            <div class="resources-grid">
                <div class="resource">
                    <label>{{localize 'HBM.resources.health'}}</label>
                    <span class="resource-value">
                        <input type="number" name="system.attributes.health.value"
                            value="{{system.attributes.health.value}}" min="0" />
                        <span class="sep">/</span>
                        <input type="number" name="system.attributes.health.max"
                            value="{{system.attributes.health.max}}" min="0" />
                    </span>
                </div>
                <div class="resource">
                    <label>{{localize 'HBM.resources.physicalArmor'}}</label>
                    <span class="resource-value">
                        <span class="static-value"
                            title="{{localize 'HBM.resources.physicalArmor'}}">{{system.attributes.physicalArmor.value}}</span>
                    </span>
                    <small>{{localize 'HBM.resources.max'}}: {{system.attributes.physicalArmor.max}}</small>
                    <div style="display:flex; align-items:center; gap:0.3rem; margin-top:0.15rem;">
                        <small style="white-space:nowrap;">{{localize 'HBM.ui.physicalArmorBonus'}}:</small>
                        <input type="number" name="system.attributes.physicalArmor.bonus"
                            value="{{system.attributes.physicalArmor.bonus}}" min="0"
                            style="width:2.5rem; text-align:center; font-size:0.8rem; border:none; border-bottom:1px solid var(--hbm-border); background:transparent;" />
                    </div>
                </div>
                <div class="resource">
                    <label>{{localize 'HBM.resources.magicalShield'}}</label>
                    <span class="resource-value">
                        <input type="number" name="system.attributes.magicalShield.value"
                            value="{{system.attributes.magicalShield.value}}" min="0" />
                    </span>
                </div>
                <div class="resource">
                    <label>{{localize 'HBM.resources.magicalArmor'}}</label>
                    <span class="resource-value">
                        <input type="number" name="system.attributes.magicalArmor.value"
                            value="{{system.attributes.magicalArmor.value}}" min="0" />
                        <span class="sep">/</span>
                        <input type="number" name="system.attributes.magicalArmor.max"
                            value="{{system.attributes.magicalArmor.max}}" min="0" />
                    </span>
                    <small>{{localize 'HBM.resources.runicCounter'}}:
                        {{system.attributes.magicalArmor.runicCounter}}/5</small>
                </div>
                <div class="resource">
                    <label>{{localize 'HBM.resources.mana'}}</label>
                    <span class="resource-value">
                        <input type="number" name="system.attributes.mana.value"
                            value="{{system.attributes.mana.value}}" min="0" />
                        <span class="sep">/</span>
                        <input type="number" name="system.attributes.mana.max" value="{{system.attributes.mana.max}}"
                            min="0" />
                    </span>
                    <small>{{localize 'HBM.resources.maxManaPerSpell'}}: {{system.attributes.mana.maxPerSpell}}</small>
                </div>
                <div class="resource">
                    <label>{{localize 'HBM.resources.zeal'}}</label>
                    <span class="resource-value">
                        <input type="number" name="system.attributes.zeal.value"
                            value="{{system.attributes.zeal.value}}" min="0" />
                        <span class="sep">/</span>
                        <input type="number" name="system.attributes.zeal.max" value="{{system.attributes.zeal.max}}"
                            min="0" />
                    </span>
                </div>
                {{#if hasBloodMagic}}
                <div class="resource blood-pool">
                    <label>{{localize 'HBM.resources.blood'}}</label>
                    <span class="resource-value">
                        <input type="number" name="system.attributes.blood.value"
                            value="{{system.attributes.blood.value}}" min="0" />
                        <span class="sep">/</span>
                        <input type="number" name="system.attributes.blood.max" value="{{system.attributes.blood.max}}"
                            min="0" />
                    </span>
                </div>
                {{/if}}
                <div class="resource">
                    <label>{{localize 'HBM.resources.elixirTolerance'}}</label>
                    <span class="resource-value">
                        <input type="number" name="system.attributes.elixirTolerance"
                            value="{{system.attributes.elixirTolerance}}" min="0" />
                    </span>
                    <small>cap: {{elixirCap}}</small>
                </div>
                {{#if (gt system.attributes.insanity 0)}}
                <div class="resource warn">
                    <label>{{localize 'HBM.resources.insanity'}}</label>
                    <span class="resource-value">
                        <input type="number" name="system.attributes.insanity" value="{{system.attributes.insanity}}"
                            min="0" />
                    </span>
                </div>
                {{/if}}
                <div class="resource">
                    <label>{{localize 'HBM.resources.initiative'}}</label>
                    <span class="resource-value">
                        <span class="static-value"
                            title="{{localize 'HBM.resources.initiative'}}">{{system.attributes.initiative.value}}</span>
                    </span>
                    <div style="display:flex; align-items:center; gap:0.3rem; margin-top:0.15rem;">
                        <small style="white-space:nowrap;">{{localize 'HBM.ui.initiativeBonus'}}:</small>
                        <input type="number" name="system.attributes.initiative.bonus"
                            value="{{system.attributes.initiative.bonus}}" min="0"
                            style="width:2.5rem; text-align:center; font-size:0.8rem; border:none; border-bottom:1px solid var(--hbm-border); background:transparent;" />
                    </div>
                </div>            </div>

            <div class="advancement-panel">
                <div class="advancement-title">{{localize 'HBM.ui.advancement'}}</div>
                <div class="advancement-fields">
                    <div class="advancement-field">
                        <label>{{localize 'HBM.resources.experience'}}</label>
                        <input type="number" name="system.details.experience" value="{{system.details.experience}}" min="0" />
                    </div>
                    <div class="advancement-field">
                        <label>{{localize 'HBM.ui.attributePoints'}}</label>
                        <input type="number" name="system.advancement.attributePointsAvailable" value="{{system.advancement.attributePointsAvailable}}" min="0" />
                    </div>
                    <div class="advancement-field">
                        <label>{{localize 'HBM.ui.skillPoints'}}</label>
                        <input type="number" name="system.advancement.skillPointsAvailable" value="{{system.advancement.skillPointsAvailable}}" min="0" />
                    </div>
                    <div class="advancement-field">
                        <label>{{localize 'HBM.ui.freeTalents'}}</label>
                        <input type="number" name="system.advancement.freeTalentsAvailable" value="{{system.advancement.freeTalentsAvailable}}" min="0" />
                    </div>
                </div>
            </div>
        </section>

        <!-- ── ACTIONS ────────────────────────────────────────────────────────── -->
        <section class="tab-panel {{#if (eq tabGroups.primary 'actions')}}active{{/if}}" data-tab="actions">
            <div class="actions-panel">
                <h3>{{localize 'HBM.ui.actionsTitle'}}</h3>
                <div class="actions-buttons-grid">
                    <button type="button" class="action-btn" data-action="rollInitiative">
                        <span class="icon">⚡</span>
                        <span class="label">{{localize 'HBM.resources.initiative'}}</span>
                    </button>
                    <button type="button" class="action-btn" data-action="applyDamage">
                        <span class="icon">⚔</span>
                        <span class="label">{{localize 'HBM.damage.apply'}}</span>
                    </button>
                    <button type="button" class="action-btn" data-action="takeBreather">
                        <span class="icon">🌬️</span>
                        <span class="label">{{localize 'HBM.rest.takeBreather'}}</span>
                    </button>
                    <button type="button" class="action-btn" data-action="shortRest">
                        <span class="icon">☕</span>
                        <span class="label">{{localize 'HBM.rest.shortRest'}}</span>
                    </button>
                    <button type="button" class="action-btn" data-action="longRest">
                        <span class="icon">🌙</span>
                        <span class="label">{{localize 'HBM.rest.longRest'}}</span>
                    </button>
                </div>
            </div>
        </section>

        <!-- ── SKILLS ─────────────────────────────────────────────────────────── -->
        <section class="tab-panel {{#if (eq tabGroups.primary 'skills')}}active{{/if}}" data-tab="skills">
            <div class="skills-grid">
                {{#each skills as |sk|}}
                <div class="skill">
                    <span class="skill-name">{{sk.label}}</span>
                    <input type="number" name="system.skills.{{sk.key}}.value" value="{{sk.value}}" min="0" max="8" />
                    <button type="button" class="roll-btn" data-action="rollSkill" data-skill="{{sk.key}}"
                        title="{{localize 'HBM.roll.roll'}}">⚂</button>
                </div>
                {{/each}}
            </div>
        </section>

        <!-- ── SPELLS ─────────────────────────────────────────────────────────── -->
        <section class="tab-panel {{#if (eq tabGroups.primary 'spells')}}active{{/if}}" data-tab="spells">
            {{#if spells.length}}
            {{#each spellSchoolGroups as |group|}}
            <details class="spell-school-group" open>
                <summary><strong>{{group.label}}</strong> <span class="count">({{group.items.length}})</span></summary>
                <ul class="item-list spell-list">
                    {{#each group.items as |spell|}}
                    <li class="item-row spell-row" data-school="{{spell.system.school}}">
                        <span class="item-name">{{spell.name}}
                            {{#if spell.system.isSuperspell}}<span class="badge super" title="Superczar">★</span>{{/if}}
                            {{#if spell.system.requiresGroupCast}}<span class="badge group"
                                title="Czar grupowy">⛧</span>{{/if}}
                            {{#if spell.system.nonCombatOnly}}<span class="badge noncombat"
                                title="Tylko poza walką">☮</span>{{/if}}
                            {{#if spell.system.requirements.race.length}}<span class="badge race-lock"
                                title="Wymagana rasa">🔒</span>{{/if}}
                        </span>
                        <span class="item-meta">
                            K{{spell.system.circle}}
                            · {{localize (concat 'HBM.spell.castingMode.' spell.system.castingMode)}}
                            · {{localize 'HBM.resources.mana'}}: {{spell.system.manaCost}}
                            {{#if (eq spell.system.castingMode 'sacred')}}{{#if spell.system.deity}} ·
                            {{spell.system.deity}}{{/if}}{{/if}}
                            {{#if (eq spell.system.castingMode 'blood')}} · krew: {{spell.system.bloodCost}}{{/if}}
                            {{#if spell.system.sourceBook}} · <span
                                class="source-pip">{{spell.system.sourceBook}}</span>{{/if}}
                        </span>
                        <div class="item-controls">
                            <button type="button" class="cast-btn" data-action="castSpell" data-item-id="{{spell.id}}"
                                title="{{localize 'HBM.spell.cast'}}">✦</button>
                            <button type="button" class="edit-btn" data-action="editItem" data-item-id="{{spell.id}}"
                                title="{{localize 'HBM.ui.edit'}}">✎</button>
                            <button type="button" class="delete-btn" data-action="deleteItem"
                                data-item-id="{{spell.id}}" title="{{localize 'HBM.ui.delete'}}">✕</button>
                        </div>
                    </li>
                    {{/each}}
                </ul>
            </details>
            {{/each}}
            {{else}}
            <p class="empty-drop">{{localize 'HBM.ui.dropItems'}}</p>
            {{/if}}
        </section>

        <!-- ── TALENTS ────────────────────────────────────────────────────────── -->
        <section class="tab-panel {{#if (eq tabGroups.primary 'talents')}}active{{/if}}" data-tab="talents">
            <p class="empty-drop" style="font-size:0.8rem; color:#888; margin-bottom:10px;">{{localize
                'HBM.ui.dropTalentsHint'}}</p>
            {{#if talents.length}}
            <ul class="item-list">
                {{#each talents as |item|}}
                <li class="item-row">
                    <span class="item-name">{{item.name}}</span>
                    <span class="item-meta">{{{item.system.description}}}</span>
                    <div class="item-controls">
                        <button type="button" class="edit-btn" data-action="editItem" data-item-id="{{item.id}}"
                            title="{{localize 'HBM.ui.edit'}}">✎</button>
                        <button type="button" class="delete-btn" data-action="deleteItem" data-item-id="{{item.id}}"
                            title="{{localize 'HBM.ui.delete'}}">✕</button>
                    </div>
                </li>
                {{/each}}
            </ul>
            {{else}}
            <p class="empty-drop">{{localize 'HBM.ui.dropItems'}}</p>
            {{/if}}
        </section>

        <!-- ── INVENTORY ──────────────────────────────────────────────────────── -->
        <section class="tab-panel {{#if (eq tabGroups.primary 'inventory')}}active{{/if}}" data-tab="inventory">
            <div class="money-panel"
                style="display: flex; gap: 15px; align-items: center; background: var(--hbm-card-bg); border: 1px solid var(--hbm-border); border-radius: var(--hbm-radius); padding: 0.75rem; margin-bottom: 15px;">
                <div style="flex: 1; display: flex; align-items: center; gap: 10px;">
                    <span class="icon" style="font-size: 1.5rem;">🪙</span>
                    <strong>{{localize 'HBM.ui.money'}}:</strong>
                    <input type="number" name="system.details.money" value="{{system.details.money}}" min="0"
                        style="width: 8rem; font-size: 1.1rem; text-align: center; border: none; border-bottom: 1px solid var(--hbm-border); background: transparent; color: var(--hbm-fg);" />
                    <span>PLN</span>
                </div>
                <button type="button" data-action="recalculateMoney"
                    style="padding: 4px 10px; font-weight: bold; background: var(--hbm-accent); color: #fff; border: none; border-radius: var(--hbm-radius); cursor: pointer;">
                    {{localize 'HBM.ui.recalculate'}}
                </button>
            </div>

            {{#if weapons.length}}
            <div class="inventory-section">
                <h3>{{localize 'HBM.gear.weapon'}}</h3>
                <table class="inventory-table">
                    <thead>
                        <tr>
                            <th style="text-align: left;">{{localize 'HBM.ui.name'}}</th>
                            <th>{{localize 'HBM.gear.damage'}}</th>
                            <th>{{localize 'HBM.gear.weight'}}</th>
                            <th>{{localize 'HBM.gear.quantity'}}</th>
                            <th>{{localize 'HBM.gear.equipped'}}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each weapons as |item|}}
                        <tr class="item-tr" data-item-id="{{item.id}}">
                            <td><strong>{{item.name}}</strong></td>
                            <td style="text-align: center;">{{item.system.weapon.damage}} ({{localize (concat
                                'HBM.damageType.' item.system.weapon.damageType)}})</td>
                            <td style="text-align: center;">{{item.system.weight}}</td>
                            <td style="text-align: center;">{{item.system.quantity}}</td>
                            <td style="text-align: center;">
                                <input type="checkbox" data-action="toggleEquipped" data-item-id="{{item.id}}" {{#if
                                    item.system.equipped}}checked{{/if}} style="cursor: pointer;" />
                            </td>
                            <td style="text-align: right; white-space: nowrap;">
                                <button type="button" class="edit-btn" data-action="editItem" data-item-id="{{item.id}}"
                                    title="{{localize 'HBM.ui.edit'}}">✎</button>
                                <button type="button" class="delete-btn" data-action="deleteItem"
                                    data-item-id="{{item.id}}" title="{{localize 'HBM.ui.delete'}}">✕</button>
                            </td>
                        </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
            {{/if}}

            {{#if armors.length}}
            <div class="inventory-section" style="margin-top: 15px;">
                <h3>{{localize 'HBM.gear.armor'}}</h3>
                <table class="inventory-table">
                    <thead>
                        <tr>
                            <th style="text-align: left;">{{localize 'HBM.ui.name'}}</th>
                            <th>{{localize 'HBM.gear.damageReduction'}}</th>
                            <th>{{localize 'HBM.gear.condition'}}</th>
                            <th>{{localize 'HBM.gear.weight'}}</th>
                            <th>{{localize 'HBM.gear.quantity'}}</th>
                            <th>{{localize 'HBM.gear.equipped'}}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each armors as |item|}}
                        <tr class="item-tr" data-item-id="{{item.id}}">
                            <td><strong>{{item.name}}</strong></td>
                            <td style="text-align: center;">{{item.system.armor.damageReduction}} DR</td>
                            <td style="text-align: center;">{{item.system.armor.condition}} /
                                {{item.system.armor.conditionMax}}</td>
                            <td style="text-align: center;">{{item.system.weight}}</td>
                            <td style="text-align: center;">{{item.system.quantity}}</td>
                            <td style="text-align: center;">
                                <input type="checkbox" data-action="toggleEquipped" data-item-id="{{item.id}}" {{#if
                                    item.system.equipped}}checked{{/if}} style="cursor: pointer;" />
                            </td>
                            <td style="text-align: right; white-space: nowrap;">
                                <button type="button" class="edit-btn" data-action="editItem" data-item-id="{{item.id}}"
                                    title="{{localize 'HBM.ui.edit'}}">✎</button>
                                <button type="button" class="delete-btn" data-action="deleteItem"
                                    data-item-id="{{item.id}}" title="{{localize 'HBM.ui.delete'}}">✕</button>
                            </td>
                        </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
            {{/if}}

            {{#if equipment.length}}
            <div class="inventory-section" style="margin-top: 15px;">
                <h3>{{localize 'HBM.gear.equipment'}}</h3>
                <table class="inventory-table">
                    <thead>
                        <tr>
                            <th style="text-align: left;">{{localize 'HBM.ui.name'}}</th>
                            <th>{{localize 'HBM.gear.weight'}}</th>
                            <th>{{localize 'HBM.gear.quantity'}}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each equipment as |item|}}
                        <tr class="item-tr" data-item-id="{{item.id}}">
                            <td>{{item.name}}</td>
                            <td style="text-align: center;">{{item.system.weight}}</td>
                            <td style="text-align: center;">{{item.system.quantity}}</td>
                            <td style="text-align: right; white-space: nowrap;">
                                <button type="button" class="edit-btn" data-action="editItem" data-item-id="{{item.id}}"
                                    title="{{localize 'HBM.ui.edit'}}">✎</button>
                                <button type="button" class="delete-btn" data-action="deleteItem"
                                    data-item-id="{{item.id}}" title="{{localize 'HBM.ui.delete'}}">✕</button>
                            </td>
                        </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
            {{/if}}

            {{#if (eq gear.length 0)}}
            <p class="empty-drop">{{localize 'HBM.ui.dropItems'}}</p>
            {{/if}}

            <!-- Custom equipment rows -->
            <div class="custom-equipment-section" style="margin-top: 20px;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                    <strong>{{localize 'HBM.ui.customEquipment'}}</strong>
                    <button type="button" data-action="addArrayEntry" data-path="system.details.customItems"
                        data-template="{&quot;name&quot;:&quot;&quot;,&quot;qty&quot;:1,&quot;note&quot;:&quot;&quot;}"
                        style="padding:2px 8px; font-size:0.8rem; background:var(--hbm-success); color:#fff; border:none; border-radius:var(--hbm-radius); cursor:pointer;">
                        + {{localize 'HBM.ui.add'}}
                    </button>
                </div>
                {{#if system.details.customItems.length}}
                <table class="inventory-table" style="font-size:0.85rem;">
                    <thead>
                        <tr>
                            <th style="text-align:left;">{{localize 'HBM.ui.name'}}</th>
                            <th style="width:3rem;">{{localize 'HBM.gear.quantity'}}</th>
                            <th>{{localize 'HBM.ui.notes'}}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each system.details.customItems as |row i|}}
                        <tr>
                            <td><input type="text" name="system.details.customItems.{{i}}.name" value="{{row.name}}"
                                    style="width:100%; border:none; border-bottom:1px solid var(--hbm-border); background:transparent; color:var(--hbm-fg); font-size:0.85rem;" />
                            </td>
                            <td><input type="number" name="system.details.customItems.{{i}}.qty" value="{{row.qty}}"
                                    min="0"
                                    style="width:3rem; text-align:center; border:none; border-bottom:1px solid var(--hbm-border); background:transparent; color:var(--hbm-fg); font-size:0.85rem;" />
                            </td>
                            <td><input type="text" name="system.details.customItems.{{i}}.note" value="{{row.note}}"
                                    style="width:100%; border:none; border-bottom:1px solid var(--hbm-border); background:transparent; color:var(--hbm-fg); font-size:0.8rem; color:#777;" />
                            </td>
                            <td style="text-align:right;">
                                <button type="button" class="delete-btn" data-action="removeArrayEntry"
                                    data-path="system.details.customItems" data-index="{{i}}"
                                    title="{{localize 'HBM.ui.delete'}}">✕</button>
                            </td>
                        </tr>
                        {{/each}}
                    </tbody>
                </table>
                {{else}}
                <p style="font-size:0.8rem; color:#888; font-style:italic;">{{localize 'HBM.ui.dropItems'}}</p>
                {{/if}}
            </div>
        </section>

        <!-- ── EFFECTS ────────────────────────────────────────────────────────── -->
        <section class="tab-panel {{#if (eq tabGroups.primary 'effects')}}active{{/if}}" data-tab="effects">
            {{> 'systems/hbm-rpg-v3/templates/actor/_actor-effects.hbs'}}
        </section>

        <!-- ── BIOGRAPHY ──────────────────────────────────────────────────────── -->
        <section class="tab-panel {{#if (eq tabGroups.primary 'biography')}}active{{/if}}" data-tab="biography">
            <div class="bio-grid" style="display: flex; gap: 20px; flex-direction: column;">
                <div style="display: flex; gap: 20px;">
                    <div class="bio-image-container"
                        style="display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0;">
                        <img class="profile-img" src="{{document.img}}" data-action="editImage"
                            title="{{document.name}}" height="150" width="150"
                            style="border: 2px solid #555; border-radius: 4px; cursor: pointer; background: #222;" />
                        <small style="color: #777;">{{localize 'HBM.ui.changeImageHint'}}</small>
                    </div>
                    <div class="bio-section" style="flex: 1; display: flex; flex-direction: column; gap: 10px;">
                        <div style="overflow-x: auto; margin-top: 5px;">
                            <table class="schedule-table">
                                <thead>
                                    <tr
                                        style="background: rgba(0, 0, 0, 0.15); border-bottom: 2px solid var(--hbm-border);">
                                        <th style="width: 3%;">#</th>
                                        <th style="width: 12%;">{{localize 'HBM.schedule.hours'}}</th>
                                        <th style="width: 14%;">{{localize 'HBM.schedule.monday'}}</th>
                                        <th style="width: 14%;">{{localize 'HBM.schedule.tuesday'}}</th>
                                        <th style="width: 14%;">{{localize 'HBM.schedule.wednesday'}}</th>
                                        <th style="width: 14%;">{{localize 'HBM.schedule.thursday'}}</th>
                                        <th style="width: 14%;">{{localize 'HBM.schedule.friday'}}</th>
                                        <th style="width: 13%;">{{localize 'HBM.schedule.saturday'}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Row 1 -->
                                    <tr>
                                        <td style="font-weight: bold;">1</td>
                                        <td>7:30-8:30</td>
                                        <td><input type="text" name="system.details.schedule.row1.mon"
                                                value="{{system.details.schedule.row1.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row1.tue"
                                                value="{{system.details.schedule.row1.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row1.wed"
                                                value="{{system.details.schedule.row1.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row1.thu"
                                                value="{{system.details.schedule.row1.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row1.fri"
                                                value="{{system.details.schedule.row1.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row1.sat"
                                                value="{{system.details.schedule.row1.sat}}" /></td>
                                    </tr>
                                    <!-- Row 2 -->
                                    <tr>
                                        <td style="font-weight: bold;">2</td>
                                        <td>8:35-9:35</td>
                                        <td><input type="text" name="system.details.schedule.row2.mon"
                                                value="{{system.details.schedule.row2.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row2.tue"
                                                value="{{system.details.schedule.row2.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row2.wed"
                                                value="{{system.details.schedule.row2.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row2.thu"
                                                value="{{system.details.schedule.row2.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row2.fri"
                                                value="{{system.details.schedule.row2.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row2.sat"
                                                value="{{system.details.schedule.row2.sat}}" /></td>
                                    </tr>
                                    <!-- Row 3 -->
                                    <tr>
                                        <td style="font-weight: bold;">3</td>
                                        <td>9:40-10:40</td>
                                        <td><input type="text" name="system.details.schedule.row3.mon"
                                                value="{{system.details.schedule.row3.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row3.tue"
                                                value="{{system.details.schedule.row3.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row3.wed"
                                                value="{{system.details.schedule.row3.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row3.thu"
                                                value="{{system.details.schedule.row3.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row3.fri"
                                                value="{{system.details.schedule.row3.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row3.sat"
                                                value="{{system.details.schedule.row3.sat}}" /></td>
                                    </tr>
                                    <!-- Break -->
                                    <tr style="background: rgba(0, 0, 0, 0.08); font-weight: bold;">
                                        <td colspan="8"
                                            style="padding: 5px; text-align: center; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem;">
                                            {{localize 'HBM.schedule.lunchBreak'}}</td>
                                    </tr>
                                    <!-- Row 4 -->
                                    <tr>
                                        <td style="font-weight: bold;">4</td>
                                        <td>11:10-12:10</td>
                                        <td><input type="text" name="system.details.schedule.row4.mon"
                                                value="{{system.details.schedule.row4.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row4.tue"
                                                value="{{system.details.schedule.row4.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row4.wed"
                                                value="{{system.details.schedule.row4.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row4.thu"
                                                value="{{system.details.schedule.row4.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row4.fri"
                                                value="{{system.details.schedule.row4.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row4.sat"
                                                value="{{system.details.schedule.row4.sat}}" /></td>
                                    </tr>
                                    <!-- Row 5 -->
                                    <tr>
                                        <td style="font-weight: bold;">5</td>
                                        <td>12:15-13:15</td>
                                        <td><input type="text" name="system.details.schedule.row5.mon"
                                                value="{{system.details.schedule.row5.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row5.tue"
                                                value="{{system.details.schedule.row5.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row5.wed"
                                                value="{{system.details.schedule.row5.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row5.thu"
                                                value="{{system.details.schedule.row5.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row5.fri"
                                                value="{{system.details.schedule.row5.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row5.sat"
                                                value="{{system.details.schedule.row5.sat}}" /></td>
                                    </tr>
                                    <!-- Row 6 -->
                                    <tr>
                                        <td style="font-weight: bold;">6</td>
                                        <td>13:20-14:20</td>
                                        <td><input type="text" name="system.details.schedule.row6.mon"
                                                value="{{system.details.schedule.row6.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row6.tue"
                                                value="{{system.details.schedule.row6.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row6.wed"
                                                value="{{system.details.schedule.row6.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row6.thu"
                                                value="{{system.details.schedule.row6.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row6.fri"
                                                value="{{system.details.schedule.row6.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row6.sat"
                                                value="{{system.details.schedule.row6.sat}}" /></td>
                                    </tr>
                                    <!-- Row 7 -->
                                    <tr>
                                        <td style="font-weight: bold;">7</td>
                                        <td>14:25-15:25</td>
                                        <td><input type="text" name="system.details.schedule.row7.mon"
                                                value="{{system.details.schedule.row7.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row7.tue"
                                                value="{{system.details.schedule.row7.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row7.wed"
                                                value="{{system.details.schedule.row7.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row7.thu"
                                                value="{{system.details.schedule.row7.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row7.fri"
                                                value="{{system.details.schedule.row7.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row7.sat"
                                                value="{{system.details.schedule.row7.sat}}" /></td>
                                    </tr>
                                    <!-- Break -->
                                    <tr style="background: rgba(0, 0, 0, 0.08); font-weight: bold;">
                                        <td colspan="8"
                                            style="padding: 5px; text-align: center; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem;">
                                            {{localize 'HBM.schedule.dinnerBreak'}}</td>
                                    </tr>
                                    <!-- Row 8 -->
                                    <tr>
                                        <td style="font-weight: bold;">8</td>
                                        <td>16:30-17:30</td>
                                        <td><input type="text" name="system.details.schedule.row8.mon"
                                                value="{{system.details.schedule.row8.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row8.tue"
                                                value="{{system.details.schedule.row8.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row8.wed"
                                                value="{{system.details.schedule.row8.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row8.thu"
                                                value="{{system.details.schedule.row8.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row8.fri"
                                                value="{{system.details.schedule.row8.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row8.sat"
                                                value="{{system.details.schedule.row8.sat}}" /></td>
                                    </tr>
                                    <!-- Row 9 -->
                                    <tr>
                                        <td style="font-weight: bold;">9</td>
                                        <td>17:35-18:35</td>
                                        <td><input type="text" name="system.details.schedule.row9.mon"
                                                value="{{system.details.schedule.row9.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row9.tue"
                                                value="{{system.details.schedule.row9.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row9.wed"
                                                value="{{system.details.schedule.row9.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row9.thu"
                                                value="{{system.details.schedule.row9.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row9.fri"
                                                value="{{system.details.schedule.row9.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row9.sat"
                                                value="{{system.details.schedule.row9.sat}}" /></td>
                                    </tr>
                                    <!-- Break -->
                                    <tr style="background: rgba(0, 0, 0, 0.08); font-weight: bold;">
                                        <td colspan="8"
                                            style="padding: 5px; text-align: center; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem;">
                                            {{localize 'HBM.schedule.supperBreak'}}</td>
                                    </tr>
                                    <!-- Row 10 -->
                                    <tr>
                                        <td style="font-weight: bold;">10</td>
                                        <td>19:05-20:05</td>
                                        <td><input type="text" name="system.details.schedule.row10.mon"
                                                value="{{system.details.schedule.row10.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row10.tue"
                                                value="{{system.details.schedule.row10.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row10.wed"
                                                value="{{system.details.schedule.row10.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row10.thu"
                                                value="{{system.details.schedule.row10.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row10.fri"
                                                value="{{system.details.schedule.row10.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row10.sat"
                                                value="{{system.details.schedule.row10.sat}}" /></td>
                                    </tr>
                                    <!-- Row 11 -->
                                    <tr>
                                        <td style="font-weight: bold;">11</td>
                                        <td>20:10-21:10</td>
                                        <td><input type="text" name="system.details.schedule.row11.mon"
                                                value="{{system.details.schedule.row11.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row11.tue"
                                                value="{{system.details.schedule.row11.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row11.wed"
                                                value="{{system.details.schedule.row11.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row11.thu"
                                                value="{{system.details.schedule.row11.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row11.fri"
                                                value="{{system.details.schedule.row11.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row11.sat"
                                                value="{{system.details.schedule.row11.sat}}" /></td>
                                    </tr>
                                    <!-- Row 12 -->
                                    <tr>
                                        <td style="font-weight: bold;">12</td>
                                        <td>21:15-22:15</td>
                                        <td><input type="text" name="system.details.schedule.row12.mon"
                                                value="{{system.details.schedule.row12.mon}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row12.tue"
                                                value="{{system.details.schedule.row12.tue}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row12.wed"
                                                value="{{system.details.schedule.row12.wed}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row12.thu"
                                                value="{{system.details.schedule.row12.thu}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row12.fri"
                                                value="{{system.details.schedule.row12.fri}}" /></td>
                                        <td><input type="text" name="system.details.schedule.row12.sat"
                                                value="{{system.details.schedule.row12.sat}}" /></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div>
                            <label><strong>{{localize 'HBM.details.personalDetails'}}</strong></label>
                            <textarea name="system.details.personalDetails" rows="4"
                                style="width: 100%; resize: vertical; border: 1px solid var(--hbm-border); border-radius: var(--hbm-radius); padding: 5px; background: var(--hbm-card-bg); color: var(--hbm-fg);">{{system.details.personalDetails}}</textarea>
                        </div>
                    </div>
                </div>
                <div class="bio-section">
                    <label><strong>{{localize 'HBM.ui.biography'}}</strong></label>
                    <textarea name="system.details.biography" rows="8"
                        style="width: 100%; resize: vertical; border: 1px solid var(--hbm-border); border-radius: var(--hbm-radius); padding: 5px; background: var(--hbm-card-bg); color: var(--hbm-fg);">{{system.details.biography}}</textarea>
                </div>
            </div>
        </section>
    </div><!-- .sheet-body -->
</div>