<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>
    </div>
    <button type="button" class="open-modifiers header-cog-button" title="{{localize 'MYRIADES.Secondary.editModifiers'}}">⚙</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="inventory" data-group="primary">
      {{localize "MYRIADES.Tab.inventory"}}
    </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}}">
          <span class="item-img"><img src="{{skill.img}}" /></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">{{gradeRoman skill.system.grade}}</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: 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"><img src="{{equip.img}}" /></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>

  </section>

  <div class="modifiers-modal hidden">
    <div class="modifiers-dialog">
      <h4>{{localize "MYRIADES.Secondary.editModifiers"}}</h4>
      <div class="modifiers-fields">
        <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" />
      </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>
