daggerheart/templates/dialogs/beastform/beastformDialog.hbs

<div>
    <div class="beastforms-outer-container">
        <div class="beastforms-container">
            {{#each beastformTiers as |tier tierKey|}}
                <fieldset class="beastforms-tier">
                    <legend>{{tier.label}}</legend>
                    {{#each tier.values as |form uuid|}}
                        <div data-action="selectBeastform" data-uuid="{{uuid}}" data-tooltip="{{concat "#item#" uuid}}" class="beastform-container {{#unless form.selected}}inactive{{/unless}} {{#if form.draggable}}draggable{{/if}}">
                            <img src="{{form.value.img}}" />
                            <div class="beastform-title">{{form.value.name}}</div>
                        </div>
                    {{/each}}
                </fieldset>
            {{/each}}
        </div>
        <div class="advanced-container {{#if (or (eq selected.system.beastformType 'evolved') (eq selected.system.beastformType 'hybrid'))}}expanded{{/if}}">
            {{#if (eq selected.system.beastformType 'evolved')}}
                <h2>{{localize "DAGGERHEART.ITEMS.Beastform.evolve"}}</h2>

                <div class="form-features">   
                    {{#if selectedBeastformEffect}}
                        <div class="form-feature" data-tooltip="{{concat "#item#" selectedBeastformEffect.uuid}}">
                            <h4>{{localize "DAGGERHEART.ITEMS.Beastform.evolvedFeatureTitle"}}</h4>
                            <div>{{{selectedBeastformEffect.description}}}</div>
                        </div>
                    {{/if}}
                </div>

                <div class="advanced-form-container evolved">
                    {{#if evolved.form}}
                        <div class="beastform-title">{{concat (localize "DAGGERHEART.CONFIG.BeastformType.evolved") " " evolved.form.name}}</div>
                        <img src="{{evolved.form.img}}" />                        
                    {{else}}
                        <div class="empty-form">
                            <i class="fa-solid fa-plus"></i>
                            <label>{{localize "DAGGERHEART.ITEMS.Beastform.evolvedDrag"}}</label>
                        </div>
                    {{/if}}
                </div>
            {{/if}}
            {{#if (eq selected.system.beastformType 'hybrid')}}
                <h2>{{localize "DAGGERHEART.ITEMS.Beastform.hybridize"}}</h2>

                <div class="form-features">   
                    {{#if selectedBeastformEffect}}
                        <div class="form-feature" data-tooltip="{{concat "#item#" selectedBeastformEffect.uuid}}">
                            <h4>{{localize "DAGGERHEART.ITEMS.Beastform.hybridizeFeatureTitle"}}</h4>
                            <div>{{{selectedBeastformEffect.description}}}</div>
                        </div>
                    {{/if}}
                </div>

                <div class="advanced-forms-container">
                    {{#each hybridForms as | form key |}}
                        <div class="advanced-form-container hybridized {{#unless form}}empty{{/unless}}" id="{{key}}">
                            {{#if form}}
                                <div class="beastform-title-wrapper">
                                    <div class="beastform-title">{{form.name}}</div>
                                </div>
                                <div class="hybrid-data-wrapper">
                                    <div class="hybrid-data-container">
                                        <label>{{localize "DAGGERHEART.GENERAL.features"}}</label>
                                        <div class="hybrid-data-inner-container">
                                            {{#each form.system.features as | feature |}}
                                                <a data-action="toggleHybridFeature" id="{{feature.uuid}}" data-form="{{@../key}}"><div class="hybrid-data {{#if feature.selected}}active{{/if}}" data-tooltip="{{concat "#item#" feature.uuid}}">{{feature.name}}</div></a>
                                            {{/each}}
                                        </div>
                                    </div>    
                                    <div class="hybrid-data-container">
                                        <label>{{localize "DAGGERHEART.GENERAL.Advantage.plural"}}</label>
                                        <div class="hybrid-data-inner-container">
                                            {{#each form.system.advantageOn as | advantage id |}}
                                                <a data-action="toggleHybridAdvantage" id="{{id}}" data-form="{{@../key}}"><div class="hybrid-data {{#if advantage.selected}}active{{/if}}">{{advantage.value}}</div></a>
                                            {{/each}}
                                        </div>
                                    </div>     
                                </div>               
                            {{else}}
                                <div class="empty-form">
                                    <i class="fa-solid fa-plus"></i>
                                    <label>{{localize "DAGGERHEART.ITEMS.Beastform.hybridizeDrag"}}</label>
                                </div>
                            {{/if}}
                        </div>
                    {{/each}}
                </div>
            {{/if}}
        </div>
    </div>

    <footer>
        <button type="button" data-action="submitBeastform" {{#if (not canSubmit)}}disabled{{/if}}>{{localize "DAGGERHEART.ITEMS.Beastform.transform"}}</button>
    </footer>
</div>