<form class="mgt2-commerce-form">

  {{!-- Onglets de navigation --}}
  <nav class="tabs" data-group="primary">
    <a class="item {{#if (eq activeTab "passengers")}}active{{/if}}" data-tab="passengers">
      <i class="fas fa-users"></i> Passagers
    </a>
    <a class="item {{#if (eq activeTab "cargo")}}active{{/if}}" data-tab="cargo">
      <i class="fas fa-boxes"></i> Cargaison
    </a>
    <a class="item {{#if (eq activeTab "trade")}}active{{/if}}" data-tab="trade">
      <i class="fas fa-balance-scale"></i> Commerce spéculatif
    </a>
  </nav>

  <section class="tab-content">

    {{!-- ══════════════════════════════════════════ --}}
    {{!-- Onglet 1 : Passagers                       --}}
    {{!-- ══════════════════════════════════════════ --}}
    <div class="tab {{#if (eq activeTab "passengers")}}active{{/if}}" data-tab="passengers">
      <h3><i class="fas fa-users"></i> Transport de passagers</h3>

      <div class="worlds-row">

        {{!-- Bloc Départ --}}
        <div class="world-block">
          <div class="world-block-title"><i class="fas fa-rocket"></i> Monde de départ</div>
          <div class="world-search-widget" data-uwp-target="pax.uwpDep" data-zone-target="pax.zoneDep" data-parsecs-target="pax.parsecs" data-role="dep">
            <div class="world-search-row">
              <input type="text" class="world-search-input" placeholder="Rechercher le monde…" autocomplete="off">
              <button type="button" class="btn-world-search" title="Rechercher sur Traveller Map">
                <i class="fas fa-globe"></i> Chercher
              </button>
            </div>
            <ul class="world-search-results"></ul>
          </div>
          <div class="uwp-zone-row">
            <div class="form-group uwp-field">
              <label for="pax-uwp-dep">UWP <span class="hint">(ex. A788899-C)</span></label>
              <input id="pax-uwp-dep" name="pax.uwpDep" type="text" placeholder="A788899-C" value="{{pax.uwpDep}}">
            </div>
            <div class="form-group zone-field">
              <label for="pax-zone-dep">Zone</label>
              <select id="pax-zone-dep" name="pax.zoneDep">
                <option value="normal" {{#if (eq pax.zoneDep "normal")}}selected{{/if}}>Normale</option>
                <option value="amber"  {{#if (eq pax.zoneDep "amber")}}selected{{/if}}>Ambre</option>
                <option value="red"    {{#if (eq pax.zoneDep "red")}}selected{{/if}}>Rouge</option>
              </select>
            </div>
          </div>
        </div>

        {{!-- Séparateur parsecs --}}
        <div class="parsecs-separator">
          <i class="fas fa-arrow-right"></i>
          <div class="form-group">
            <label for="pax-parsecs">Parsecs</label>
            <input id="pax-parsecs" name="pax.parsecs" type="number" min="1" max="6" value="{{pax.parsecs}}">
          </div>
        </div>

        {{!-- Bloc Destination --}}
        <div class="world-block">
          <div class="world-block-title"><i class="fas fa-flag-checkered"></i> Monde de destination</div>
          <div class="world-search-widget" data-uwp-target="pax.uwpDest" data-zone-target="pax.zoneDest" data-parsecs-target="pax.parsecs" data-role="dest">
            <div class="world-search-row">
              <input type="text" class="world-search-input" placeholder="Rechercher le monde…" autocomplete="off">
              <button type="button" class="btn-world-search" title="Rechercher sur Traveller Map">
                <i class="fas fa-globe"></i> Chercher
              </button>
            </div>
            <ul class="world-search-results"></ul>
          </div>
          <div class="uwp-zone-row">
            <div class="form-group uwp-field">
              <label for="pax-uwp-dest">UWP</label>
              <input id="pax-uwp-dest" name="pax.uwpDest" type="text" placeholder="B456789-A" value="{{pax.uwpDest}}">
            </div>
            <div class="form-group zone-field">
              <label for="pax-zone-dest">Zone</label>
              <select id="pax-zone-dest" name="pax.zoneDest">
                <option value="normal" {{#if (eq pax.zoneDest "normal")}}selected{{/if}}>Normale</option>
                <option value="amber"  {{#if (eq pax.zoneDest "amber")}}selected{{/if}}>Ambre</option>
                <option value="red"    {{#if (eq pax.zoneDest "red")}}selected{{/if}}>Rouge</option>
              </select>
            </div>
          </div>
        </div>

      </div>{{!-- /.worlds-row --}}

      <fieldset>
        <legend>Modificateurs des Voyageurs</legend>
        <div class="actor-skill-helper">
          {{#if activeActor}}
            <p class="actor-skill-summary">
              <i class="fas fa-user"></i>
              <strong>{{activeActor.name}}</strong> — {{activeActor.sourceLabel}}
              <span class="actor-skill-pill">{{activeActor.carouse.label}} {{activeActor.carouse.value}}</span>
              <span class="actor-skill-pill">{{activeActor.broker.label}} {{activeActor.broker.value}}</span>
              <span class="actor-skill-pill">{{activeActor.streetwise.label}} {{activeActor.streetwise.value}}</span>
              <span class="actor-skill-pill">{{activeActor.steward.label}} {{activeActor.steward.value}}</span>
            </p>
            <div class="actor-skill-actions">
              <button type="button" class="btn-actor-skill" data-action="roll-pax-effect">
                <i class="fas fa-dice"></i> Tester la meilleure compétence
              </button>
              <button type="button" class="btn-actor-skill" data-action="load-pax-actor">
                <i class="fas fa-user-check"></i> Charger Intendant
              </button>
            </div>
          {{else}}
            <p class="actor-skill-empty">Sélectionnez un token ou assignez un personnage pour exploiter automatiquement les compétences mgt2e.</p>
          {{/if}}
        </div>
        <div class="form-group-row">
          <div class="form-group">
            <label for="pax-skill-effect">
              Effet du test <span class="hint">(Mondanités / Courtier / Sens de rue — Moy. 8+)</span>
            </label>
            {{modSelect "pax-skill-effect" "pax.skillEffect" pax.skillEffect -3 5}}
          </div>
          <div class="form-group">
            <label for="pax-steward">Niveau Intendant (chef de bord)</label>
            {{modSelect "pax-steward" "pax.stewardLevel" pax.stewardLevel 0 5}}
          </div>
        </div>
      </fieldset>

      <div class="form-footer">
        <button type="button" class="btn-calculate" data-action="calculate-passengers">
          <i class="fas fa-dice-d6"></i> Calculer les passagers
        </button>
      </div>
    </div>

    {{!-- ══════════════════════════════════════════ --}}
    {{!-- Onglet 2 : Cargaison                       --}}
    {{!-- ══════════════════════════════════════════ --}}
    <div class="tab {{#if (eq activeTab "cargo")}}active{{/if}}" data-tab="cargo">
      <h3><i class="fas fa-boxes"></i> Transport de cargaison</h3>

      <div class="worlds-row">

        <div class="world-block">
          <div class="world-block-title"><i class="fas fa-rocket"></i> Monde de départ</div>
          <div class="world-search-widget" data-uwp-target="cargo.uwpDep" data-zone-target="cargo.zoneDep" data-parsecs-target="cargo.parsecs" data-role="dep">
            <div class="world-search-row">
              <input type="text" class="world-search-input" placeholder="Rechercher le monde…" autocomplete="off">
              <button type="button" class="btn-world-search" title="Rechercher sur Traveller Map">
                <i class="fas fa-globe"></i> Chercher
              </button>
            </div>
            <ul class="world-search-results"></ul>
          </div>
          <div class="uwp-zone-row">
            <div class="form-group uwp-field">
              <label for="cargo-uwp-dep">UWP</label>
              <input id="cargo-uwp-dep" name="cargo.uwpDep" type="text" placeholder="A788899-C" value="{{cargo.uwpDep}}">
            </div>
            <div class="form-group zone-field">
              <label for="cargo-zone-dep">Zone</label>
              <select id="cargo-zone-dep" name="cargo.zoneDep">
                <option value="normal" {{#if (eq cargo.zoneDep "normal")}}selected{{/if}}>Normale</option>
                <option value="amber"  {{#if (eq cargo.zoneDep "amber")}}selected{{/if}}>Ambre</option>
                <option value="red"    {{#if (eq cargo.zoneDep "red")}}selected{{/if}}>Rouge</option>
              </select>
            </div>
          </div>
        </div>

        <div class="parsecs-separator">
          <i class="fas fa-arrow-right"></i>
          <div class="form-group">
            <label for="cargo-parsecs">Parsecs</label>
            <input id="cargo-parsecs" name="cargo.parsecs" type="number" min="1" max="6" value="{{cargo.parsecs}}">
          </div>
        </div>

        <div class="world-block">
          <div class="world-block-title"><i class="fas fa-flag-checkered"></i> Monde de destination</div>
          <div class="world-search-widget" data-uwp-target="cargo.uwpDest" data-zone-target="cargo.zoneDest" data-parsecs-target="cargo.parsecs" data-role="dest">
            <div class="world-search-row">
              <input type="text" class="world-search-input" placeholder="Rechercher le monde…" autocomplete="off">
              <button type="button" class="btn-world-search" title="Rechercher sur Traveller Map">
                <i class="fas fa-globe"></i> Chercher
              </button>
            </div>
            <ul class="world-search-results"></ul>
          </div>
          <div class="uwp-zone-row">
            <div class="form-group uwp-field">
              <label for="cargo-uwp-dest">UWP</label>
              <input id="cargo-uwp-dest" name="cargo.uwpDest" type="text" placeholder="B456789-A" value="{{cargo.uwpDest}}">
            </div>
            <div class="form-group zone-field">
              <label for="cargo-zone-dest">Zone</label>
              <select id="cargo-zone-dest" name="cargo.zoneDest">
                <option value="normal" {{#if (eq cargo.zoneDest "normal")}}selected{{/if}}>Normale</option>
                <option value="amber"  {{#if (eq cargo.zoneDest "amber")}}selected{{/if}}>Ambre</option>
                <option value="red"    {{#if (eq cargo.zoneDest "red")}}selected{{/if}}>Rouge</option>
              </select>
            </div>
          </div>
        </div>

      </div>{{!-- /.worlds-row --}}

      <fieldset>
        <legend>Modificateurs des Voyageurs</legend>
        <div class="actor-skill-helper">
          {{#if activeActor}}
            <p class="actor-skill-summary">
              <i class="fas fa-user"></i>
              <strong>{{activeActor.name}}</strong> — {{activeActor.sourceLabel}}
              <span class="actor-skill-pill">{{activeActor.broker.label}} {{activeActor.broker.value}}</span>
              <span class="actor-skill-pill">{{activeActor.streetwise.label}} {{activeActor.streetwise.value}}</span>
              <span class="actor-skill-pill">{{activeActor.soc.label}} {{activeActor.soc.dm}}</span>
            </p>
            <div class="actor-skill-actions">
              <button type="button" class="btn-actor-skill" data-action="roll-cargo-effect">
                <i class="fas fa-dice"></i> Tester Courtier / Sens de la rue
              </button>
              <button type="button" class="btn-actor-skill" data-action="load-cargo-actor">
                <i class="fas fa-user-check"></i> Charger DM SOC
              </button>
            </div>
          {{else}}
            <p class="actor-skill-empty">Sélectionnez un token ou assignez un personnage pour exploiter automatiquement les compétences mgt2e.</p>
          {{/if}}
        </div>
        <div class="form-group-row">
          <div class="form-group">
            <label for="cargo-skill-effect">
              Effet du test <span class="hint">(Courtier / Sens de rue — Moy. 8+)</span>
            </label>
            {{modSelect "cargo-skill-effect" "cargo.skillEffect" cargo.skillEffect -3 5}}
          </div>
        </div>
        <div class="form-group-row">
          <div class="form-group">
            <label for="cargo-navy-rank">Rang Marine</label>
            {{modSelect "cargo-navy-rank" "cargo.navyRank" cargo.navyRank 0 6}}
          </div>
          <div class="form-group">
            <label for="cargo-scout-rank">Rang Éclaireurs</label>
            {{modSelect "cargo-scout-rank" "cargo.scoutRank" cargo.scoutRank 0 6}}
          </div>
          <div class="form-group">
            <label for="cargo-soc-mod">MD SOC</label>
            {{modSelect "cargo-soc-mod" "cargo.socMod" cargo.socMod -3 3}}
          </div>
        </div>
        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" name="cargo.armed" {{#if cargo.armed}}checked{{/if}}>
            Vaisseau armé (−1)
          </label>
        </div>
      </fieldset>

      <div class="form-footer">
        <button type="button" class="btn-calculate" data-action="calculate-cargo">
          <i class="fas fa-dice-d6"></i> Calculer la cargaison
        </button>
      </div>
    </div>

    {{!-- ══════════════════════════════════════════ --}}
    {{!-- Onglet 3 : Commerce spéculatif             --}}
    {{!-- ══════════════════════════════════════════ --}}
    <div class="tab {{#if (eq activeTab "trade")}}active{{/if}}" data-tab="trade">
      <h3><i class="fas fa-balance-scale"></i> Commerce spéculatif</h3>

      {{#if defaultWorldName}}
      <div class="world-info-banner">
        <i class="fas fa-globe"></i>
        <strong>{{defaultWorldName}}</strong>
        {{#if defaultWorldLoc}}<span class="world-info-loc">{{defaultWorldLoc}}</span>{{/if}}
      </div>
      {{/if}}

      <div class="world-block world-block-full">
        <div class="world-block-title"><i class="fas fa-store"></i> Monde fournisseur</div>
        <div class="world-search-widget" data-uwp-target="trade.uwp" data-zone-target="trade.zone">
          <div class="world-search-row">
            <input type="text" class="world-search-input" placeholder="Rechercher le monde…" autocomplete="off">
            <button type="button" class="btn-world-search" title="Rechercher sur Traveller Map">
              <i class="fas fa-globe"></i> Chercher
            </button>
          </div>
          <ul class="world-search-results"></ul>
        </div>
        <div class="uwp-zone-row">
          <div class="form-group uwp-field">
            <label for="trade-uwp">UWP <span class="hint">(ex. A788899-C)</span></label>
            <input id="trade-uwp" name="trade.uwp" type="text" placeholder="A788899-C" value="{{trade.uwp}}">
          </div>
          <div class="form-group zone-field">
            <label for="trade-zone">Zone</label>
            <select id="trade-zone" name="trade.zone">
              <option value="normal" {{#if (eq trade.zone "normal")}}selected{{/if}}>Normale</option>
              <option value="amber"  {{#if (eq trade.zone "amber")}}selected{{/if}}>Ambre</option>
              <option value="red"    {{#if (eq trade.zone "red")}}selected{{/if}}>Rouge</option>
            </select>
          </div>
        </div>
      </div>

      <fieldset>
        <legend>Modificateurs des Voyageurs</legend>
        <div class="actor-skill-helper">
          {{#if activeActor}}
            <p class="actor-skill-summary">
              <i class="fas fa-user"></i>
              <strong>{{activeActor.name}}</strong> — {{activeActor.sourceLabel}}
              <span class="actor-skill-pill">{{activeActor.broker.label}} {{activeActor.broker.value}}</span>
            </p>
            <div class="actor-skill-actions">
              <button type="button" class="btn-actor-skill" data-action="load-trade-actor">
                <i class="fas fa-user-check"></i> Charger Courtier
              </button>
            </div>
          {{else}}
            <p class="actor-skill-empty">Sélectionnez un token ou assignez un personnage pour exploiter automatiquement les compétences mgt2e.</p>
          {{/if}}
        </div>
        <div class="form-group-row">
          <div class="form-group">
            <label for="trade-broker">Compétence Courtier</label>
            {{modSelect "trade-broker" "trade.brokerSkill" trade.brokerSkill 0 5}}
          </div>
          <div class="form-group">
            <label for="trade-attempts">Tentatives précédentes (ce mois)</label>
            {{modSelect "trade-attempts" "trade.previousAttempts" trade.previousAttempts 0 10}}
          </div>
        </div>
        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" name="trade.blackMarket" {{#if trade.blackMarket}}checked{{/if}}>
            Marché noir (marchandises illégales)
          </label>
        </div>
      </fieldset>

      <div class="form-footer">
        <button type="button" class="btn-calculate" data-action="find-goods">
          <i class="fas fa-search"></i> Trouver un fournisseur &amp; marchandises
        </button>
      </div>

      {{!-- Zone de résultats inline (remplie par JS) --}}
      <div class="trade-goods-result" style="display:none;">
        <h4>Marchandises disponibles</h4>
        <div class="trade-goods-list"></div>
        <div class="form-footer">
          <button type="button" class="btn-calculate" data-action="calculate-buy-prices">
            <i class="fas fa-tag"></i> Calculer les prix d'achat
          </button>
        </div>
      </div>
    </div>

  </section>
</form>
