daggerheart/templates/views/rollSelection.hbs

<div>
    <div class="roll-dialog-container">
        <div class="flexcol">
            <div class="roll-dialog-experience-container">
                {{#each this.experiences}}
                    {{#if this.description}}
                        <div class="roll-dialog-chip {{#if this.selected}}selected{{/if}}" data-action="selectExperience" data-key="{{this.id}}">
                            <span>{{this.description}}</span>
                            <span>+{{this.value}}</span>
                        </div>
                    {{/if}}
                {{/each}}
            </div>
            <div class="flexrow">
                <button class="disadvantage flex1 {{#if this.advantage}}selected{{/if}}" data-action="setAdvantage">Advantage</button>
                <button class="disadvantage flex1 {{#if this.disadvantage}}selected{{/if}}" data-action="setDisadvantage">Disadvantage</button>
            </div>
            {{#if (not this.isNpc)}}
                <div class="form-group">
                    <label>Hope</label>
                    <div class="form-fields">
                        <select name="hope">
                            {{selectOptions this.diceOptions selected=this.hope valueAttr="value" labelAttr="name" localize=true}}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Fear</label>
                    <div class="form-fields">
                        <select name="fear">
                            {{selectOptions this.diceOptions selected=this.fear valueAttr="value" labelAttr="name" localize=true}}
                        </select>
                    </div>
                </div>
            {{/if}}
        </div>
        <footer>
            <button data-action="finish">Roll</button>
        </footer>
    </div>
</div>