{{!-- Adept Tab --}}
<div class="tab adept {{#if (eq activeSheetTab "adept")}}active{{/if}}" data-group="sheet" data-tab="adept">

  {{!-- Obsession / Magick Skill Banner --}}
  {{#if adeptSkill}}
  <section class="adept-obsession-banner">
    <div class="adept-obsession-label">{{localize "UA2E.Adept.ObsessionSkill"}}</div>
    <div class="adept-obsession-name">{{adeptSkill.name}}</div>
    <div class="adept-obsession-value">{{adeptSkill.value}}<span class="stat-pct">%</span></div>
  </section>
  {{else}}
  <p class="hint adept-hint">{{localize "UA2E.Adept.NoObsessionHint"}}</p>
  {{/if}}

  {{!-- Charges --}}
  <section class="adept-section">
    <h3 class="adept-section-title">{{localize "UA2E.Adept.Charges"}}</h3>
    <div class="charge-counters">
      <div class="charge-counter minor">
        <label class="charge-label minor">{{localize "UA2E.Charge.Minor"}}</label>
        <input type="number" name="system.adeptChargesMinor" value="{{adeptChargesMinor}}" min="0" class="charge-input" />
      </div>
      <div class="charge-counter significant">
        <label class="charge-label significant">{{localize "UA2E.Charge.Significant"}}</label>
        <input type="number" name="system.adeptChargesSignificant" value="{{adeptChargesSignificant}}" min="0" class="charge-input" />
      </div>
      <div class="charge-counter major">
        <label class="charge-label major">{{localize "UA2E.Charge.Major"}}</label>
        <input type="number" name="system.adeptChargesMajor" value="{{adeptChargesMajor}}" min="0" class="charge-input" />
      </div>
    </div>
    <div class="form-group charge-howto-group">
      <label>{{localize "UA2E.Adept.HowToCharge"}}</label>
      <textarea name="system.adeptChargesHowTo" rows="3"
                placeholder="{{localize "UA2E.Adept.HowToPlaceholder"}}">{{adeptChargesHowTo}}</textarea>
    </div>
  </section>

  {{!-- Taboo --}}
  <section class="adept-section">
    <h3 class="adept-section-title">{{localize "UA2E.Adept.Taboo"}}</h3>
    <div class="adept-taboo-row">
      <textarea name="system.adeptTaboo" class="adept-taboo-input" rows="2"
                placeholder="{{localize "UA2E.Adept.TabooPlaceholder"}}">{{adeptTaboo}}</textarea>
    </div>
  </section>

  {{!-- Spell List --}}
  <section class="adept-section">
    <div class="skills-controls">
      <h3 class="adept-section-title">{{localize "UA2E.Adept.Spells"}}</h3>
      <button type="button" data-action="createSpell" class="create-btn">
        <i class="fas fa-plus"></i> {{localize "UA2E.Spell.New"}}
      </button>
    </div>

    {{#if spells.length}}
    <table class="skill-table spell-table">
      <thead>
        <tr>
          <th>{{localize "UA2E.Spell.Name"}}</th>
          <th>{{localize "UA2E.Spell.Cost"}}</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {{#each spells as |spell|}}
        <tr data-item-id="{{spell.id}}" class="skill-row spell-row charge-{{spell.chargeType}}">
          <td class="skill-name-col">
            <span class="skill-name">{{spell.name}}</span>
          </td>
          <td class="spell-cost-col">
            <span class="charge-badge {{spell.chargeType}}">
              {{spell.chargeAmount}}x {{localize (concat "UA2E.Charge." (capitalize spell.chargeType))}}
            </span>
          </td>
          <td class="skill-controls-col">
            <button type="button" data-action="editSpell" data-tooltip="{{localize "UA2E.Common.Edit"}}"><i class="fas fa-edit"></i></button>
            <button type="button" data-action="deleteSpell" data-tooltip="{{localize "UA2E.Common.Delete"}}"><i class="fas fa-trash"></i></button>
          </td>
        </tr>
        {{/each}}
      </tbody>
    </table>
    {{else}}
    <p class="hint">{{localize "UA2E.Spell.Empty"}}</p>
    {{/if}}
  </section>

</div>