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

  <nav class="tabs" data-group="primary">
    <a class="item {{#if (eq activeTab "npc")}}active{{/if}}" data-tab="npc">
      <i class="fas fa-user"></i> PNJ rapide
    </a>
    <a class="item {{#if (eq activeTab "encounter")}}active{{/if}}" data-tab="encounter">
      <i class="fas fa-random"></i> Rencontre
    </a>
    <a class="item {{#if (eq activeTab "mission")}}active{{/if}}" data-tab="mission">
      <i class="fas fa-briefcase"></i> Client & mission
    </a>
    <a class="item {{#if (eq activeTab "traveller")}}active{{/if}}" data-tab="traveller">
      <i class="fas fa-user-astronaut"></i> PNJ Détaillé
    </a>
    <a class="item {{#if (eq activeTab "ally-enemy")}}active{{/if}}" data-tab="ally-enemy">
      <i class="fas fa-handshake"></i> Alliés & Ennemis
    </a>
  </nav>

  <section class="tab-content">
    <div class="tab {{#if (eq activeTab "npc")}}active{{/if}}" data-tab="npc">
      <h3><i class="fas fa-user"></i> Générateur de PNJ rapide</h3>
      <p class="npc-intro">Génère un rôle, une particularité et un niveau d’expérience jouable en quelques secondes.</p>

      <fieldset>
        <legend>Cadre du PNJ</legend>
        <div class="form-group-row">
          <div class="form-group">
            <label for="npc-relation">Relation aux Voyageurs</label>
            <select id="npc-relation" name="npc.relation">
              {{#each relations}}
              <option value="{{key}}" {{#if (eq ../npc.relation key)}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
          </div>
          <div class="form-group">
            <label for="npc-experience-bias">Type d’expérience</label>
            <select id="npc-experience-bias" name="npc.experienceBias">
              <option value="random" {{#if (eq npc.experienceBias "random")}}selected{{/if}}>Aléatoire</option>
              <option value="noncombatant" {{#if (eq npc.experienceBias "noncombatant")}}selected{{/if}}>Non-combattant</option>
              <option value="combatant" {{#if (eq npc.experienceBias "combatant")}}selected{{/if}}>Combattant</option>
            </select>
          </div>
        </div>
      </fieldset>

      <fieldset>
        <legend>Création de fiche</legend>
        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" name="npc.createActor" {{#if npc.createActor}}checked{{/if}}>
            Créer aussi une fiche PNJ dans les Acteurs
          </label>
        </div>
        <div class="form-group-row">
          <div class="form-group">
            <label for="npc-actor-name">Nom de la fiche <span class="hint">(facultatif)</span></label>
            <input id="npc-actor-name" name="npc.actorName" type="text" value="{{npc.actorName}}" placeholder="PNJ — Médecin">
          </div>
        </div>
        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" name="npc.openCreatedActor" {{#if npc.openCreatedActor}}checked{{/if}}>
            Ouvrir automatiquement la fiche créée
          </label>
        </div>
      </fieldset>

      <div class="form-footer">
        <button type="button" class="btn-calculate" data-action="generate-npc">
          <i class="fas fa-dice-d6"></i> Générer le PNJ
        </button>
      </div>
    </div>

    <div class="tab {{#if (eq activeTab "encounter")}}active{{/if}}" data-tab="encounter">
      <h3><i class="fas fa-random"></i> Rencontre aléatoire</h3>
      <p class="npc-intro">Utilise les tables d’astroport, de campagne ou d’environnement urbain.</p>

      <fieldset>
        <legend>Contexte</legend>
        <div class="form-group-row">
          <div class="form-group">
            <label for="encounter-context">Lieu de la rencontre</label>
            <select id="encounter-context" name="encounter.context">
              <option value="starport" {{#if (eq encounter.context "starport")}}selected{{/if}}>Astroport</option>
              <option value="rural" {{#if (eq encounter.context "rural")}}selected{{/if}}>Rural</option>
              <option value="urban" {{#if (eq encounter.context "urban")}}selected{{/if}}>Urbain</option>
            </select>
          </div>
        </div>
        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" name="encounter.includeFollowUp" {{#if encounter.includeFollowUp}}checked{{/if}}>
            Ajouter automatiquement les détails liés si la table appelle un client ou un PNJ
          </label>
        </div>
      </fieldset>

      <div class="form-footer">
        <button type="button" class="btn-calculate" data-action="generate-encounter">
          <i class="fas fa-dice-d6"></i> Générer la rencontre
        </button>
      </div>
    </div>

    <div class="tab {{#if (eq activeTab "mission")}}active{{/if}}" data-tab="mission">
      <h3><i class="fas fa-briefcase"></i> Client & mission</h3>
      <p class="npc-intro">Tire un client, une mission, une cible et une opposition pour lancer une intrigue.</p>

      <fieldset>
        <legend>Sortie générée</legend>
        <div class="npc-checklist">
          <div><i class="fas fa-check"></i> Client aléatoire (D66)</div>
          <div><i class="fas fa-check"></i> Mission aléatoire (D66)</div>
          <div><i class="fas fa-check"></i> Cible (D66)</div>
          <div><i class="fas fa-check"></i> Opposition / complication (D66)</div>
        </div>
      </fieldset>

      <div class="form-footer">
        <button type="button" class="btn-calculate" data-action="generate-mission">
          <i class="fas fa-dice-d6"></i> Générer le contrat
        </button>
      </div>
    </div>

    <div class="tab {{#if (eq activeTab "traveller")}}active{{/if}}" data-tab="traveller">
      <h3><i class="fas fa-user-astronaut"></i> Générateur de PNJ Traveller</h3>
      <p class="traveller-npc-intro">
        Génère un personnage non-joueur selon les règles du générateur Traveller,
        avec caractéristiques, compétences et rôle aléatoires ou personnalisés.
      </p>

      <fieldset>
        <legend>Identité du PNJ</legend>
        
        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" name="traveller.useRandomName" {{#if traveller.useRandomName}}checked{{/if}}>
            Utiliser un nom aléatoire
          </label>
        </div>
        
        <div class="form-group-row traveller-name-fields {{#if traveller.useRandomName}}hidden{{/if}}">
          <div class="form-group">
            <label for="traveller-firstName">Prénom</label>
            <input id="traveller-firstName" name="traveller.firstName" type="text" value="{{traveller.firstName}}" placeholder="John">
          </div>
          <div class="form-group">
            <label for="traveller-surname">Nom de famille</label>
            <input id="traveller-surname" name="traveller.surname" type="text" value="{{traveller.surname}}" placeholder="Smith">
          </div>
          <div class="form-group">
            <button type="button" class="btn-small" data-action="randomize-name" title="Générer un nom aléatoire">
              <i class="fas fa-dice-d6"></i>
            </button>
          </div>
        </div>

        <div class="form-group-row">
          <div class="form-group">
            <label for="traveller-gender">Genre</label>
            <select id="traveller-gender" name="traveller.gender">
              {{#each genders}}
              <option value="{{key}}" {{#if (eq ../traveller.gender key)}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
          </div>
          <div class="form-group">
            <label for="traveller-role">Rôle <span class="required">*</span></label>
            <select id="traveller-role" name="traveller.role" required>
              {{#each roles}}
              <option value="{{key}}" {{#if (eq ../traveller.role key)}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
          </div>
        </div>
      </fieldset>

      <fieldset>
        <legend>Caractéristiques et Expérience</legend>
        
        <div class="form-group-row">
          <div class="form-group">
            <label for="traveller-citizenCategory">Catégorie de citoyen</label>
            <select id="traveller-citizenCategory" name="traveller.citizenCategory">
              {{#each citizenCategories}}
              <option value="{{key}}" {{#if (eq ../traveller.citizenCategory key)}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
            <div class="hint">{{description}}</div>
          </div>
          <div class="form-group">
            <label for="traveller-experience">Niveau d'expérience</label>
            <select id="traveller-experience" name="traveller.experience">
              {{#each experienceLevels}}
              <option value="{{key}}" {{#if (eq ../traveller.experience key)}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
            <div class="hint">{{description}}</div>
          </div>
        </div>
      </fieldset>

      <fieldset>
        <legend>Création de fiche d'acteur</legend>
        
        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" name="traveller.createActor" {{#if traveller.createActor}}checked{{/if}}>
            Créer une fiche PNJ dans les Acteurs
          </label>
        </div>
        
        <div class="form-group-row">
          <div class="form-group">
            <label for="traveller-actorName">Nom de la fiche <span class="hint">(facultatif)</span></label>
            <input id="traveller-actorName" name="traveller.actorName" type="text" value="{{traveller.actorName}}" placeholder="PNJ — Pilote">
          </div>
        </div>
        
        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" name="traveller.openCreatedActor" {{#if traveller.openCreatedActor}}checked{{/if}}>
            Ouvrir automatiquement la fiche créée
          </label>
        </div>
      </fieldset>

      <div class="form-footer">
        <button type="button" class="btn-calculate" data-action="generate-traveller-npc">
          <i class="fas fa-dice-d6"></i> Générer le PNJ Traveller
        </button>
      </div>
    </div>

    <div class="tab {{#if (eq activeTab "ally-enemy")}}active{{/if}}" data-tab="ally-enemy">
      <h3><i class="fas fa-handshake"></i> Alliés, Contacts, Rivaux et Ennemis</h3>
      <p class="npc-intro">Génère une relation avec Affinité, Inimitié, Pouvoir et Influence selon les règles du Livre de l'Équipage.</p>

      <fieldset>
        <legend>Type de relation</legend>
        <div class="form-group-row">
          <div class="form-group">
            <label for="ae-relation">Relation de base</label>
            <select id="ae-relation" name="ae.relation">
              {{#each relations}}
              <option value="{{key}}" {{#if (eq ../ae.relation key)}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
          </div>
        </div>
        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" name="ae.includeSpecial" {{#if ae.includeSpecial}}checked{{/if}}>
            Inclure les caractéristiques spéciales (jet 2D, 8+)
          </label>
        </div>
      </fieldset>

      <fieldset>
        <legend>Création de fiche d'acteur</legend>

        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" name="ae.createActor" {{#if ae.createActor}}checked{{/if}}>
            Créer une fiche PNJ dans les Acteurs
          </label>
        </div>

        <div class="form-group-row">
          <div class="form-group">
            <label for="ae-actorName">Nom de la fiche <span class="hint">(facultatif)</span></label>
            <input id="ae-actorName" name="ae.actorName" type="text" value="{{ae.actorName}}" placeholder="PNJ — Rival">
          </div>
        </div>

        <div class="form-group checkbox-group">
          <label>
            <input type="checkbox" name="ae.openCreatedActor" {{#if ae.openCreatedActor}}checked{{/if}}>
            Ouvrir automatiquement la fiche créée
          </label>
        </div>
      </fieldset>

      <div class="form-footer">
        <button type="button" class="btn-calculate" data-action="generate-ally-enemy">
          <i class="fas fa-dice-d6"></i> Générer la relation
        </button>
      </div>
    </div>
  </section>

</form>
