<div class="attack-result {{#if isAttackWin}}attack-success{{else}}attack-failure{{/if}}">
  <h3><i class="fa-solid {{#if isAttackWin}}fa-sword{{else}}fa-shield{{/if}}"></i> Combat Result</h3>
  <div class="combat-comparison">
    <div class="combat-side attacker {{#if isAttackWin}}winner{{else}}loser{{/if}}">
      <div class="side-label">{{localize "LETHALFANTASY.Combat.attacker"}}</div>
      <div class="side-info">
        <div class="side-name">{{attackerName}}</div>
        <div class="side-roll">{{attackRoll}}</div>
      </div>
    </div>
    <div class="combat-vs">VS</div>
    <div class="combat-side defender {{#if isAttackWin}}loser{{else}}winner{{/if}}">
      <div class="side-label">{{localize "LETHALFANTASY.Combat.defender"}}</div>
      <div class="side-info">
        <div class="side-name">{{defenderName}}</div>
        <div class="side-roll">{{defenseRoll}}</div>
      </div>
    </div>
  </div>
  <div class="combat-result-text">
    {{#if (equals outcome "shielded-hit")}}
    <i class="fa-solid fa-shield"></i> <strong>{{defenderName}}</strong> has blocked with shield — apply armor DR + shield DR <strong>{{shieldDamageReduction}}</strong>.
    {{else if isAttackWin}}
    <i class="fa-solid fa-circle-check"></i> <strong>{{attackerName}}</strong> hits <strong>{{defenderName}}</strong>!
    {{else}}
    <i class="fa-solid fa-shield-halved"></i> <strong>{{defenderName}}</strong> avoided the attack!
    {{/if}}
  </div>
  {{{damageButton}}}
</div>
