daggerheart/templates/dialogs/damageReduction.hbs

<div class="damage-reduction-container">
    {{#if rulesToggleable}}
        <button type="button" class="rules-button {{#unless rulesOn}}inactive{{/unless}}" data-action="toggleRules" data-tooltip-text="{{#if rulesOn}}{{localize "DAGGERHEART.UI.Tooltip.rulesOn"}}{{else}}{{localize "DAGGERHEART.UI.Tooltip.rulesOff"}}{{/if}}">
            <i class="fa-solid fa-book"></i>
        </button>
    {{/if}}
    <div class="section-container padded">
        <div class="resources-container">
            <div class="resource-container">
                <h4 class="armor-title">{{localize "DAGGERHEART.APPLICATIONS.DamageReduction.maxUseableArmor"}}</h4>
                <div class="markers-subtitle">{{availableArmor}}</div>
            </div>
        </div>
    </div>
    
    <div class="section-container full-width">
        {{#each marks.armor as |source|}}
            <div class="mark-selection">
                <h4 class="divider">{{source.label}}</h4>
                <div class="mark-selection-inner">
                    {{#each source.marks}}
                        <a
                            class="mark-container {{#if this.selected}}selected{{/if}} {{#if this.spent}}spent{{/if}} {{#if this.disabled}}inactive{{/if}}" 
                            data-action="setMarks" data-type="armor" data-path="{{concat "armor." @../key ".marks." @key}}" data-id="{{@key}}"
                            {{#if this.disabled}}disabled{{/if}}
                        >
                            <i class="fa-solid fa-shield"></i>  
                        </a>
                    {{/each}}
                </div>
            </div>
        {{/each}}
        {{#if usesStressArmor}}
            <div class="mark-selection">
                <h4 class="divider">{{localize "Stress"}}</h4>
                <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-type="stress" data-path="{{concat "stress." @key}}" data-tooltip="{{#if @root.basicMarksUsed}}{{localize "DAGGERHEART.APPLICATIONS.DamageReduction.armorWithStress"}}{{else}}{{localize "DAGGERHEART.APPLICATIONS.DamageReduction.unncessaryStress"}}{{/if}}"
                    >
                        <i class="fa-solid fa-bolt"></i>
                    </div>
                {{/each}}
                </div>
            </div>
        {{/if}}
    </div>

    {{#if availableStressReductions}}
    <div class="resources-container">
        <div class="resource-container">
            <h4 class="armor-title divider">{{localize "DAGGERHEART.APPLICATIONS.DamageReduction.stressReduction"}}</h4>
        </div>
    </div>
    {{/if}}

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

    {{#if reduceSeverity}}
        <div class="resources-container">
            <div class="resource-container">
                <h4 class="armor-title divider">{{localize "DAGGERHEART.APPLICATIONS.DamageReduction.reduceSeverity" nr=reduceSeverity}}</h4>
            </div>
        </div>
    {{/if}}

    {{#if thresholdImmunities}}
        <div class="resources-container">
            <div class="resource-container">
                <h4 class="armor-title divider">{{localize "DAGGERHEART.APPLICATIONS.DamageReduction.thresholdImmunities"}}</h4>
            </div>
        </div>
    {{/if}}

    {{#each thresholdImmunities as | immunity key |}}
        <div class="threshold-label {{#if (gte key @root.currentDamageNr)}}active{{/if}}">{{immunity}}</div>
    {{/each}}

    <footer class="padded">
        <button type="button" data-action="takeDamage">
            {{localize "DAGGERHEART.GENERAL.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 "DAGGERHEART.GENERAL.damage"}}
        </button>
    </footer>
</div>