<div class="les-oublies-chat-card {{#if result.success}}is-success{{else}}is-failure{{/if}}">
  <header class="chat-card-header">
    <div class="chat-card-banner">
      <img class="chat-card-portrait" src="{{actor.img}}" alt="{{actor.name}}" />
      <div class="chat-card-heading">
        <p class="chat-card-kicker">{{localize "LESOUBLIES.rolls.test"}}</p>
        <h3>{{result.label}}</h3>
        <p class="chat-card-subtitle"><strong>{{actor.name}}</strong> · {{result.rollModeLabel}}</p>
      </div>
      <div class="chat-card-badge {{#if result.success}}success{{else}}failure{{/if}}">{{result.successLabel}}</div>
    </div>
  </header>

  <section class="chat-card-body">
    <div class="roll-summary-grid">
      <div><span>{{localize "LESOUBLIES.rolls.score"}}</span><strong>{{result.score}}</strong></div>
      <div><span>{{localize "LESOUBLIES.rolls.difficulty"}}</span><strong>{{numberFormat result.difficulty sign=true}}</strong></div>
      <div><span>{{localize "LESOUBLIES.rolls.natural"}}</span><strong>{{result.natural}}</strong></div>
      <div><span>{{localize "LESOUBLIES.rolls.final"}}</span><strong>{{result.final}}</strong></div>
      <div><span>{{localize "LESOUBLIES.rolls.threshold"}}</span><strong>{{result.threshold}}+</strong></div>
      <div><span>{{localize "LESOUBLIES.rolls.margin"}}</span><strong>{{numberFormat result.margin sign=true}}</strong></div>
    </div>

    <p class="roll-formula"><strong>{{localize "LESOUBLIES.rolls.resolution"}}</strong> : {{result.natural}} + {{result.score}} {{numberFormat result.difficulty sign=true}} = {{result.final}}</p>

    <div class="dice-strip">
      {{#each result.dice as |die|}}
        <div class="die-chip {{#if (eq die.index @root.result.selectedDie.index)}}selected{{/if}}">
          <strong>{{die.typeLabel}}</strong>
          <span>{{die.breakdown}}</span>
          {{#if die.exploded}}<em>{{localize "LESOUBLIES.rolls.exploded"}}</em>{{/if}}
          {{#if die.sourceLabel}}<em>{{die.sourceLabel}}</em>{{/if}}
        </div>
      {{/each}}
    </div>

    <div class="chat-callouts">
      <div class="chat-callout">
        <span>{{localize "LESOUBLIES.rolls.selectedDie"}}</span>
        <strong>{{result.selectedSummary}}</strong>
        <em>{{result.choiceLabel}}</em>
      </div>
      <div class="chat-callout">
        <span>{{localize "LESOUBLIES.rolls.debt"}}</span>
        <strong>{{result.debt.label}}</strong>
      </div>
      {{#if result.spentResource}}
        <div class="chat-callout">
          <span>{{localize "LESOUBLIES.rolls.extraDie"}}</span>
          <strong>{{result.spentResource.label}}</strong>
        </div>
      {{/if}}
      {{#if result.automaticFailure}}
        <div class="chat-callout warning">
          <span>{{localize "LESOUBLIES.rolls.result"}}</span>
          <strong>{{localize "LESOUBLIES.rolls.naturalOne"}}</strong>
        </div>
      {{/if}}
    </div>
  </section>
</div>
