<div class="daggerheart dh-style tooltip card-style">
    <img class="tooltip-image" src="{{item.img}}" />
    <h2 class="tooltip-title">{{localize item.name}}</h2>
    <div class="tags">
        {{#if item.uses.max}}
            <div class="tag">
              <span>{{localize "DAGGERHEART.GENERAL.used"}} {{item.uses.value}}</span>
            </div>
            <div class="tag">
              <span>{{localize "DAGGERHEART.GENERAL.max"}} {{formulaValue item.uses.max item}}</span>
            </div>
            <div class="tag">
              <span>{{localize "DAGGERHEART.GENERAL.recovery"}} {{#with (lookup config.GENERAL.refreshTypes item.uses.recovery) as | type |}}{{localize type.label}}{{/with}}</span>
            </div>
        {{/if}}
        {{#if (gt item.cost.length 0)}}
            {{#each item.cost as | cost |}}
                <div class="tag">
                  <span>{{localize "DAGGERHEART.GENERAL.type"}} {{#with (lookup @root.config.GENERAL.abilityCosts cost.type) as | type |}}{{localize type.label}}{{/with}}</span>
                </div>
                <div class="tag">
                  <span>{{localize "DAGGERHEART.GENERAL.value"}} {{cost.value}}</span>
                </div>
                {{#if cost.scalable}}
                  <div class="tag">
                    <span>{{localize "DAGGERHEART.GENERAL.scalable"}} {{localize "DAGGERHEART.GENERAL.true"}}</span>
                  </div>
                  <div class="tag">
                    <span>{{localize "DAGGERHEART.GENERAL.step"}} {{cost.step}}</span>
                  </div>
                {{/if}}
            {{/each}}
        {{/if}}
        {{#if (or item.range item.target)}}
            <div class="tag">
              <span>
                  {{localize "DAGGERHEART.GENERAL.range"}} 
                  {{#if item.range}}
                      {{#with (lookup @root.config.GENERAL.range item.range) as | range |}}
                          {{localize range.label}}
                      {{/with}}
                  {{else}}
                      {{localize "DAGGERHEART.GENERAL.none"}}
                  {{/if}}
              </span>
            </div>
        {{/if}}
        <div class="tag">
          <span>
              {{localize "DAGGERHEART.GENERAL.Target.single"}} 
              {{#if item.target.type}}
                  {{#with (lookup @root.config.ACTIONS.targetTypes item.target.type) as | target |}}
                      {{@root.item.target.amount}} {{localize target.label}}
                  {{/with}}
              {{else}}
                  {{localize "DAGGERHEART.GENERAL.none"}}
              {{/if}}
          </span>
        </div>
    </div>
    {{#if description}}
        <div class="tooltip-description">{{{description}}}</div>
    {{/if}}
    <p class="tooltip-hint">
        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
    </p>
</div>