{{!-- Character Sheet Main Tab --}}
<section class="sheet-body tab-content main-tab">
  <div class="main-grid">
    {{!-- Left Column: Stats --}}
    <div class="stats-column">
      <h2 class="section-header">{{localize "VAGABOND.Stats"}}</h2>
      <div class="stats-grid">
        {{#each stats}}
        <div class="stat-block {{this.color}}">
          <label class="stat-label" for="stat-{{this.id}}" data-tooltip="{{localize this.label}}">{{this.abbr}}</label>
          <input type="number" class="stat-value" id="stat-{{this.id}}" name="{{this.path}}"
                 value="{{this.value}}" min="1" max="10"
                 aria-label="{{localize this.label}}" />
        </div>
        {{/each}}
      </div>
    </div>

    {{!-- Center Column: Saves & Skills --}}
    <div class="center-column">
      {{!-- Saves Section --}}
      <div class="saves-section">
        <h2 class="section-header">{{localize "VAGABOND.Saves"}}</h2>
        <div class="saves-list">
          {{!-- Reflex Save --}}
          <div class="save-row interactive-row" role="button" tabindex="0"
               data-action="rollSave" data-save="reflex"
               aria-label="{{localize saves.reflex.label}} {{localize 'VAGABOND.Save'}}: {{localize 'VAGABOND.Difficulty'}} {{saves.reflex.difficulty}}">
            <span class="save-label">{{localize saves.reflex.label}}</span>
            <span class="save-stats">({{saves.reflex.stats}})</span>
            <span class="save-difficulty">{{saves.reflex.difficulty}}</span>
            <i class="fa-solid fa-dice-d20 roll-icon" aria-hidden="true"></i>
          </div>
          {{!-- Dodge sub-row (indented under Reflex) --}}
          <div class="defense-row dodge-row interactive-row" role="button" tabindex="0"
               data-action="rollDodge"
               aria-label="{{localize 'VAGABOND.Dodge'}}: {{localize 'VAGABOND.Difficulty'}} {{saves.reflex.dodge.difficulty}}">
            <span class="defense-label">{{localize "VAGABOND.Dodge"}}</span>
            {{#if saves.reflex.dodge.hindered}}
            <span class="hinder-indicator" data-tooltip="{{localize saves.reflex.dodge.hinderSource}}">
              <i class="fa-solid fa-arrow-down"></i>
            </span>
            {{/if}}
            <span class="defense-difficulty">{{saves.reflex.dodge.difficulty}}</span>
            <i class="fa-solid fa-dice-d20 roll-icon" aria-hidden="true"></i>
          </div>

          {{!-- Endure Save --}}
          <div class="save-row interactive-row" role="button" tabindex="0"
               data-action="rollSave" data-save="endure"
               aria-label="{{localize saves.endure.label}} {{localize 'VAGABOND.Save'}}: {{localize 'VAGABOND.Difficulty'}} {{saves.endure.difficulty}}">
            <span class="save-label">{{localize saves.endure.label}}</span>
            <span class="save-stats">({{saves.endure.stats}})</span>
            <span class="save-difficulty">{{saves.endure.difficulty}}</span>
            <i class="fa-solid fa-dice-d20 roll-icon" aria-hidden="true"></i>
          </div>
          {{!-- Block sub-row (indented under Endure) --}}
          <div class="defense-row block-row interactive-row {{#unless saves.endure.block.hasShield}}no-shield{{/unless}}"
               role="button" tabindex="0"
               data-action="rollBlock"
               aria-label="{{localize 'VAGABOND.Block'}}: {{localize 'VAGABOND.Difficulty'}} {{saves.endure.block.difficulty}}">
            <span class="defense-label">{{localize "VAGABOND.Block"}}</span>
            <span class="defense-difficulty">{{saves.endure.block.difficulty}}</span>
            <i class="fa-solid fa-dice-d20 roll-icon" aria-hidden="true"></i>
          </div>

          {{!-- Will Save --}}
          <div class="save-row interactive-row" role="button" tabindex="0"
               data-action="rollSave" data-save="will"
               aria-label="{{localize saves.will.label}} {{localize 'VAGABOND.Save'}}: {{localize 'VAGABOND.Difficulty'}} {{saves.will.difficulty}}">
            <span class="save-label">{{localize saves.will.label}}</span>
            <span class="save-stats">({{saves.will.stats}})</span>
            <span class="save-difficulty">{{saves.will.difficulty}}</span>
            <i class="fa-solid fa-dice-d20 roll-icon" aria-hidden="true"></i>
          </div>
        </div>
      </div>

      {{!-- Skills Section --}}
      <div class="skills-section">
        <h2 class="section-header">{{localize "VAGABOND.Skills"}}</h2>
        <div class="skills-grid">
          {{#each skills}}
          <div class="skill-row {{#if this.trained}}trained{{/if}}" data-skill="{{this.id}}">
            <button type="button" class="skill-trained-toggle"
                    data-action="toggleTrained" data-skill="{{this.id}}"
                    data-tooltip="{{localize 'VAGABOND.ToggleTrained'}}">
              {{#if this.trained}}
              <i class="fa-solid fa-check"></i>
              {{else}}
              <i class="fa-regular fa-circle"></i>
              {{/if}}
            </button>
            <span class="skill-name">{{localize this.label}}</span>
            <span class="skill-stat">({{this.statAbbr}})</span>
            <span class="skill-difficulty">{{this.difficulty}}</span>
            {{#if this.hasCritBonus}}
            <span class="skill-crit" data-tooltip="{{localize 'VAGABOND.CritThreshold'}}">
              <i class="fa-solid fa-star"></i>{{this.critThreshold}}
            </span>
            {{/if}}
            <button type="button" class="skill-roll-btn"
                    data-action="rollSkill" data-skill="{{this.id}}"
                    data-tooltip="{{localize 'VAGABOND.RollSkill'}}">
              <i class="fa-solid fa-dice-d20"></i>
            </button>
          </div>
          {{/each}}
        </div>
      </div>
    </div>

    {{!-- Right Column: Attacks & Weapons --}}
    <div class="attacks-column">
      {{!-- Attack Skills --}}
      <div class="attack-skills-section">
        <h2 class="section-header">{{localize "VAGABOND.Attacks"}}</h2>
        <div class="attack-skills-grid">
          {{#each attackSkills}}
          <div class="attack-skill-row {{#if this.trained}}trained{{/if}}" data-attack-skill="{{this.id}}">
            <button type="button" class="attack-trained-toggle"
                    data-action="toggleAttackTrained" data-attack="{{this.id}}"
                    data-tooltip="{{localize 'VAGABOND.ToggleTrained'}}">
              {{#if this.trained}}
              <i class="fa-solid fa-check"></i>
              {{else}}
              <i class="fa-regular fa-circle"></i>
              {{/if}}
            </button>
            <span class="attack-name">{{localize this.label}}</span>
            <span class="attack-stat">({{this.statAbbr}})</span>
            <span class="attack-difficulty">{{this.difficulty}}</span>
            {{#if this.hasCritBonus}}
            <span class="attack-crit">
              <i class="fa-solid fa-star" aria-hidden="true"></i>{{this.critThreshold}}
            </span>
            {{/if}}
            <button type="button" class="attack-roll-btn"
                    data-action="rollAttack" data-attack-skill="{{this.id}}"
                    data-tooltip="{{localize 'VAGABOND.RollAttack'}}">
              <i class="fa-solid fa-dice-d20"></i>
            </button>
          </div>
          {{/each}}
        </div>
      </div>

      {{!-- Equipped Weapons --}}
      <div class="equipped-weapons-section">
        <h3 class="subsection-header">{{localize "VAGABOND.EquippedWeapons"}}</h3>
        <ul class="weapon-list">
          {{#each items.weapons}}
          {{#if this.system.equipped}}
          <li class="weapon-item" data-item-id="{{this.id}}">
            <span class="weapon-name" data-action="itemEdit">{{this.name}}</span>
            <span class="weapon-damage">{{this.system.damage}}</span>
            <button type="button" class="weapon-roll" data-action="rollAttack"
                    data-weapon-id="{{this.id}}" data-tooltip="{{localize 'VAGABOND.RollAttack'}}">
              <i class="fa-solid fa-dice-d20"></i>
            </button>
          </li>
          {{/if}}
          {{/each}}
        </ul>
      </div>
    </div>
  </div>
</section>