<section class="dnc-chat-card dnc-chat-card-spell">
  <header class="chat-card-header">
    <div class="chat-card-heading">
      <p class="chat-card-kicker">{{localize "DNC.Chat.Kicker.Magic"}}</p>
      <h2>{{title}}</h2>
      {{#if subtitle}}<p class="chat-card-subtitle">{{subtitle}}</p>{{/if}}
    </div>
    <div class="chat-card-seal {{#if success}}success{{else}}failure{{/if}}">
      {{#if success}}OK{{else}}KO{{/if}}
    </div>
  </header>
  <div class="chat-pill-row">
    <span class="chat-pill {{#if success}}success{{else}}failure{{/if}}">{{#if success}}{{localize "DNC.Chat.Success"}}{{else}}{{localize "DNC.Chat.Failure"}}{{/if}}</span>
    {{#if modeLabel}}<span class="chat-pill">{{modeLabel}}</span>{{/if}}
    {{#if favorLabel}}<span class="chat-pill">{{localize "DNC.Chat.Favor"}} {{favorLabel}}</span>{{/if}}
    <span class="chat-pill">{{targetPillLabel}} {{targetPillValue}}</span>
    <span class="chat-pill">{{localize "DNC.Chat.RollValue"}} {{keptPillValue}}</span>
  </div>
  <div class="chat-keyline">
    <span class="chat-keyline-label">{{localize "DNC.Chat.Rolls"}}</span>
    <p class="roll-values">{{#each values}}<span>{{this}}</span>{{/each}}</p>
  </div>
  {{#if autoDisadvantage}}
    <p class="chat-note">
      <strong>{{localize "DNC.Chat.AutoDisadvantage"}}</strong> :
      {{#if autoDisadvantageCanceled}}
        {{localize "DNC.Chat.AutoDisadvantageCanceled"}}
      {{else}}
        {{localize "DNC.Chat.AutoDisadvantageApplies"}}
      {{/if}}
    </p>
  {{/if}}
  {{#if favorNote}}
    <p class="chat-note"><strong>{{localize "DNC.Chat.Favor"}}</strong> : {{favorNote}}</p>
  {{/if}}
  {{#if focusValue}}
    <p class="chat-note">
      <strong>{{localize "DNC.UI.Focus"}}</strong> : {{focusValue}} {{localize "DNC.Chat.FocusFrom"}} {{focusBeforeLabel}}
      {{#if focusSpent}} · {{focusSpent}} {{localize "DNC.Chat.FocusUsed"}}{{/if}}
      · {{focusRemaining}} {{localize "DNC.Chat.FocusLeft"}}
      {{#if focusDegraded}} · {{localize "DNC.Chat.FocusDropsTo"}} {{focusAfterLabel}}{{/if}}
      {{#if focusRolled}} · {{localize "DNC.Chat.FirstSpellScene"}}{{/if}}
    </p>
  {{else}}
    {{#if focusRolled}}
        <p class="chat-note"><strong>{{localize "DNC.UI.Focus"}}</strong> : {{localize "DNC.Chat.FocusNoBenefit"}}</p>
    {{/if}}
  {{/if}}
  <p class="chat-note"><strong>{{localize "DNC.Chat.HpSpent"}}</strong> : {{spentPv}} · <strong>{{localize "DNC.Chat.HpRemaining"}}</strong> : {{remainingPv}}</p>
  {{#if specialNote}}
    <p class="chat-note warning">{{specialNote}}</p>
  {{/if}}
  {{#if showDamageButton}}
    <div class="chat-actions">
      <button type="button" class="chat-action-button" data-action="rollChatDamage" data-item-uuid="{{itemUuid}}">
        <i class="fa-solid fa-burst"></i> {{localize "DNC.Chat.RollDamage"}}
      </button>
    </div>
  {{/if}}
  {{#if showChaosButton}}
    <div class="chat-actions">
      <button type="button" class="chat-action-button" data-action="rollSpellChaos" data-actor-uuid="{{actorUuid}}" data-item-uuid="{{itemUuid}}">
        <i class="fa-solid fa-dice-d20"></i> {{localize "DNC.Chat.RiskChaos"}}
      </button>
    </div>
  {{/if}}
  <ul class="chat-details chat-details-ornate">
    {{#each details}}
      <li><strong>{{this.label}}</strong> : {{this.value}}</li>
    {{/each}}
  </ul>
</section>
