daggerheart/templates/views/ancestrySelection.hbs

<div>
    <div class="ancestry-section">
        <h2>{{localize "Daggerheart Ancestries"}}</h2>
        <div class="ancestry-container">
            {{#each systemAncestries}}
                <div class="ancestry-inner-container">
                    <div class="image-container">
                        <img src="{{this.img}}" class="{{#if this.selected}}selected{{else}}{{#if (eq ../selectedAncestries.length 2)}}disabled{{/if}}{{/if}}" data-action="selectAncestry" data-uuid="{{this.uuid}}" />
                    </div>
                    <div class="name-container">
                        <div data-action="viewItem" data-uuid="{{this.uuid}}">{{this.name}}</div>
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
    <div class="ancestry-section">
        <h2>{{localize "Custom Ancestries"}}</h2>
        <div class="ancestry-container">
            {{#each customAncestries}}
                <div class="ancestry-inner-container">
                    <div class="image-container">
                        <img src="{{this.img}}" class="{{#if this.selected}}selected{{else}}{{#if (eq ../selectedAncestries.length 2)}}disabled{{/if}}{{/if}}" data-action="selectAncestry" data-uuid="{{this.uuid}}" />
                    </div>
                    <div class="name-container">
                        <div data-action="viewItem" data-uuid="{{this.uuid}}">{{this.name}}</div>
                    </div>
                </div>
            {{/each}}
            {{#if (eq customAncestries.length 0)}}No Custom Ancestries created in this world{{/if}}
        </div>
    </div>
    <div class="ancestry-section">
        <h2>{{localize "Ancestry Features"}}</h2>
        <div class="ancestry-container">
            {{#each ancestryFeatures}}
                <div class="ancestry-inner-container">
                    <div class="image-container">
                        <img src="{{this.img}}" class="{{#if this.selected}}selected{{else}}{{#if (eq ../selectedFeatures.length 2)}}disabled{{/if}}{{/if}}" data-action="selectFeature" data-uuid="{{this.uuid}}" />
                    </div>
                    <div class="name-container">
                        <div data-action="viewItem" data-uuid="{{this.uuid}}">{{this.name}}</div>
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
    {{#if (eq this.selectedAncestries.length 2)}}
        <div class="ancestry-section">
            <h2>{{localize "Mixed Ancestry"}}</h2>
            <div class="mixed-ancestry-container">
                <div class="mixed-ancestry-name">
                    <div>{{localize "Ancestry Name"}}</div>
                    <input class="ancestry-name" type="text" value="{{this.ancestryInfo.name}}" />
                </div>
                <div class="mixed-ancestry-images">
                    {{#each selectedAncestries}}
                        <img class="{{#if (eq ../ancestryInfo.img this.img)}}selected{{/if}}" src="{{this.img}}" data-action="selectImage" data-img="{{this.img}}" />
                    {{/each}}
                    <div class="mixed-ancestry-image">
                        <img class="{{#if (eq this.ancestryInfo.img this.ancestryInfo.customImg)}}selected{{/if}}" src="{{this.ancestryInfo.customImg}}" data-action="selectImage" data-img="{{this.ancestryInfo.customImg}}" />
                        <i class="fa-solid fa-upload" data-action="editImage"></i>
                    </div>
                </div>
            </div>
            <textarea class="ancestry-description">{{this.ancestryInfo.description}}</textarea>
        </div>
    {{/if}}
    <footer class="flexrow">
        <button class="flex1" data-action="saveAncestry" {{#if (not (eq selectedFeatures.length 2))}}disabled{{/if}}>Select Ancestry</button>
    </footer>
</div>