daggerheart/templates/views/damageReduction.hbs

<div class="damage-reduction-container">
    <div class="section-container padded">
        <div class="resources-container">
            <div class="resource-container">
                <h4 class="armor-title">{{localize "DAGGERHEART.DamageReduction.ArmorMarks"}}</h4>
                <div class="markers-subtitle">{{armorMarks}}/{{armorScore}}</div>
            </div>
            {{#if this.stress}}
                <div class="resource-container">
                    <h4 class="armor-title">{{localize "DAGGERHEART.DamageReduction.Stress"}}</h4>
                    <div class="markers-subtitle">{{this.stress.value}}/{{this.stress.maxTotal}}</div>
                </div>
            {{/if}}
        </div>
    </div>
    
    <div class="section-container">
        <h4 class="mark-selection divider">
            <div class="mark-selection-inner">
                {{#each marks.armor}}
                    <div 
                        class="mark-container {{#if this.selected}}selected{{/if}}" 
                        data-action="setMarks" data-key="{{@key}}" data-type="armor"
                    >
                        <i class="fa-solid fa-shield"></i>    
                    </div>
                {{/each}}
            </div>
             <div class="mark-selection-inner">
                {{#each marks.stress}}
                    <div 
                        class="mark-container {{#if this.selected}}selected{{/if}} {{#if (not @root.basicMarksUsed)}}inactive{{/if}}" 
                        {{#if @root.basicMarksUsed}}data-action="setMarks"{{/if}} data-key="{{@key}}" data-type="stress" data-tooltip="{{#if @root.basicMarksUsed}}{{localize "DAGGERHEART.DamageReduction.ArmorWithStress"}}{{else}}{{localize "DAGGERHEART.DamageReduction.UnncessaryStress"}}{{/if}}"
                    >
                        <i class="fa-solid fa-bolt"></i>
                    </div>
                {{/each}}
            </div>
        </h4>
        <div class="markers-subtitle bold">{{localize "DAGGERHEART.DamageReduction.UsedMarks"}}</div>
    </div>

    <div class="resources-container">
        <div class="resource-container">
            <h4 class="armor-title">{{localize "DAGGERHEART.DamageReduction.StressReduction"}}</h4>
        </div>
    </div>

    {{#each availableStressReductions}}
        <div class="section-container">
            <h4 class="stress-reduction-container divider">
                <div class="stress-reduction {{#if (eq this.from @root.currentDamage)}}active{{/if}} {{#if this.selected}}selected{{/if}}" data-action="useStressReduction" data-reduction="{{@key}}">
                    {{this.from}}
                    <i class="fa-solid fa-arrow-right-long"></i>
                    {{this.to}}
                    <div class="stress-reduction-cost">
                        {{this.cost}}
                        <i class="fa-solid fa-bolt"></i>
                    </div>
                </div>
            </h4>
        </div>
    {{/each}}

    <footer class="padded">
        <button type="button" data-action="takeDamage">
            {{localize "Take"}}
            <div class="damage-value {{#if this.reducedDamage}}reduced-value{{/if}}">{{this.damage}}</div>
            {{#if this.reducedDamage}}
                <i class="fa-solid fa-arrow-right-long"></i>
                <div class="damage-value">{{this.reducedDamage}}</div>
            {{/if}}
            {{localize "Damage"}}
        </button>
    </footer>
</div>