<div class="rolls">

    {{!-- Dice Display --}}
    <ul class="dice unlist">
        {{#each dice}}
        <li>
            <img src="{{ icon }}" alt="{{ label }}">
            <span class="label">{{ label }}</span>
        </li>
        {{/each}}
    </ul>

    {{!-- Formulas --}}
    <ul class="formulas unlist">
        {{#each rolls}}
        <li>
            {{!-- Formula & Type --}}
            <div class="formula-line">
                <span class="formula">{{ roll.formula }}</span>
                <span class="label">
                    {{#if damageTypes}}
                    <select name="roll.{{ @index }}.damageType">
                        {{ selectOptions damageTypes selected=roll.options.type }}
                    </select>
                    {{else if damageConfig}}
                    {{ damageConfig.label }}
                    {{else}}
                    {{ localize "DND5E.Formula" }}
                    {{/if}}
                    {{#if damageConfig.icon}}
                    <dnd5e-icon src="{{ damageConfig.icon }}" alt="{{ damageConfig.label }}"></dnd5e-icon>
                    {{/if}}
                </span>
            </div>

            {{!-- Situational Bonus --}}
            <div class="form-group">
                <input type="text" class="full-width" name="roll.{{ @index }}.situational"
                       value="{{ roll.data.situational }}" placeholder="{{ localize "DND5E.RollSituationalBonus" }}">
            </div>
        </li>
        {{/each}}
    </ul>

</div>
