<div class="dnd5e2 chat-card midi-chat-card item-card " data-actor-id="{{ actor.id }}" data-item-id="{{ item.id }}"
  data-actor-uuid="{{ actor.uuid }}" date-item-uuid="{{ item.uuid }}" {{#if tokenId}}data-token-id="{{tokenId}}"
  data-token-uuid={{tokenUuid}}{{/if}} {{#if isSpell}}data-spell-level="{{ item.system.level }}" {{/if}} {{#if
  isPower}}data-power-level="{{item.system.level}}" {{/if}}>

  {{!-- Collapsible Item Details --}}
  <section class="card-header description collapsible">

    {{!-- Summary --}}
    <header class="summary">
      <img class="gold-icon" src="{{ item.img }}" alt="{{ item.name }}">
      <div class="name-stacked border">
        <span class="title">{{ item.name }}</span>
        {{#if (or data.subtitle item.system.chatFlavor)}}
        <span class="subtitle">
          {{#if item.system.chatFlavor}}{{ item.system.chatFlavor }}
          {{else}}{{{ data.subtitle }}}{{/if}}
        </span>
        {{/if}}
      </div>
      <i class="fas fa-chevron-down fa-fw"></i>
    </header>
    {{!-- Details --}}
    <section class="details collapsible-content card-content">
      {{#unless hideItemDetails}}
      <div class="wrapper">
        {{{data.description.chat}}}
      </div>
      {{/unless}}
    </section>
  </section>

  {{!-- Item Actions --}}
  {{#if hasButtons}}
  <div class="card-buttons midi-buttons">
    {{!-- Attacks --}}
    {{#if hasAttack}}
    {{#if mergeCardMulti}}
    <div class="midi-qol-attack-buttons flexrow 5">
      <button data-action="attack-dis" style="flex: 1 1 0" data-tooltip="{{localize 'DND5E.Disadvantage'}}"><i
          class="fas fa-caret-down"></i><i class="fas fa-dice-d20"></i><i class="fas fa-dice-d20"></i></button>
      <button data-action="attack" style="flex: 3 1 0">{{ localize "DND5E.Attack" }}</button>
      <button data-action="attack-adv" style="flex: 1 1 0" data-tooltip="{{localize 'DND5E.Advantage'}}"><i
          class="fas fa-caret-up"></i><i class="fas fa-dice-d20"></i><i class="fas fa-dice-d20"></i></button>
    </div>
    {{else}}
    <div class="midi-qol-attack-buttons">
      <button data-action="attack">{{ localize "DND5E.Attack" }}</button>
    </div>
    {{/if}}
    {{/if}}

    {{!-- Damage / Healing --}}
    {{#if hasDamage}}
    {{#if mergeCardMulti}}
    <div class="midi-qol-damage-buttons flexrow 5">
      <button data-action="damage-nocritical" style="flex: 1 1 0" data-tooltip="{{localize 'DND5E.Normal'}}"><i
          class="fas fa-dice-d6"></i></button>
      <button data-action="damage" style="flex:3 1 0">{{ dmgBtnText }}</button>
      <button data-action="damage-critical" style="flex: 1 1 0" data-tooltip="{{localize 'DND5E.Critical'}}"><i
          class="fas fa-dice-d6"></i><i class="fas fa-dice-d6"></i></button>
    </div>
    {{else}}
    <div class="midi-qol-damage-buttons">
      <button data-action="damage">{{ dmgBtnText }}</button>
    </div>
    {{/if}}
    {{/if}}

    {{!-- Versatile --}}
    {{#if isVersatile}}
    <button class="midi-qol-versatile-damage-button" data-action="versatile">{{ versaBtnText }}</button>
    {{/if}}


    {{!-- Saving Throw --}}

    {{#if hasSave}}
    {{#with item.system.save}}
    <button data-action="save" data-ability="{{ability}}" data-dc="{{dc}}">
      {{#with (lookup (lookup @root.config.abilities ability) "label") as |abilityLabel|}}
      <span class="visible-dc">{{ localize "DND5E.SavingThrowDC" dc=../dc ability=abilityLabel }}</span>
      <span class="hidden-dc">{{ localize "DND5E.SavePromptTitle" ability=abilityLabel }}</span>
      {{ SavingThrow }} {{labels.save}}
      {{/with}}
    </button>
    {{/with}}
    {{/if}}
    <!-- dnd5e
    {{#if hasSave}}
    {{#with item.system.save}}
    <button type="button" data-action="save" data-ability="{{ ability }}" data-dc="{{ dc }}">
      <i class="fas fa-shield-heart"></i>
      {{#with (lookup (lookup @root.config.abilities ability) "label") as |abilityLabel|}}
      <span class="visible-dc">{{ localize "DND5E.SavingThrowDC" dc=../dc ability=abilityLabel }}</span>
      <span class="hidden-dc">{{ localize "DND5E.SavePromptTitle" ability=abilityLabel }}</span>
      {{/with}}
    </button>
    {{/with}}
    {{/if}}
<-->
    {{!-- Other Formula --}}
    {{#if item.system.formula}}
    <button class="midi-qol-otherDamage-button" data-action="formula">{{ OtherFormula }}</button>
    {{/if}}
    <!-- dnd5e
    {{#if item.system.formula}}
    <button type="button" data-action="formula">
      <i class="fas fa-ellipsis"></i>
      {{ localize "DND5E.OtherFormula"}}
    </button>
    {{/if}}
    <-->

    {{!-- Templates --}}
    {{#if hasAreaTarget}}
    <button data-action="placeTemplate">{{ PlaceTemplate }}</button>
    {{/if}}
    <!-- dnd5e
    {{#if hasAreaTarget}}
    <button type="button" data-action="placeTemplate">
      <i class="fas fa-bullseye"></i>
      {{ localize "DND5E.PlaceTemplate" }}
    </button>
    {{/if}}
    <-->

    {{!-- Tool Check --}}
    {{#if isTool}}
    <button data-action="toolCheck" data-ability="{{system.ability.value}}">{{ Use }} {{item.name}}</button>
    {{/if}}
    <!-- dnd5e>
    {{#if isTool}}
    <button type="button" data-action="toolCheck" data-ability="{{ item.system.ability }}">
      <i class="fas fa-hammer"></i>
      {{ localize "DND5E.UseItem" item=item.name }}
    </button>
    {{/if}}
    <-->

    {{!-- Ability Check --}}
    {{#if hasAbilityCheck}}
    <button data-action="abilityCheck" data-ability="{{item.sytem.ability}}">{{labels.abilityCheck}}</button>
    {{/if}}
    <!-- dnd5e>
    {{#if hasAbilityCheck}}
    <button type="button" data-action="abilityCheck" data-ability="{{ item.system.ability }}">
      <i class="dnd5e-icon" data-src="systems/dnd5e/icons/svg/ability-score-improvement.svg"></i>
      {{ labels.abilityCheck }}
    </button>
    {{/if}}
    <-->
    {{!-- Apply Effects --}}
    {{#if hasEffects}}
    <button data-action="applyEffects">{{ localize "midi-qol.ApplyEffects" }}</button>
    {{/if}}
    {{#if confirmAttackDamage}}
    <div class="midi-qol-confirm-damage-roll">
      <div class="flexrow 3">
        <button class="midi-qol-confirm-damage-roll-complete-miss"
          data-action="confirm-damage-roll-complete-miss">{{localize "midi-qol.ConfirmMiss"}}</button>
        <button class="midi-qol-confirm-damage-roll-complete" data-action="confirm-damage-roll-complete">{{localize
          "midi-qol.ConfirmRoll"}}</button>
        <button class="midi-qol-confirm-damage-roll-complete-hit"
          data-action="confirm-damage-roll-complete-hit">{{localize "midi-qol.ConfirmHit"}}</button>
      </div>
      {{#if canCancel}}
      <button class="midi-qol-confirm-damage-roll-cancel" data-action="confirm-damage-roll-cancel">{{localize
        "Cancel"}}</button>
      {{/if}}
    </div>
    {{/if}}
  </div>
  {{/if}}
  {{!-- Midi results --}}
  {{#if isMerge}}
  <div class="midi-results">
    {{#if condensed}}
    <div class="flexrow 2">
      <div class="midi-qol-attack-roll">
        <div class="end-midi-qol-attack-roll"></div>
      </div>
      <div class="midi-qol-damage-roll">
        <div class="end-midi-qol-damage-roll"></div>
      </div>
    </div>
    <div class="midi-qol-hits-display">
      <div class="end-midi-qol-hits-display"></div>
    </div>
    {{else}}
    <div class="midi-qol-attack-roll">
      <div class="end-midi-qol-attack-roll"></div>
    </div>
    <div class="midi-qol-hits-display">
      <div class="end-midi-qol-hits-display"></div>
    </div>
    <div class="midi-qol-damage-roll">
      <div class="end-midi-qol-damage-roll"></div>
    </div>
    {{/if}}
    <div class="midi-qol-other-damage-roll">
      <div class="end-midi-qol-other-damage-roll"></div>
    </div>
    <div class="midi-qol-bonus-damage-roll">
      <div class="end-midi-qol-bonus-bonus-roll"></div>
    </div>
    <div class="midi-qol-saves-display">
      <div class="end-midi-qol-saves-display"></div>
    </div>

  </div>
  {{/if}}

  {{!-- Reactions --}}
  {{#if (and data.activation.condition (eq data.activation.type "reaction"))}}
  <p class="supplement"><strong>{{ localize "DND5E.Reaction" }}</strong>{{ data.activation.condition }}</p>
  {{/if}}

  {{!-- Materials --}}
  {{#if data.materials.value}}
  <p class="supplement"><strong>{{ localize "DND5E.Materials" }}</strong>{{ data.materials.value }}</p>
  {{/if}}

  {{!-- Item Properties --}}
  {{#if data.hasProperties}}
  <ul class="card-footer pills unlist">
    {{#each data.tags}}
    <li class="pill pill-sm">
      <span class="label">{{ this }}</span>
    </li>
    {{/each}}
    {{#each data.properties}}
    <li class="pill pill-sm">
      <span class="label">{{ this }}</span>
    </li>
    {{/each}}
  </ul>
  {{/if}}

  {{!-- Applicable Effects --}}
  {{#if hasEffects}}
  <div class="effects-tray collapsible collapsed">
    <label class="roboto-upper">
      <i class="fas fa-bolt"></i>
      <span>{{ localize "DND5E.Effects" }}</span>
      <i class="fas fa-caret-down"></i>
    </label>
    <div class="collapsible-content">
      <ul class="effects unlist wrapper">
        {{~#each effects~}}
        <li class="effect" data-uuid="{{ uuid }}" data-transferred="{{ transfer }}">
          <!-- TODO V12 change to icon -->
          <img class="gold-icon" alt="{{ name }}" src="{{ img }}">
          <div class="name-stacked">
            <span class="title">{{ name }}</span>
            <span class="subtitle">{{ duration.label }}</span>
          </div>
          <button type="button" class="apply-effect" data-action="applyEffect" data-tooltip="DND5E.EffectsApplyTokens"
            aria-label="{{ localize " DND5E.EffectsApplyTokens" }}">
            <i class="fas fa-reply-all fa-flip-horizontal"></i>
          </button>
        </li>
        {{~/each~}}
      </ul>
    </div>
  </div>
  {{/if}}
</div>