<div class="tab usage-tab content padding-7" data-group="roll" data-tab="usage">
  {{!-- Resources --}}
  <div class="row ap-cost margin-top-5">
    <div class="wrapper"><i class="fa-lg fa-solid fa-dice-d6"></i></div>
    <span>{{localize "dc20rpg.item.sheet.usage.ap"}}</span>
    <input type="text" name="system.costs.resources.actionPoint" value="{{system.costs.resources.actionPoint}}" placeholder="-" data-dtype="Number">
  </div>
  <div class="row margin-top-5 stamina-cost">
    <div class="wrapper"><i class="fa-lg fa-solid fa-hand-fist"></i></div>
    <span>{{localize "dc20rpg.item.sheet.usage.sp"}}</span>
    <input type="text" name="system.costs.resources.stamina" value="{{system.costs.resources.stamina}}" placeholder="-" data-dtype="Number">
  </div>
  <div class="row margin-top-5 mana-cost">
    <div class="wrapper"><i class="fa-lg fa-solid fa-star"></i></div>
    <span>{{localize "dc20rpg.item.sheet.usage.mp"}}</span>
    <input type="text" name="system.costs.resources.mana" value="{{system.costs.resources.mana}}" placeholder="-" data-dtype="Number">
  </div>
  <div class="row margin-top-5 health-cost">
    <div class="wrapper"><i class="fa-lg fa-solid fa-heart"></i></div>
    <span>{{localize "dc20rpg.item.sheet.usage.hp"}}</span>
    <input type="text" name="system.costs.resources.health" value="{{system.costs.resources.health}}" placeholder="-" data-dtype="Number">
  </div>
  <div class="row margin-top-5 grit-cost">
    <div class="wrapper"><i class="fa-lg fa-solid fa-clover"></i></div>
    <span>{{localize "dc20rpg.item.sheet.usage.grit"}}</span>
    <input type="text" name="system.costs.resources.grit" value="{{system.costs.resources.grit}}" placeholder="-" data-dtype="Number">
  </div>
  <div class="row margin-top-5 rest-cost">
    <div class="wrapper"><i class="fa-lg fa-solid fa-campground"></i></div>
    <span>{{localize "dc20rpg.item.sheet.usage.rest"}}</span>
    <input type="text" name="system.costs.resources.restPoints" value="{{system.costs.resources.restPoints}}" placeholder="-" data-dtype="Number">
  </div>

  {{!-- Custom Resources --}}
  {{#each system.costs.resources.custom as |cost key|}}
  <div class="row margin-top-5 custom-resource">
    <img class="resource-img" src="{{cost.img}}"/>
    <div class="left-part-row">
      <span>{{cost.name}} </span>
      <a class="remove-resource" title="{{localize "dc20rpg.item.sheet.cost.remove"}}" data-key="{{key}}"><i class="fa-solid fa-square-minus fa-lg margin-right-3"></i></a>
    </div>
    <input type="text" name="system.costs.resources.custom.{{key}}.value" value="{{cost.value}}" placeholder="-" data-dtype="Number">
  </div>
  {{/each}}

  {{!-- Charges --}}
  <div class="row margin-top-10">
    <div class="left-part-row">
      <span>{{localize "dc20rpg.item.sheet.usage.charges"}}</span>
      <div>
        <a class="activable {{#if system.costs.charges.overriden}}fa-solid fa-square-check{{else}}fa-regular fa-square{{/if}} fa-lg" data-path="system.costs.charges.overriden" title="{{localize "dc20rpg.item.sheet.usage.useCustomRecovery"}}"></a>
        <a class="activable margin-right-5 {{#if system.costs.charges.showAsResource}}fa-solid fa-square-minus{{else}}fa-regular fa-square-plus{{/if}} fa-lg" data-path="system.costs.charges.showAsResource" title="{{localize "dc20rpg.item.sheet.usage.showAsResource"}}"></a>
      </div>
    </div>
    <div class="right-part-row">
      <p class="margin-right-3">Use</p>
      <input class="small-input" type="text" name="system.costs.charges.subtract" value="{{system.costs.charges.subtract}}" data-dtype="Number" placeholder="-" title="{{localize "dc20rpg.item.sheet.usage.subtractCharges"}}">
      <p class="margin-right-3 margin-left-3">Max</p>
      <input class="small-input" type="text" name="system.costs.charges.maxChargesFormula" value="{{system.costs.charges.maxChargesFormula}}" placeholder="-" title="{{localize "dc20rpg.item.sheet.usage.maxCharges"}}">
      <p class="margin-right-3 margin-left-3">per</p>
      <select name="system.costs.charges.reset">
        {{selectOptions @root.config.DROPDOWN_DATA.chargesResets selected=system.costs.charges.reset blank=""}}
      </select>
    </div>
  </div>
  {{#if system.costs.charges.overriden}}
  <div class="row margin-top-3">
    <span>{{localize "dc20rpg.item.sheet.usage.customFormula"}}</span>
    <input class="formula" type="text" name="system.costs.charges.rechargeFormula" value="{{system.costs.charges.rechargeFormula}}">
  </div>
  {{/if}}
  <div class="row margin-top-3" title="{{localize "dc20rpg.item.sheet.usage.rechargeDiceTitle"}}">
    <span>{{localize "dc20rpg.item.sheet.usage.rechargeDice"}}</span>
    <div class="right-part-row">
      <input type="text" name="system.costs.charges.rechargeDice" value="{{system.costs.charges.rechargeDice}}">
      <span class="separator">{{localize "dc20rpg.item.sheet.usage.rechargeAt"}}</span>
      <input type="text" name="system.costs.charges.requiredTotalMinimum" value="{{system.costs.charges.requiredTotalMinimum}}" data-dtype="Number">
    </div>
  </div>

  {{!-- Other Items --}}
  <div class="row margin-top-10">
    <div class="left-part-row">
      <span>{{localize "dc20rpg.item.sheet.usage.otherItem"}}</span>
      <div>
        <a class="activable fa-solid {{#if system.costs.otherItem.consumeCharge}}fa-bolt{{else}}fa-boxes-stacked{{/if}} fa-lg" data-path="system.costs.otherItem.consumeCharge" 
            title={{#if system.costs.otherItem.consumeCharge}}"{{localize "dc20rpg.item.sheet.usage.consumeCharge"}}"{{else}}"{{localize "dc20rpg.item.sheet.usage.consumeQuantity"}}"{{/if}}></a>
      </div>
    </div>

    <div class="right-part-row">
      <select class="long-select margin-right-3 select-other-item cost-selector" data-path="system.costs.otherItem.itemId" data-selector="cost-selector">
        {{#if system.costs.otherItem.consumeCharge}} 
        {{selectOptions itemsWithChargesIds selected=system.costs.otherItem.itemId blank=""}}
        {{else}}
        {{selectOptions consumableItemsIds selected=system.costs.otherItem.itemId blank=""}}
        {{/if}}
      </select>
      <input class="small-input" type="text" name="system.costs.otherItem.amountConsumed" value="{{system.costs.otherItem.amountConsumed}}" data-dtype="Number" placeholder="-" title="{{localize "dc20rpg.item.sheet.usage.consumedAmount"}}">
    </div>
    
  </div>
</div>