<section data-tab="magic" data-group="{{tab.group}}" class="tab {{tab.cssClass}}">
  <fieldset>
    <legend>{{localize "OATHHAMMER.Label.ArcaneStress"}}</legend>
    <div class="stress-controls">
      <a class="stress-btn" data-action="adjustStress" data-delta="-1" title="−1">−</a>
      <span class="arcane-stress-display {{#if stressBlocked}}stress-at-limit{{/if}}">
        {{system.arcaneStress.value}} / {{system.arcaneStress.threshold}}
      </span>
      <a class="stress-btn" data-action="adjustStress" data-delta="1" title="+1">+</a>
      <a class="stress-btn stress-btn--clear" data-action="clearStress" title="{{localize 'OATHHAMMER.Action.ClearStress'}}">
        <i class="fa-solid fa-rotate-left"></i>
      </a>
      <span class="stress-bonus-label">{{localize "OATHHAMMER.Label.ThresholdBonus"}}</span>
      <input type="number" name="system.arcaneStress.thresholdBonus" value="{{system.arcaneStress.thresholdBonus}}" min="0" class="stress-bonus-input">
    </div>
  </fieldset>
  <fieldset>
    <legend>{{localize "OATHHAMMER.Label.Spells"}}
      {{#unless isPlayMode}}<a data-action="createSpell" class="create-btn"><i class="fa-solid fa-plus"></i></a>{{/unless}}
    </legend>
    {{#if spells.length}}
    <ul class="item-list item-list--spell">
      <li class="item-list-header">
        <span></span>
        <span class="col-name">{{localize "OATHHAMMER.Label.Name"}}</span>
        <span>DV</span>
        <span>{{localize "OATHHAMMER.Label.Tradition"}}</span>
        <span>{{localize "OATHHAMMER.Label.Range"}}</span>
        <span>{{localize "OATHHAMMER.Label.Duration"}}</span>
        <span>{{localize "OATHHAMMER.Label.SpellSave"}}</span>
        <span></span>
      </li>
      {{#each spells as |spell|}}
      <li class="item-entry" data-item-id="{{spell.id}}" data-item-uuid="{{spell.uuid}}">
        <img src="{{spell.img}}" class="item-img" />
        <span class="item-name" {{#if spell._descTooltip}}data-tooltip="{{spell._descTooltip}}"{{/if}}>{{spell.name}}</span>
        <span class="item-detail">{{spell.system.difficultyValue}}</span>
        <span class="item-type">{{localize spell.system.tradition}}</span>
        <span class="item-detail item-detail--small">{{#if spell.system.range}}{{spell.system.range}}{{else}}—{{/if}}</span>
        <span class="item-detail item-detail--small">{{#if spell.system.duration}}{{spell.system.duration}}{{else}}—{{/if}}</span>
        <span class="item-detail item-detail--small">{{#if spell.system.spellSave}}{{spell.system.spellSave}}{{else}}—{{/if}}</span>
        <div class="item-actions">
          <a data-action="castSpell" data-item-id="{{spell.id}}" title="{{localize 'OATHHAMMER.Action.CastSpell'}}"><i class="fa-solid fa-wand-sparkles spell-cast-icon"></i></a>
          <a data-action="edit" data-item-id="{{spell.id}}" data-item-uuid="{{spell.uuid}}"><i class="fa-solid fa-edit"></i></a>
          <a data-action="delete" data-item-id="{{spell.id}}" data-item-uuid="{{spell.uuid}}"><i class="fa-solid fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ul>
    {{else}}
    <p class="no-items">{{localize "OATHHAMMER.Label.NoSpells"}}</p>
    {{/if}}
  </fieldset>
  <fieldset>
    <legend>{{localize "OATHHAMMER.Label.Miracles"}}
      {{#unless isPlayMode}}<a data-action="createMiracle" class="create-btn"><i class="fa-solid fa-plus"></i></a>{{/unless}}
    </legend>
    {{#if system.miracleBlocked}}
    <div class="miracle-blocked-banner">
      <i class="fa-solid fa-ban"></i>
      <span>{{localize "OATHHAMMER.Label.MiracleBlocked"}}</span>
      <a data-action="resetMiracleBlocked" title="{{localize 'OATHHAMMER.Action.ResetMiracleBlocked'}}"><i class="fa-solid fa-sun"></i> {{localize "OATHHAMMER.Action.NewDay"}}</a>
    </div>
    {{/if}}
    {{#if miracles.length}}
    <ul class="item-list item-list--miracle {{#if system.miracleBlocked}}miracles-blocked{{/if}}">
      <li class="item-list-header">
        <span></span>
        <span class="col-name">{{localize "OATHHAMMER.Label.Name"}}</span>
        <span>{{localize "OATHHAMMER.Label.DivineTradition"}}</span>
        <span></span>
      </li>
      {{#each miracles as |miracle|}}
      <li class="item-entry" data-item-id="{{miracle.id}}" data-item-uuid="{{miracle.uuid}}">
        <img src="{{miracle.img}}" class="item-img" />
        <span class="item-name" {{#if miracle._descTooltip}}data-tooltip="{{miracle._descTooltip}}"{{/if}}>{{miracle.name}}</span>
        <span class="item-detail">{{miracle.system.divineTradition}}</span>
        <div class="item-actions">
          <a data-action="castMiracle" data-item-id="{{miracle.id}}" title="{{localize 'OATHHAMMER.Action.InvokeMiracle'}}"><i class="fa-solid fa-hands-praying miracle-cast-icon"></i></a>
          <a data-action="edit" data-item-id="{{miracle.id}}" data-item-uuid="{{miracle.uuid}}"><i class="fa-solid fa-edit"></i></a>
          <a data-action="delete" data-item-id="{{miracle.id}}" data-item-uuid="{{miracle.uuid}}"><i class="fa-solid fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ul>
    {{else}}
    <p class="no-items">{{localize "OATHHAMMER.Label.NoMiracles"}}</p>
    {{/if}}
  </fieldset>
</section>
