<div class="dnc-employes-dialog" role="region" aria-labelledby="employes-title">
  <header class="sheet-header">
    <h1 id="employes-title">{{localize "DNC.Dialog.EmployeesTitle"}}</h1>
  </header>

  <!-- ===== ONGLETS RACINE ===== -->
  <nav class="dnc-root-tabs" role="tablist" aria-label="{{localize 'DNC.Dialog.EmployeesTitle'}}">
    <button type="button"
            class="dnc-root-tab active"
            data-root-tab="employes"
            role="tab"
            aria-selected="true"
            aria-controls="root-panel-employes"
            id="root-tab-employes"
    >
      <i class="fa-solid fa-hard-hat" aria-hidden="true"></i> {{localize "DNC.Dialog.EmployeesTabEmployes"}}
    </button>
    <button type="button"
            class="dnc-root-tab"
            data-root-tab="clients"
            role="tab"
            aria-selected="false"
            aria-controls="root-panel-clients"
            id="root-tab-clients"
    >
      <i class="fa-solid fa-users" aria-hidden="true"></i> {{localize "DNC.Dialog.EmployeesTabClients"}}
    </button>
  </nav>

  <div class="dnc-root-panels">

    <!-- ===== ROOT PANEL : EMPLOYÉS ===== -->
    <div class="dnc-root-panel active"
         data-root-panel="employes"
         role="tabpanel"
         aria-labelledby="root-tab-employes"
         id="root-panel-employes"
    >
      {{#if pcs.length}}
        <!-- Sous-onglets par employé -->
        <nav class="dnc-pc-tabs" role="tablist" aria-label="{{localize 'DNC.Dialog.EmployeesTabEmployes'}}">
          {{#each pcs}}
            <button type="button"
                    class="dnc-pc-tab{{#if @first}} active{{/if}}"
                    data-pc-tab="{{this.actorId}}"
                    role="tab"
                    aria-selected="{{#if @first}}true{{else}}false{{/if}}"
                    aria-controls="pc-panel-{{this.actorId}}"
                    id="pc-tab-{{this.actorId}}"
            >
              {{this.name}}
            </button>
          {{/each}}
        </nav>

        <!-- Sous-panneaux par employé -->
        <div class="dnc-pc-panels">
          {{#each pcs}}
            <div class="dnc-pc-panel{{#if @first}} active{{/if}}"
                 data-pc-panel="{{this.actorId}}"
                 role="tabpanel"
                 aria-labelledby="pc-tab-{{this.actorId}}"
                 id="pc-panel-{{this.actorId}}"
            >
              <!-- SECTION : CARACTÉRISTIQUES -->
              <section class="dnc-compact-section dnc-compact-carac">
                <h3 class="dnc-compact-section-title">
                  <i class="fa-solid fa-chart-line" aria-hidden="true"></i>
                  {{localize "DNC.Dialog.EmployeesTabCharacteristics"}}
                  <button type="button" class="dnc-open-sheet-btn" data-open-sheet="pc" data-actor-id="{{this.actorId}}" title="Ouvrir la fiche">
                    <i class="fa-solid fa-external-link-alt"></i>
                  </button>
                </h3>
                <div class="dnc-compact-carac-grid">
                  <div class="dnc-carac-stat">
                    <span class="dnc-carac-label">{{localize "DNC.UI.Pv"}}</span>
                    <span class="dnc-carac-value{{#if (lt this.pvValue 3)}} warning{{/if}}">{{this.pvValue}}/{{this.pvMax}}</span>
                  </div>
                  <div class="dnc-carac-stat">
                    <span class="dnc-carac-label">{{localize "DNC.UI.Dv"}}</span>
                    <span class="dnc-carac-value">{{this.dv}}</span>
                  </div>
                  {{#each ../characteristicKeys}}
                    <div class="dnc-carac-stat">
                      <span class="dnc-carac-label">{{this.short}}</span>
                      <span class="dnc-carac-value">{{lookup .. this.key}}</span>
                    </div>
                  {{/each}}
                </div>
                {{#if this.concept}}
                  <p class="dnc-compact-concept">{{this.concept}}</p>
                {{/if}}
              </section>

              <!-- SECTION : COMBAT -->
              <section class="dnc-compact-section dnc-compact-combat">
                <h3 class="dnc-compact-section-title">
                  <i class="fa-solid fa-sword" aria-hidden="true"></i>
                  {{localize "DNC.Dialog.EmployeesTabCombat"}}
                </h3>
                <div class="dnc-compact-combat-stats">
                  <span class="dnc-combat-badge">⚔️ ×{{this.meleeAttacks}} {{localize "DNC.UI.MeleeAttacks"}}</span>
                  <span class="dnc-combat-badge">🏹 ×{{this.rangedAttacks}} {{localize "DNC.UI.RangedAttacks"}}</span>
                </div>

                {{#if this.weapons.length}}
                  <div class="dnc-compact-item-list">
                    <h4 class="dnc-compact-subhead"><i class="fa-solid fa-sword"></i> {{localize "DNC.UI.Weapons"}}</h4>
                    {{#each this.weapons}}
                      <div class="dnc-compact-item">
                        <span class="dnc-compact-item-name">{{this.name}}</span>
                        <span class="item-meta">{{this.categoryLabel}}</span>
                        <span class="item-meta">{{this.handsLabel}}</span>
                        <span class="dnc-compact-item-detail">{{localize "DNC.UI.Damage"}} {{this.damage}}</span>
                        {{#if this.ammunition}}<span class="dnc-compact-item-detail">{{localize "DNC.UI.Ammunition"}} {{this.ammunition}}</span>{{/if}}
                      </div>
                    {{/each}}
                  </div>
                {{/if}}

                {{#if this.armors.length}}
                  <div class="dnc-compact-item-list">
                    <h4 class="dnc-compact-subhead"><i class="fa-solid fa-shield-halved"></i> {{localize "DNC.UI.Armors"}}</h4>
                    {{#each this.armors}}
                      <div class="dnc-compact-item">
                        <span class="dnc-compact-item-name">{{this.name}}</span>
                        <span class="dnc-compact-item-detail">{{this.protectionDie}}</span>
                        {{#if this.remainingProtection}}<span class="dnc-compact-item-detail">ARM {{this.remainingProtection}}</span>{{/if}}
                      </div>
                    {{/each}}
                  </div>
                {{/if}}
              </section>

              <!-- SECTION : MAGIE -->
              <section class="dnc-compact-section dnc-compact-magie">
                <h3 class="dnc-compact-section-title">
                  <i class="fa-solid fa-book-sparkles" aria-hidden="true"></i>
                  {{localize "DNC.Dialog.EmployeesTabMagie"}}
                </h3>
                <div class="dnc-compact-magic-stats">
                  <div class="dnc-carac-stat">
                    <span class="dnc-carac-label">{{localize "DNC.UI.Rank"}}</span>
                    <span class="dnc-carac-value">{{this.magicRank}}</span>
                  </div>
                  <div class="dnc-carac-stat">
                    <span class="dnc-carac-label">{{localize "DNC.UI.Focus"}}</span>
                    <span class="dnc-carac-value">{{this.focusDisplay}}</span>
                  </div>
                  <div class="dnc-carac-stat">
                    <span class="dnc-carac-label">{{localize "DNC.UI.Chaos"}}</span>
                    <span class="dnc-carac-value">{{this.chaosDisplay}}</span>
                  </div>
                </div>

                {{#if this.spells.length}}
                  <div class="dnc-compact-item-list">
                    <h4 class="dnc-compact-subhead"><i class="fa-solid fa-book-sparkles"></i> Sortilèges</h4>
                    {{#each this.spells}}
                      <div class="dnc-compact-item">
                        <span class="dnc-compact-item-name">{{this.name}}</span>
                        {{#if this.usageLabel}}<span class="item-meta">{{this.usageLabel}}</span>{{/if}}
                      </div>
                    {{/each}}
                  </div>
                {{/if}}

                {{#if this.capacities.length}}
                  <div class="dnc-compact-item-list">
                    <h4 class="dnc-compact-subhead"><i class="fa-solid fa-brain"></i> Capacités</h4>
                    {{#each this.capacities}}
                      <div class="dnc-compact-item">
                        <span class="dnc-compact-item-name">{{this.name}}</span>
                        {{#if this.usageLabel}}<span class="item-meta">{{this.usageLabel}}</span>{{/if}}
                      </div>
                    {{/each}}
                  </div>
                {{/if}}
              </section>
            </div>
          {{/each}}
        </div>

      {{else}}
        <p class="empty-state">{{localize "DNC.Empty.NoEmployees"}}</p>
      {{/if}}
    </div>

    <!-- ===== ROOT PANEL : CLIENTS ===== -->
    <div class="dnc-root-panel"
         data-root-panel="clients"
         role="tabpanel"
         aria-labelledby="root-tab-clients"
         id="root-panel-clients"
    >
      {{#if clients.length}}
        <!-- Sous-onglets par client -->
        <nav class="dnc-pc-tabs dnc-client-tabs" role="tablist" aria-label="{{localize 'DNC.Dialog.EmployeesTabClients'}}">
          {{#each clients}}
            <button type="button"
                    class="dnc-pc-tab{{#if @first}} active{{/if}}"
                    data-client-tab="{{this.id}}"
                    role="tab"
                    aria-selected="{{#if @first}}true{{else}}false{{/if}}"
                    aria-controls="client-panel-{{this.id}}"
                    id="client-tab-{{this.id}}"
            >
              {{this.name}}
            </button>
          {{/each}}
        </nav>

        <!-- Sous-panneaux par client -->
        <div class="dnc-pc-panels">
          {{#each clients}}
            <div class="dnc-client-panel{{#if @first}} active{{/if}}"
                 data-client-panel="{{this.id}}"
                 role="tabpanel"
                 aria-labelledby="client-tab-{{this.id}}"
                 id="client-panel-{{this.id}}"
            >
              <!-- SECTION : IDENTITÉ + SANTÉ -->
              <section class="dnc-compact-section">
                <h3 class="dnc-compact-section-title">
                  <i class="fa-solid fa-id-card" aria-hidden="true"></i>
                  {{this.name}}
                  <button type="button" class="dnc-open-sheet-btn" data-open-sheet="client" data-token-uuid="{{this.tokenUuid}}" data-actor-id="{{this.id}}" title="Ouvrir la fiche">
                    <i class="fa-solid fa-external-link-alt"></i>
                  </button>
                </h3>
                <div class="dnc-compact-carac-grid">
                  {{#if this.species}}<div class="dnc-carac-stat"><span class="dnc-carac-label">Espèce</span><span class="dnc-carac-value">{{this.species}}</span></div>{{/if}}
                  {{#if this.category}}<div class="dnc-carac-stat"><span class="dnc-carac-label">Catégorie</span><span class="dnc-carac-value">{{this.category}}</span></div>{{/if}}
                  {{#if this.role}}<div class="dnc-carac-stat"><span class="dnc-carac-label">Rôle</span><span class="dnc-carac-value">{{this.role}}</span></div>{{/if}}
                  <div class="dnc-carac-stat">
                    <span class="dnc-carac-label">{{localize "DNC.UI.Pv"}}</span>
                    <span class="dnc-carac-value{{#if (lt this.pvValue 3)}} warning{{/if}}">{{this.pvValue}}/{{this.pvMax}}</span>
                  </div>
                  <div class="dnc-carac-stat">
                    <span class="dnc-carac-label">{{localize "DNC.UI.Dv"}}</span>
                    <span class="dnc-carac-value">{{this.dv}}</span>
                  </div>
                  {{#if this.armureDelta}}
                  <div class="dnc-carac-stat dnc-carac-rollable"
                       data-pnj-action="rollArmure"
                       data-token-uuid="{{this.tokenUuid}}"
                       data-actor-id="{{this.id}}"
                       title="Lancer armure Δ{{this.armureDelta}}"
                  >
                    <span class="dnc-carac-label">Armure <i class="fa-solid fa-dice" style="font-size:0.6rem"></i></span>
                    <span class="dnc-carac-value">Δ{{this.armureDelta}}</span>
                  </div>
                {{/if}}
                {{#if this.courageDelta}}
                  <div class="dnc-carac-stat dnc-carac-rollable"
                       data-pnj-action="rollCourage"
                       data-token-uuid="{{this.tokenUuid}}"
                       data-actor-id="{{this.id}}"
                       title="Lancer courage Δ{{this.courageDelta}}"
                  >
                    <span class="dnc-carac-label">Courage <i class="fa-solid fa-dice" style="font-size:0.6rem"></i></span>
                    <span class="dnc-carac-value">Δ{{this.courageDelta}}</span>
                  </div>
                {{/if}}
                </div>
                {{#if this.summary}}<p class="client-summary">{{this.summary}}</p>{{/if}}
              </section>

              <!-- SECTION : ATTAQUES -->
              {{#if this.attaques.length}}
                <section class="dnc-compact-section dnc-compact-combat">
                  <h3 class="dnc-compact-section-title">
                    <i class="fa-solid fa-sword" aria-hidden="true"></i>
                    {{localize "DNC.Dialog.EmployeesTabCombat"}}
                  </h3>
                  <div class="dnc-compact-item-list">
                    {{#each this.attaques}}
                      <div class="dnc-compact-item">
                        <span class="dnc-compact-item-name">{{this.nom}}</span>
                        <button type="button"
                                class="dnc-roll-btn"
                                data-pnj-action="rollAttaque"
                                data-attack-index="{{@index}}"
                                data-token-uuid="{{../tokenUuid}}"
                                data-actor-id="{{../id}}"
                        ><i class="fa-solid fa-dice"></i> {{this.degats}}</button>
                        {{#if this.notes}}<span class="dnc-compact-item-detail">{{this.notes}}</span>{{/if}}
                      </div>
                    {{/each}}
                  </div>
                  {{#if this.weapons.length}}
                    <div class="dnc-compact-item-list" style="margin-top:0.5rem">
                      <h4 class="dnc-compact-subhead"><i class="fa-solid fa-sword"></i> {{localize "DNC.UI.Weapons"}}</h4>
                      {{#each this.weapons}}
                        <div class="dnc-compact-item">
                          <span class="dnc-compact-item-name">{{this.name}}</span>
                          <span class="item-meta">{{this.categoryLabel}}</span>
                          <span class="dnc-compact-item-detail">{{this.damage}}</span>
                        </div>
                      {{/each}}
                    </div>
                  {{/if}}
                </section>
              {{else if this.weapons.length}}
                <section class="dnc-compact-section dnc-compact-combat">
                  <h3 class="dnc-compact-section-title">
                    <i class="fa-solid fa-sword" aria-hidden="true"></i>
                    {{localize "DNC.Dialog.EmployeesTabCombat"}}
                  </h3>
                  <div class="dnc-compact-item-list">
                    {{#each this.weapons}}
                      <div class="dnc-compact-item">
                        <span class="dnc-compact-item-name">{{this.name}}</span>
                        <span class="item-meta">{{this.categoryLabel}}</span>
                        <span class="dnc-compact-item-detail">{{this.damage}}</span>
                      </div>
                    {{/each}}
                  </div>
                </section>
              {{/if}}

              <!-- SECTION : MAGIE / CAPACITÉS -->
              {{#if this.hasMagie}}
                <section class="dnc-compact-section dnc-compact-magie">
                  <h3 class="dnc-compact-section-title">
                    <i class="fa-solid fa-book-sparkles" aria-hidden="true"></i>
                    {{localize "DNC.Dialog.EmployeesTabMagie"}}
                  </h3>
                  {{#if this.spells.length}}
                    <div class="dnc-compact-item-list">
                      <h4 class="dnc-compact-subhead"><i class="fa-solid fa-book-sparkles"></i> Sortilèges</h4>
                      {{#each this.spells}}
                        <div class="dnc-compact-item">
                          <span class="dnc-compact-item-name">{{this.name}}</span>
                          {{#if this.usageLabel}}<span class="item-meta">{{this.usageLabel}}</span>{{/if}}
                        </div>
                      {{/each}}
                    </div>
                  {{/if}}
                  {{#if this.capacities.length}}
                    <div class="dnc-compact-item-list">
                      <h4 class="dnc-compact-subhead"><i class="fa-solid fa-brain"></i> Capacités</h4>
                      {{#each this.capacities}}
                        <div class="dnc-compact-item">
                          <span class="dnc-compact-item-name">{{this.name}}</span>
                          {{#if this.usageLabel}}<span class="item-meta">{{this.usageLabel}}</span>{{/if}}
                        </div>
                      {{/each}}
                    </div>
                  {{/if}}
                  {{#if this.pouvoirsSpeciaux}}
                    <div class="client-description">{{{this.pouvoirsSpeciaux}}}</div>
                  {{/if}}
                </section>
              {{/if}}
            </div>
          {{/each}}
        </div>

      {{else}}
        <p class="empty-state">{{localize "DNC.Empty.NoClients"}}</p>
      {{/if}}
    </div>

  </div>
</div>
