<div class="myriad-roll-card {{outcomeClass}}">

  <header class="myrcard-header">
    <span class="myrcard-actor-name">{{actorName}}</span>
    <span class="myrcard-roll-type">{{rollTypeLabel}}</span>
  </header>

  <div class="myrcard-subject">
    <i class="{{subjectIcon}}"></i>
    <span class="myrcard-subject-name">{{subjectName}}</span>
  </div>

  {{#if subjectDescription}}
  <div class="myrcard-subject-description">{{{subjectDescription}}}</div>
  {{/if}}

  {{#if formulaLine}}
  <div class="myrcard-formula">{{formulaLine}}</div>
  {{/if}}

  {{#if showRollData}}
  <div class="myrcard-dice-row">
    <div class="myrcard-die-block">
      <div class="myrcard-die-tens">{{diceTens}}</div>
      <div class="myrcard-die-units">{{diceUnits}}</div>
    </div>
    <div class="myrcard-result-block">
      <div class="myrcard-target-value">{{rolled}}</div>
      <div class="myrcard-target-label">{{resultLabel}}</div>
    </div>
    <div class="myrcard-vs">⟵ vs ⟶</div>
    <div class="myrcard-target-block">
      <div class="myrcard-target-value">{{targetValue}}</div>
      <div class="myrcard-target-label">{{targetLabel}}</div>
    </div>
  </div>

  <div class="myrcard-outcome-bar">
    <div class="myrcard-outcome-main">
      <span class="myrcard-outcome-text">{{outcomeText}}</span>
      {{#if criticalLabel}}
      <span class="myrcard-critical-text">{{criticalLabel}}</span>
      {{/if}}
    </div>
    {{#if hasMargin}}
    <span class="myrcard-margin-text">{{marginLabel}} <strong class="myrcard-margin-value">{{margin}}</strong></span>
    {{/if}}
  </div>
  {{/if}}

</div>
