<form class="myriad-system actor-sheet theme-{{sheetTheme}}" autocomplete="off">
  <header class="sheet-header">
    <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" />
    <div class="header-details">
      <h1 class="actor-name"><input name="name" type="text" value="{{actor.name}}" /></h1>
      <div class="header-resources">
        <div class="resource-group">
          <label title="{{healthResourceTooltip}}">{{localize "MYRIADES.Resources.health"}}</label>
          <div class="resource-bar">
            <input type="number" name="system.resources.health.value" value="{{system.resources.health.value}}" min="0" title="{{healthResourceTooltip}}" />
            <span class="sep">/</span>
            <span class="resource-max" title="{{healthFormulaHelper}}">{{actor.system.resources.health.max}}</span>
          </div>
        </div>
        <div class="resource-group">
          <label title="{{magicResourceTooltip}}">{{localize "MYRIADES.Resources.magic"}}</label>
          <div class="resource-bar">
            <input type="number" name="system.resources.magic.value" value="{{system.resources.magic.value}}" min="0" title="{{magicResourceTooltip}}" />
            <span class="sep">/</span>
            <span class="resource-max" title="{{magicFormulaHelper}}">{{actor.system.resources.magic.max}}</span>
          </div>
        </div>
      </div>
      <details class="xp-panel{{#if progression.isOverspent}} is-overspent{{/if}}">
        <summary class="xp-summary">
          <span class="xp-label">{{localize "MYRIADES.Progression.currentBudget"}}</span>
          <strong class="xp-value">{{progression.currentBudget}} / {{progression.totalBudget}}</strong>
        </summary>
        <div class="xp-details">
          <div class="xp-meta-row">
            <span class="xp-meta">{{localize "MYRIADES.Progression.spentXp"}}: {{progression.spentXp}}</span>
            <span class="xp-meta">{{localize "MYRIADES.Progression.earnedXp"}}: {{progression.earnedXp}}</span>
          </div>
          <div class="xp-meta-row">
            <span class="xp-meta">{{localize "MYRIADES.Progression.characteristicsXp"}}: {{progression.breakdown.characteristics}}</span>
            <span class="xp-meta">{{localize "MYRIADES.Progression.skillsXp"}}: {{progression.breakdown.skills}}</span>
            <span class="xp-meta">{{localize "MYRIADES.Progression.pathsXp"}}: {{progression.breakdown.paths}}</span>
          </div>
          {{#if showXpControls}}
          <div class="xp-controls">
            <span class="xp-controls-label">{{localize "MYRIADES.Progression.awardXp"}}</span>
            {{#each xpAwardButtons as |button|}}
            <button type="button" class="award-xp" data-amount="{{button.amount}}">{{button.label}}</button>
            {{/each}}
          </div>
          {{/if}}
        </div>
      </details>
    </div>
    <button type="button" class="open-modifiers header-cog-button" title="{{settingsTitle}}">⚙</button>
  </header>

  {{!-- Tab navigation --}}
  <nav class="sheet-tabs tabs" data-group="primary">
    <a class="item active" data-tab="characteristics" data-group="primary">
      {{localize "MYRIADES.Tab.characteristics"}}
    </a>
    <a class="item" data-tab="skills" data-group="primary">
      {{localize "MYRIADES.Tab.skills"}}
    </a>
    <a class="item" data-tab="spells" data-group="primary">
      {{localize "MYRIADES.Tab.spells"}}
    </a>
    <a class="item" data-tab="paths" data-group="primary">
      {{localize "MYRIADES.Tab.paths"}}
    </a>
    <a class="item" data-tab="inventory" data-group="primary">
      {{localize "MYRIADES.Tab.inventory"}}
    </a>
    <a class="item" data-tab="effects" data-group="primary">
      {{localize "MYRIADES.Tab.effects"}}
    </a>
  </nav>

  <section class="sheet-body">

    {{!-- ===== TAB: Caractéristiques ===== --}}
    <div class="tab" data-tab="characteristics" data-group="primary">
      <div class="characteristics-grid">
        {{#each characteristicsList as |carac|}}
        <div class="characteristic-item">
          <label class="characteristic-label" title="{{carac.help}}">{{carac.label}}</label>
          <input class="characteristic-value" type="number"
            name="system.characteristics.{{carac.key}}"
            value="{{carac.value}}"
            min="0" max="200"
            title="{{carac.help}}" />
          <button type="button" class="roll-btn roll-characteristic" data-characteristic="{{carac.key}}"
            title="{{localize 'MYRIADES.Roll.rollCharacteristic'}}&#10;{{carac.help}}">
            ⚄
          </button>
        </div>
        {{/each}}
      </div>

    </div>

    {{!-- ===== TAB: Compétences ===== --}}
    <div class="tab" data-tab="skills" data-group="primary">
      <div class="items-header skills-header">
        <span></span>
        <span class="items-col-name">{{localize "MYRIADES.Sheet.name"}}</span>
        <span class="items-col-detail">{{localize "MYRIADES.Sheet.characteristic"}}</span>
        <span class="items-col-detail">{{localize "MYRIADES.Sheet.grade"}}</span>
        <span class="items-col-detail">{{localize "MYRIADES.Skill.rollModifier"}}</span>
        <span class="items-col-controls">
          <button type="button" class="item-create add-btn" data-type="skill"
            title="{{localize 'MYRIADES.Action.addSkill'}}">+</button>
        </span>
      </div>
      <ul class="items-list">
        {{#each skills as |skill|}}
        <li class="item-row skill-row" data-item-id="{{skill.id}}" draggable="true">
          <span class="item-img"><i class="{{skill.typeIcon}}" aria-hidden="true"></i></span>
          <span class="item-main">
            <span class="item-name item-open" role="button" tabindex="0" title="{{localize 'MYRIADES.Action.edit'}}">{{skill.name}}</span>
            {{#if skill.subtitle}}
            <span class="item-subtitle" title="{{skill.subtitle}}">{{skill.subtitle}}</span>
            {{/if}}
          </span>
          <span class="item-detail">{{skill.linkedCharLabel}}</span>
          <span class="item-detail grade-roman">{{skill.gradeLabel}}</span>
          <span class="item-detail">{{skill.system.rollModifier}}</span>
          <span class="item-controls">
            {{#if skill.isRollable}}
            <button type="button" class="roll-btn roll-skill" title="{{localize 'MYRIADES.Roll.rollSkill'}}">⚄</button>
            {{else}}
            <button type="button" class="roll-btn share-skill" title="{{localize 'MYRIADES.Action.sendToChat'}}">💬</button>
            {{/if}}
            <button type="button" class="item-edit" title="{{localize 'MYRIADES.Action.edit'}}">✎</button>
            <button type="button" class="item-delete" title="{{localize 'MYRIADES.Action.delete'}}">✕</button>
          </span>
        </li>
        {{else}}
        <li class="items-empty">{{localize "MYRIADES.Empty.skills"}}</li>
        {{/each}}
      </ul>
    </div>

    {{!-- ===== TAB: Sorts ===== --}}
    <div class="tab" data-tab="spells" data-group="primary">
      <div class="items-header spell-header">
        <span></span>
        <span class="items-col-name">{{localize "MYRIADES.Sheet.name"}}</span>
        <span class="items-col-detail">{{localize "MYRIADES.Sheet.grade"}}</span>
        <span class="items-col-detail">{{localize "MYRIADES.Spell.magicCost"}}</span>
        <span class="items-col-controls">
          <button type="button" class="item-create add-btn" data-type="spell"
            title="{{localize 'MYRIADES.Action.addSpell'}}">+</button>
        </span>
      </div>
      <ul class="items-list">
        {{#each spells as |spell|}}
        <li class="item-row spell-row" data-item-id="{{spell.id}}">
          <span class="item-img"><i class="{{spell.typeIcon}}" aria-hidden="true"></i></span>
          <span class="item-name item-open" role="button" tabindex="0" title="{{localize 'MYRIADES.Action.edit'}}">{{spell.name}}</span>
          <span class="item-detail grade-roman">{{gradeRoman spell.system.grade}}</span>
          <span class="item-detail">{{spell.system.magicCost}}</span>
          <span class="item-controls">
            <button type="button" class="roll-btn cast-spell" title="{{localize 'MYRIADES.Action.castSpell'}}">✦</button>
            <button type="button" class="roll-btn free-cast-spell" title="{{localize 'MYRIADES.Action.freeCastSpell'}}">⚡</button>
            <button type="button" class="item-edit" title="{{localize 'MYRIADES.Action.edit'}}">✎</button>
            <button type="button" class="item-delete" title="{{localize 'MYRIADES.Action.delete'}}">✕</button>
          </span>
        </li>
        {{else}}
        <li class="items-empty">{{localize "MYRIADES.Empty.spells"}}</li>
        {{/each}}
      </ul>
    </div>

    {{!-- ===== TAB: Voies ===== --}}
    <div class="tab" data-tab="paths" data-group="primary">
      <div class="items-header path-header">
        <span></span>
        <span class="items-col-name">{{localize "MYRIADES.Sheet.name"}}</span>
        <span class="items-col-detail">{{localize "MYRIADES.Path.skillsCount"}}</span>
        <span class="items-col-detail">{{localize "MYRIADES.Path.skills"}}</span>
        <span class="items-col-controls">
          <button type="button" class="item-create add-btn" data-type="path"
            title="{{localize 'MYRIADES.Action.addPath'}}">+</button>
        </span>
      </div>
      <ul class="items-list">
        {{#each paths as |path|}}
        <li class="item-row path-row" data-item-id="{{path.id}}" title="{{localize 'MYRIADES.Path.dropSkillHint'}}">
          <span class="item-img"><i class="{{path.typeIcon}}" aria-hidden="true"></i></span>
          <span class="item-name item-open" role="button" tabindex="0" title="{{localize 'MYRIADES.Action.edit'}}">{{path.name}}</span>
          <span class="item-detail">{{path.linkedSkillsCount}}</span>
          <span class="item-detail" title="{{path.linkedSkillsLabel}}">{{path.linkedSkillsLabel}}</span>
          <span class="item-controls">
            <span class="item-cost" title="{{localize 'MYRIADES.Progression.pathXpCostHint'}}">{{path.xpCost}} XP</span>
            <button type="button" class="item-edit" title="{{localize 'MYRIADES.Action.edit'}}">✎</button>
            <button type="button" class="item-delete" title="{{localize 'MYRIADES.Action.delete'}}">✕</button>
          </span>
        </li>
        {{else}}
        <li class="items-empty">{{localize "MYRIADES.Empty.paths"}}</li>
        {{/each}}
      </ul>
    </div>

    {{!-- ===== TAB: Inventaire ===== --}}
    <div class="tab" data-tab="inventory" data-group="primary">
      <div class="inventory-summary" title="{{inventoryTooltip}}">
        {{localize "MYRIADES.Inventory.capacity"}} : {{inventorySlotsUsed}} / {{inventorySlotsMax}}
      </div>
      <div class="items-header inventory-header">
        <span></span>
        <span class="items-col-name">{{localize "MYRIADES.Sheet.name"}}</span>
        <span class="items-col-detail">{{localize "MYRIADES.Equipment.quantity"}}</span>
        <span class="items-col-detail">{{localize "MYRIADES.Equipment.slots"}}</span>
        <span class="items-col-controls">
          <button type="button" class="item-create add-btn" data-type="equipment"
            title="{{localize 'MYRIADES.Action.addEquipment'}}">+</button>
        </span>
      </div>
      <ul class="items-list">
        {{#each equipment as |equip|}}
        <li class="item-row inventory-row" data-item-id="{{equip.id}}">
          <span class="item-img"><i class="{{equip.typeIcon}}" aria-hidden="true"></i></span>
          <span class="item-name item-open" role="button" tabindex="0" title="{{localize 'MYRIADES.Action.edit'}}">{{equip.name}}</span>
          <span class="item-detail">{{equip.system.quantity}}</span>
          <span class="item-detail">{{equip.system.slots}}</span>
          <span class="item-controls">
            <button type="button" class="item-edit" title="{{localize 'MYRIADES.Action.edit'}}">✎</button>
            <button type="button" class="item-delete" title="{{localize 'MYRIADES.Action.delete'}}">✕</button>
          </span>
        </li>
        {{else}}
        <li class="items-empty">{{localize "MYRIADES.Empty.inventory"}}</li>
        {{/each}}
      </ul>
    </div>

    {{!-- ===== TAB: Effets ===== --}}
    <div class="tab" data-tab="effects" data-group="primary">
      <div class="items-header effects-header">
        <span></span>
        <span class="items-col-name">{{localize "MYRIADES.Sheet.name"}}</span>
        <span class="items-col-detail">{{localize "MYRIADES.Effect.modifiers"}}</span>
        <span class="items-col-controls">
          <button type="button" class="item-create add-btn" data-type="effect"
            title="{{localize 'MYRIADES.Action.addEffect'}}">+</button>
        </span>
      </div>
      <ul class="items-list">
        {{#each effects as |effect|}}
        <li class="item-row effect-row{{#unless effect.system.enabled}} is-disabled{{/unless}}" data-item-id="{{effect.id}}">
          <span class="item-img"><i class="{{effect.typeIcon}}" aria-hidden="true"></i></span>
          <span class="item-name item-open" role="button" tabindex="0" title="{{localize 'MYRIADES.Action.edit'}}">{{effect.name}}</span>
          <span class="item-detail effect-mod-count">{{effect.modifierCount}}</span>
          <span class="item-controls">
            <button type="button" class="item-toggle-enabled{{#if effect.system.enabled}} is-enabled{{/if}}" title="{{#if effect.system.enabled}}{{localize 'MYRIADES.Action.disable'}}{{else}}{{localize 'MYRIADES.Action.enable'}}{{/if}}">{{#if effect.system.enabled}}●{{else}}○{{/if}}</button>
            <button type="button" class="item-edit" title="{{localize 'MYRIADES.Action.edit'}}">✎</button>
            <button type="button" class="item-delete" title="{{localize 'MYRIADES.Action.delete'}}">✕</button>
          </span>
        </li>
        {{else}}
        <li class="items-empty">{{localize "MYRIADES.Empty.effects"}}</li>
        {{/each}}
      </ul>
    </div>

  </section>

  <div class="modifiers-modal hidden">
    <div class="modifiers-dialog">
      <h4>{{settingsTitle}}</h4>
      <div class="modifiers-fields">
        <label class="modifiers-section-title">{{localize "MYRIADES.Secondary.title"}}</label>

        <label>{{localize "MYRIADES.Secondary.healthMax"}}</label>
        <input type="number" name="mod-health" value="{{secondaryModifiers.health}}" step="1" />

        <label>{{localize "MYRIADES.Secondary.magicMax"}}</label>
        <input type="number" name="mod-magic" value="{{secondaryModifiers.magic}}" step="1" />

        <label>{{localize "MYRIADES.Secondary.inventoryCapacity"}}</label>
        <input type="number" name="mod-inventory" value="{{secondaryModifiers.inventory}}" step="1" />

        <label class="modifiers-section-title">{{localize "MYRIADES.Progression.title"}}</label>

        <label>{{localize "MYRIADES.Progression.creationBudget"}}</label>
        <input type="number" name="progression-creation-budget" value="{{progression.creationBudget}}" step="1" />

        <label>{{localize "MYRIADES.Progression.manualSpentAdjustment"}}</label>
        <input type="number" name="progression-manual-spent" value="{{progression.manualSpentAdjustment}}" step="1" />

        <label>{{localize "MYRIADES.Progression.domainlessBonusXp"}}</label>
        <input type="number" name="progression-domainless-bonus" value="{{progression.domainlessBonusXp}}" min="0" step="1" />

        <label>{{localize "MYRIADES.Progression.domainless"}}</label>
        <input type="checkbox" name="option-domainless" {{checked progression.domainless}} />
      </div>
      <div class="modifiers-actions">
        <button type="button" class="modifiers-cancel">{{localize "MYRIADES.Action.cancel"}}</button>
        <button type="button" class="modifiers-save">{{localize "MYRIADES.Action.save"}}</button>
      </div>
    </div>
  </div>
</form>
