foundry/Data/systems/pf2e/templates/actors/character/ability-builder.hbs

<form autocomplete="off" onsubmit="event.preventDefault();">
    <div class="ability-rows">
        <header class="row{{#if manual}} not-eligible{{/if}}">
            <div class="row-heading">
                <h3>{{localize "PF2E.Actor.Character.AbilityBuilder.Title"}}</h3>
            </div>
            <div class="abilities">
                {{#each abilityScores as |ability key|}}
                    <div class="row-column">
                        <h3>{{localize (concat "PF2E.AbilityId." key)}}</h3>
                    </div>
                {{/each}}
            </div>
        </header>

        <!-- ancestry boosts -->
        <section class="row{{#if manual}} not-eligible{{/if}}" data-section="ancestry">
            {{#if ancestryBoosts}}
                <div class="row-heading">
                    {{#if ancestryBoosts.remaining}}<div class="remaining extra">{{ancestryBoosts.remaining}}</div>{{/if}}
                    <img class="" src="{{ancestry.img}}" title="{{ancestry.name}}" width="32" height="32" loading="lazy"/>
                    <div class="label">
                        <div class="title">{{localize "ITEM.TypeAncestry"}}</div>
                        <div class="description" data-tooltip-content="#{{actor.id}}-ancestry-tooltip">{{ancestry.name}}</div>
                        <label class="extra">
                            {{localize "PF2E.Actor.Character.AbilityBuilder.AlternateBoostsLabel"}} <input type="checkbox" {{checked ancestryBoosts.alternate}} data-action="toggle-alternate-ancestry-boosts">
                        </label>
                    </div>
                </div>
             {{else}}
                <div class="row-heading">
                    <div class="label">
                        <div class="title">{{localize "ITEM.TypeAncestry"}}</div>
                        <div class="description">{{localize "PF2E.Actor.Character.AbilityBuilder.NotSelected"}}</div>
                    </div>
                </div>
            {{/if}}

            {{> abilityRow buttons=ancestryBoosts.buttons fallback="PF2E.Actor.Character.AbilityBuilder.AncestryMissingHelp"}}

            <div class="hover-content" id="{{actor.id}}-ancestry-tooltip">
                <h2>{{localize "PF2E.Actor.Character.AbilityBuilder.Boosts"}}</h2>
                <ul class="boost-details">
                    {{#each ancestryBoosts.labels as |boost|}}
                        <li><i class="fas fa-circle"></i>{{boost}}</li>
                    {{/each}}
                </ul>
                <h2>{{localize "PF2E.Actor.Character.AbilityBuilder.Flaws"}}</h2>
                <ul class="boost-details">
                    {{#each ancestryBoosts.flawLabels as |flaw|}}
                        <li><i class="fas fa-circle"></i>{{flaw}}</li>
                    {{/each}}
                </ul>
            </div>
        </section>

        <!-- ancestry voluntary flaw -->
        <section class="row{{#if manual}} not-eligible{{/if}} voluntary-flaw-row" data-section="voluntary">
            {{#if ancestry}}
                <div class="row-heading">
                    {{#if voluntaryFlaws.remaining}}<div class="remaining extra">{{voluntaryFlaws.remaining}}</div>{{/if}}
                    <div class="label">
                        <div class="description" data-tooltip-content="#{{actor.id}}-voluntary-flaw-tooltip">{{localize "PF2E.Actor.Character.AbilityBuilder.VoluntaryFlaw.Title"}}</div>
                        <label class="extra" data-tooltip-content="#{{actor.id}}-legacy-voluntary-flaw-tooltip">
                            Legacy Flaws <i class="fas fa-info-circle small"></i>
                            <input type="checkbox" data-action="toggle-legacy-voluntary-flaw" {{checked legacyFlaws}}>
                        </label>
                    </div>
                </div>
                {{> abilityRow buttons=voluntaryFlaws.buttons}}
            {{/if}}

            <div class="hover-content" id="{{actor.id}}-voluntary-flaw-tooltip">{{localize "PF2E.Actor.Character.AbilityBuilder.VoluntaryFlaw.Description"}}</div>
            <div class="hover-content" id="{{actor.id}}-legacy-voluntary-flaw-tooltip">{{localize "PF2E.Actor.Character.AbilityBuilder.VoluntaryFlaw.LegacyDescription"}}</div>
        </section>

        <hr />

        <!-- background boosts -->
        <section class="row{{#if manual}} not-eligible{{/if}}" data-section="background">
            {{#if backgroundBoosts}}
                <div class="row-heading" data-tooltip-content="#{{actor.id}}-background-tooltip">
                    {{#if backgroundBoosts.remaining}}<div class="remaining extra">{{backgroundBoosts.remaining}}</div>{{/if}}
                    <img class="" src="{{background.img}}" title="{{background.name}}" width="32" height="32" loading="lazy"/>
                    <div class="label">
                        <div class="title">{{localize "PF2E.Background"}}</div>
                        <div class="description">{{background.name}}</div>
                    </div>
                </div>
            {{else}}
                <div class="row-heading">
                    <div class="label">
                        <div class="title">{{localize "ITEM.TypeBackground"}}</div>
                        <div class="description">{{localize "PF2E.Actor.Character.AbilityBuilder.NotSelected"}}</div>
                    </div>
                </div>
            {{/if}}

            {{> abilityRow buttons=backgroundBoosts.buttons fallback="PF2E.Actor.Character.AbilityBuilder.BackgroundMissingHelp"}}

            <div class="hover-content" id="{{actor.id}}-background-tooltip">
                {{#if backgroundBoosts.tooltip}}
                    {{backgroundBoosts.tooltip}}
                {{else}}
                    <h2>{{localize "PF2E.Actor.Character.AbilityBuilder.Boosts"}}</h2>
                    <ul class="boost-details">
                        {{#each backgroundBoosts.labels as |boost|}}
                            {{#if boost}}
                                <li><i class="fas fa-circle"></i>{{boost}}</li>
                            {{/if}}
                        {{/each}}
                    </ul>
                {{/if}}
            </div>
        </section>

        <hr />

        <!-- class boosts -->
        <section class="row{{#if manual}} not-eligible{{/if}}">
            {{#if class}}
                <div class="row-heading">
                    <img class="" src="{{class.img}}" title="{{ancestry.name}}" width="32" height="32" loading="lazy"/>
                    <div>
                        <div class="title">{{localize "PF2E.Class"}}</div>
                        <div class="description">{{class.name}}</div>
                    </div>
                </div>
                <div class="abilities">
                    {{#each abilities as |key ability|}}
                        <div class="row-column">
                            <button type="button" data-action="class-key-ability" data-key="{{key}}" data-ability="{{ability}}"
                                class="boost key-ability
                                {{~#if (not (contains ../keyOptions ability))}} hidden{{/if}}
                                {{~#if (eq ../class.system.keyAbility.selected ability)}} selected{{/if}}
                                {{~#if ../manual}} hidden{{/if}}"
                            >
                                <i class="fas fa-fw fa-key"></i>
                                {{localize "PF2E.Actor.Character.AbilityBuilder.KeyIcon"}}
                            </button>
                        </div>
                    {{/each}}
                </div>
            {{else}}
                <div class="row-heading">
                    <div class="label">
                        <div class="title">{{localize "ITEM.TypeClass"}}</div>
                        <div class="description">{{localize "PF2E.Actor.Character.AbilityBuilder.NotSelected"}}</div>
                    </div>
                </div>
                <div class="full-row">{{localize "PF2E.Actor.Character.AbilityBuilder.ClassMissingHelp"}}</div>
            {{/if}}
        </section>

        <hr />

        <div class="row{{#if manual}} not-eligible{{/if}}">
            <div class="row-heading">
                <div class="label">
                    <div class="title">{{localize "PF2E.AbilityFree"}}</div>
                </div>
            </div>
        </div>

        {{#each levelBoosts as |boosts|}}
            <section class="row{{#if ../manual}} not-eligible{{/if}}{{#if (not boosts.eligible)}} not-eligible{{/if}}" data-level="{{boosts.level}}">
                <div class="row-heading">
                    {{#if remaining}}<div class="remaining extra">{{remaining}}</div>{{/if}}
                    <div class="label">
                        <div class="description">
                            {{#if (eq boosts.minLevel boosts.level)}}
                                {{localize "PF2E.LevelN" level=boosts.level}}
                            {{else}}
                                {{localize "PF2E.LevelRange" minLevel=boosts.minLevel level=boosts.level}}
                            {{/if}}
                        </div>
                    </div>
                </div>
                {{> abilityRow buttons=boosts.buttons}}
            </section>
        {{/each}}

        <section class="row summary-row">
            <div class="row-heading">
                <aside class="hint-container">
                    <h3>{{localize "PF2E.Actor.Character.AbilityBuilder.AbilityScoreMethod.Title"}}</h3>
                    <p>{{localize "PF2E.Actor.Character.AbilityBuilder.AbilityScoreMethod.Description"}}</p>
                    <label>
                        <input type="checkbox" name="toggle-manual-mode"{{checked manual}}>
                        {{localize "PF2E.Actor.Character.AbilityBuilder.AbilityScoreMethod.UseCustomLabel"}}
                    </label>
                </aside>
            </div>
            <div class="abilities">
                {{#each abilityScores as |ability key|}}
                    <div class="row-column">
                        {{#if ../manual}}
                            <button type="button" data-action="class-key-ability" data-key="{{lookup ../abilities key}}" data-ability="{{key}}"
                                class="boost{{#if (eq ../manualKeyAbility key)}} selected{{/if}}"
                                tabindex="-1"
                            >
                                <i class="fas fa-fw fa-key"></i>
                                {{localize "PF2E.Actor.Character.AbilityBuilder.KeyIcon"}}
                            </button>
                            <input type="number" data-property="system.abilities.{{key}}.value" name="system.abilities.{{key}}.value" value="{{ability.base}}" placeholder="10">
                        {{else}}
                            <button type="button" class="boost hidden"></button>
                            <div class="value">{{ability.base}}</div>
                        {{/if}}
                        <h4>{{localize (lookup ../abilities key)}}</h4>
                    </div>
                {{/each}}
                <button class="complete" type="button" data-action="close">{{localize "PF2E.Actor.Character.AbilityBuilder.Complete"}}</button>
            </div>
        </section>
    </div>

    <div class="row background-stripes">
        <div class="row-heading"></div>
        <div class="abilities">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</form>

{{#*inline "abilityRow"}}
    {{#if buttons}}
        <div class="abilities">
            {{#each buttons as |state|}}
                <div class="row-column" data-ability="{{state.ability}}" data-stat="{{state.stat}}">
                    {{#if flaw}}
                        {{> boostButton type="flaw" button=state.flaw}}
                    {{/if}}
                    {{#if boost}}
                        {{> boostButton type="boost" button=state.boost}}
                    {{/if}}
                </div>
            {{/each}}
        </div>
    {{else if fallback}}
        <div class="full-row">{{localize fallback}}</div>
    {{/if}}
{{/inline}}

{{#*inline "boostButton"}}
    {{#if button.second}}
        <div class="flaw-buttons">
            {{> boostButtonSingle button=button type=type number="first"}}
            {{> boostButtonSingle button=button.second type=type number="second"}}
        </div>
    {{else}}
        {{> boostButtonSingle button=button type=type}}
    {{/if}}

    {{#*inline "boostButtonSingle"}}
        <button type="button" data-action="{{type}}" class="tooltip boost-button {{type}} {{number}}{{#if button.selected}} selected{{/if}}{{#if button.locked}} locked{{/if}}" {{disabled (and button.disabled (not button.selected))}}>
            {{#if button.locked}}<i class="fas fa-lock"></i>{{/if}}
            {{#if (eq number "second")}}
                x2
            {{else if (eq type "flaw")}}
                {{localize "PF2E.Actor.Character.AbilityBuilder.Flaw"}}
            {{else}}
                {{localize "PF2E.Actor.Character.AbilityBuilder.Boost"}}
            {{/if}}
        </button>
    {{/inline}}
{{/inline}}