<!doctype html>
<html lang="fr" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DATAFIX</title>
    <script>
      (function () {
        try {
          var t = localStorage.getItem("datafixTheme_v1");
          if (t === "light" || t === "dark") {
            document.documentElement.setAttribute("data-theme", t);
          } else if (t === "system") {
            var isDark = !!(
              window.matchMedia &&
              window.matchMedia("(prefers-color-scheme: dark)").matches
            );
            document.documentElement.setAttribute(
              "data-theme",
              isDark ? "dark" : "light",
            );
          } else {
            document.documentElement.setAttribute("data-theme", "light");
          }
        } catch (e) {}
      })();
      (function () {
        try {
          var raw = localStorage.getItem("datafixUiFontScale_v1");
          if (raw == null) return;
          var n = parseFloat(raw);
          if (isFinite(n) && n >= 0.75 && n <= 1.35) {
            document.documentElement.style.setProperty(
              "--ui-font-scale",
              String(n),
            );
          }
        } catch (e) {}
      })();
    </script>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='app.css') }}?v=90"
    />
  </head>
  <body>
    <header class="topbar">
      <div class="topbar__left">
        <div class="topbar__menu menu-dropdown" id="menuFile">
          <button
            type="button"
            class="btn btn--small btn--icon topbar__menu-toggle"
            id="menuFileToggle"
            aria-haspopup="menu"
            aria-expanded="false"
            aria-label="Menu principal"
            title="Menu principal"
          >
            ☰
          </button>
          <div
            class="menu-dropdown__panel"
            id="menuFilePanel"
            role="menu"
            aria-label="Menu principal"
          >
            <button
              type="button"
              id="menuFileOpenNew"
              class="menu-item"
              role="menuitem"
            >
              <span>Open New Folder</span>
              <span id="menuShortcutOpenFolder" class="menu-item__shortcut"
                >Ctrl+O</span
              >
            </button>
            <button
              type="button"
              id="menuFileCloseFolder"
              class="menu-item"
              role="menuitem"
            >
              <span>Close Folder</span>
              <span id="menuShortcutCloseFolder" class="menu-item__shortcut"
                >Ctrl+Q</span
              >
            </button>
            <button
              type="button"
              id="menuImporterOpen"
              class="menu-item"
              role="menuitem"
            >
              <span>Importer</span>
              <span id="menuShortcutImporter" class="menu-item__shortcut"
                >Ctrl+I</span
              >
            </button>
            <button
              type="button"
              id="menuSettingsOpen"
              class="menu-item"
              role="menuitem"
            >
              <span>Paramètres</span>
              <span id="menuShortcutSettings" class="menu-item__shortcut"
                >Ctrl+P</span
              >
            </button>
          </div>
        </div>
        <div
          class="topbar__history"
          role="toolbar"
          aria-label="Historique des modifications"
        >
          <button
            type="button"
            class="btn btn--small"
            id="btnUndo"
            title="Annuler (Ctrl+Z)"
            aria-label="Annuler"
            disabled
          >
            ↩
          </button>
          <button
            type="button"
            class="btn btn--small"
            id="btnRedo"
            title="Rétablir (Ctrl+Y / Ctrl+Shift+Z)"
            aria-label="Rétablir"
            disabled
          >
            ↪
          </button>
        </div>
        <label class="topbar__batch">
          Lot
          <select id="batchSelect" size="1"></select>
        </label>
        <div
          id="imagesPanelToggleHostToolbar"
          class="images-panel-toggle-host"
          hidden
        ></div>
        <span id="imageTitle" class="muted pane__toolbar-title" hidden></span>
      </div>
      <div class="topbar__middle">
        <div class="topbar__middle-actions">
          <div
            class="topbar-action-group"
            role="group"
            aria-label="Affichage image et surlignage"
          >
            <div class="bdm-view-toolbar" id="bdmViewToolbar" hidden>
              <label class="bdm-auto-zoom topbar-icon-toggle" aria-label="Auto zoom">
                <input type="checkbox" id="bdmAutoZoomToggle" />
                <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                  >&#x2922;</span
                >
              </label>
              <label
                class="topbar-toggle-check topbar-icon-toggle"
                title="Afficher/masquer les rectangles des actes détectés"
                aria-label="Afficher/masquer les rectangles des actes détectés"
              >
                <input type="checkbox" id="bdmActsToggle" />
                <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                  >&#x25A6;</span
                >
              </label>
            </div>
            <label
              class="topbar-toggle-check topbar-icon-toggle"
              title="Afficher ou masquer l'extrait flottant du champ actif."
              aria-label="Afficher ou masquer l'extrait flottant du champ actif"
            >
              <input type="checkbox" id="btnSnippetToggle" />
              <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                >&#x25A4;</span
              >
            </label>
            <label
              class="topbar-toggle-check topbar-icon-toggle rect-auto-zoom"
              title="Auto-zoom et centrage sur le rectangle au focus d'un champ orig. (Ctrl+Alt +/- pour zoomer, Ctrl+Alt ←/→ pour défiler)."
              aria-label="Auto-zoom sur le rectangle de surlignage"
            >
              <input type="checkbox" id="btnRectAutoZoom" checked />
              <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                >&#x2922;</span
              >
            </label>
            <label
              class="topbar-toggle-check topbar-icon-toggle"
              title="Quand activé, le rectangle reste 1 seconde puis disparaît progressivement."
              aria-label="Rectangle visible 1 seconde puis fondu"
            >
              <input type="checkbox" id="btnRectFlash" />
              <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                >&#x25AD;</span
              >
            </label>
            <button
              type="button"
              class="btn btn--small btn--toggle btn--icon topbar-action-group__btn"
              id="btnToggleNextImage"
              aria-pressed="false"
              aria-label="Voir l'image suivante"
              title="Voir l'image suivante"
            >
              &#x25B6;
            </button>
          </div>
          <div
            class="topbar-action-group"
            role="group"
            aria-label="Colonnes des tableaux"
          >
            <label
              class="topbar-toggle-check topbar-icon-toggle"
              title="Afficher la colonne conf séparée dans les tableaux (sinon affichée à côté de hwr)"
              aria-label="Afficher la colonne conf séparée dans les tableaux (sinon affichée à côté de hwr)"
            >
              <input type="checkbox" id="topbarOptShowConfColumn" />
              <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                >&#x25EB;</span
              >
            </label>
            <label
              class="topbar-toggle-check topbar-icon-toggle"
              title="Fusionner hwr dans la colonne orig. et afficher le % hwr s'il existe"
              aria-label="Fusionner hwr dans la colonne orig. et afficher le % hwr s'il existe"
            >
              <input type="checkbox" id="topbarOptMergeHwrOrigColumn" />
              <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                >&#x29C9;</span
              >
            </label>
            <label
              class="topbar-toggle-check topbar-icon-toggle"
              title="Afficher « hwr: ... » dans la colonne orig. fusionnée"
              aria-label="Afficher « hwr: ... » dans la colonne orig. fusionnée"
            >
              <input type="checkbox" id="topbarOptShowMergedHwrText" />
              <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                >&#x270E;</span
              >
            </label>
          </div>
          <div
            class="topbar-action-group"
            role="group"
            aria-label="Correction par dictionnaire"
          >
            <button
              type="button"
              id="btnApplyDictionaryCorrections"
              class="btn btn--small topbar-action-group__btn btn--autocorrect"
              title="Corriger automatiquement la casse et les accents des champs hwr peu fiables via le dictionnaire général"
              aria-label="Auto-Correct"
              disabled
            >
              Auto-Correct
            </button>
            <button
              type="button"
              id="btnAiPageFill"
              class="btn btn--small topbar-action-group__btn btn--ai-page-fill"
              title="Lire toute la page avec l'AI et remplir les champs visibles"
              aria-label="AI Page Fill"
              disabled
            >
              AI Page Fill
            </button>
          </div>
        </div>
      </div>
      <div class="topbar__right">
        <label class="topbar__doctype">
          <span>DocType:</span>
          <select id="docTypeSelect" aria-label="DocType"></select>
        </label>
      </div>
    </header>

    <section
      id="settingsPanel"
      class="settings-panel"
      aria-label="Paramètres"
      hidden
    >
      <div class="settings-panel__head">
        <h2>Paramètres</h2>
        <button
          type="button"
          id="btnSettingsClose"
          class="btn btn--small"
          aria-label="Fermer"
          data-settings-close="1"
        >
          Fermer
        </button>
      </div>
      <div class="settings-panel__content">
        <aside
          class="settings-tabs settings-tabs--side"
          role="tablist"
          aria-label="Onglets Paramètres"
        >
          <button
            type="button"
            class="settings-tab"
            data-settings-tab="projectKinds"
            role="tab"
            aria-selected="false"
          >
            Types de projet
          </button>
          <button
            type="button"
            class="settings-tab is-active"
            data-settings-tab="fields"
            role="tab"
            aria-selected="true"
          >
            Champs
          </button>
          <button
            type="button"
            class="settings-tab"
            data-settings-tab="ai"
            role="tab"
            aria-selected="false"
          >
            Modèles
          </button>
          <button
            type="button"
            class="settings-tab"
            data-settings-tab="shortcuts"
            role="tab"
            aria-selected="false"
          >
            Raccourcis
          </button>
          <button
            type="button"
            class="settings-tab"
            data-settings-tab="appearance"
            role="tab"
            aria-selected="false"
          >
            Apparence
          </button>
        </aside>
        <div class="settings-body">
          <section class="settings-page" data-settings-page="projectKinds">
            <div class="kinds-summary">
              <h3>Lots détectés</h3>
              <span id="detectedLotsCount" class="kinds-summary__count">0</span>
            </div>
            <div class="kinds-table-wrap">
              <table class="kinds-table">
                <thead>
                  <tr>
                    <th>Lot</th>
                    <th>Type</th>
                    <th>Sous-Projet</th>
                    <th>DocTypes</th>
                  </tr>
                </thead>
                <tbody id="projectKindsTableBody"></tbody>
              </table>
            </div>
            <div class="sub-projects-section">
              <div class="sub-projects-head">
                <h3>Sous-types de projet</h3>
              </div>
              <div
                id="subProjectEditorWrap"
                class="sub-project-form-wrap"
                hidden
              >
                <p id="subProjectEditorTitle" class="sub-project-editor-title">
                  Nouveau sous-type
                </p>
                <label class="sub-project-field">
                  <span>Nom</span>
                  <input
                    type="text"
                    id="subProjectEditorName"
                    class="input"
                    autocomplete="off"
                  />
                </label>
                <label class="sub-project-field">
                  <span>Langue</span>
                  <input
                    type="text"
                    id="subProjectEditorLanguage"
                    class="input"
                    autocomplete="off"
                    placeholder="Ex. Français, English, Arabic"
                  />
                </label>
                <fieldset class="sub-project-root-fieldset">
                  <legend>Type racine</legend>
                  <label class="sub-project-radio">
                    <input
                      type="radio"
                      name="subProjectRootKind"
                      value="Census"
                    />
                    Census
                  </label>
                  <label class="sub-project-radio">
                    <input
                      type="radio"
                      name="subProjectRootKind"
                      value="BDM"
                      checked
                    />
                    BDM
                  </label>
                </fieldset>
                <div class="sub-project-field">
                  <span>Importer le fichier CI</span>
                  <small class="muted">
                    Importez les DocTypes, les Champs et les Keying Instructions depuis le fichier CI (.xlsx) du lot.
                  </small>
                  <div class="ci-import-row">
                    <button
                      type="button"
                      id="btnCiImport"
                      class="btn btn--small"
                    >
                      Importer le fichier CI (.xlsx)
                    </button>
                    <input
                      type="file"
                      id="subProjectCiFile"
                      accept=".xlsx,.xls"
                      style="display: none"
                      aria-hidden="true"
                    />
                    <span
                      id="ciImportStatus"
                      class="ci-import-status"
                      aria-live="polite"
                    ></span>
                  </div>
                  <div
                    id="subProjectDocTypesPreview"
                    class="doctype-tags-wrap"
                    aria-label="DocTypes sélectionnés"
                  ></div>
                  <input type="hidden" id="subProjectEditorDocTypes" />
                </div>
                <div class="sub-project-editor-actions">
                  <button
                    type="button"
                    id="btnSubProjectSave"
                    class="btn btn--small btn--primary"
                  >
                    Enregistrer
                  </button>
                  <button
                    type="button"
                    id="btnSubProjectCancel"
                    class="btn btn--small"
                  >
                    Annuler
                  </button>
                </div>
              </div>
              <div class="kinds-table-wrap kinds-table-wrap--sub-projects">
                <table class="kinds-table">
                  <thead>
                    <tr>
                      <th>Nom</th>
                      <th>Langue</th>
                      <th>Type racine</th>
                      <th>DocTypes</th>
                    </tr>
                  </thead>
                  <tbody id="subProjectsTableBody"></tbody>
                </table>
              </div>
            </div>
          </section>
          <section class="settings-page is-active" data-settings-page="fields">
            <div class="fields-toolbar">
              <div
                class="fields-kind-tabs"
                role="tablist"
                aria-label="Onglets de type de projet des champs"
                id="fieldsKindTabsContainer"
              >
                <!-- Tabs generated dynamically from sub-projects -->
              </div>
              <div class="wrap-for-toolbar-search-and-actions">
                <div class="fields-toolbar__search">
                  <input
                    type="search"
                    id="fieldsSearchInput"
                    placeholder="Rechercher des champs..."
                    aria-label="Rechercher des champs"
                  />
                </div>
                <div class="fields-toolbar__actions">
                  <button
                    type="button"
                    id="btnSelectAllFields"
                    class="btn btn--small"
                  >
                    Sélectionner tout
                  </button>
                  <button
                    type="button"
                    id="btnSetFieldDefaults"
                    class="btn btn--small"
                  >
                    Définir comme défaut
                  </button>
                  <button
                    type="button"
                    id="btnResetFieldDefaults"
                    class="btn btn--small"
                  >
                    Réinitialiser par défaut
                  </button>
                  <button
                    type="button"
                    id="btnSaveFieldSelections"
                    class="btn btn--small btn--primary"
                    disabled
                  >
                    Enregistrer
                  </button>
                  <span
                    id="fieldsSaveFeedback"
                    class="fields-save-feedback"
                    aria-live="polite"
                  ></span>
                </div>
              </div>
            </div>
            <div class="fields-options">
              <label
                class="fields-option"
                for="optAutoIncrementIndividualNumber"
              >
                <input type="checkbox" id="optAutoIncrementIndividualNumber" />
                <span
                  >Incrémenter automatiquement « Individual Number » sur un
                  nouveau record</span
                >
              </label>
              <label class="fields-option" for="optAutoSkipValidatedRows">
                <input type="checkbox" id="optAutoSkipValidatedRows" />
                <span
                  >Sauter automatiquement les lignes validées pendant la
                  navigation orig.</span
                >
              </label>
              <label class="fields-option" for="optAutoSkipAtFields">
                <input type="checkbox" id="optAutoSkipAtFields" />
                <span
                  >Sauter automatiquement les champs « @ » (Nationalité, Birth
                  Place, Surname, Relationship) pendant la navigation
                  orig.</span
                >
              </label>
              <label class="fields-option" for="optDictAutocorrectOnLoad">
                <input type="checkbox" id="optDictAutocorrectOnLoad" />
                <span
                  >Appliquer la correction par dictionnaire au chargement de
                  l'image (champs hwr peu fiables uniquement).</span
                >
              </label>
              <label
                class="fields-option fields-option--inline"
                for="optSuggestRankingMode"
              >
                <select id="optSuggestRankingMode" class="input">
                  <option value="hybrid">
                    Hybride (fréquence puis récence)
                  </option>
                  <option value="frequency_only">Fréquence seulement</option>
                  <option value="recency_only">Récence seulement</option>
                </select>
                <span>Tri des suggestions</span>
              </label>
            </div>
            <div id="fieldsByKindContainer" class="fields-by-kind"></div>
          </section>
          <section class="settings-page" data-settings-page="ai">
            <div class="ai-settings-page">
              <div class="ai-activation-card">
                <div>
                  <h3>Activation Datafix</h3>
                  <p
                    id="gatewayActivationSettingsStatus"
                    class="ai-activation-card__status"
                    data-kind="neutral"
                    aria-live="polite"
                  >
                    Vérification de l'activation…
                  </p>
                  <p class="muted">
                    L'activation autorise uniquement l'accès révocable à la passerelle AI. Aucune clé OpenRouter n'est enregistrée sur ce PC.
                  </p>
                </div>
                <button
                  type="button"
                  id="btnOpenGatewayActivation"
                  class="btn btn--small btn--primary"
                >
                  Gérer l'activation
                </button>
              </div>
              <div class="ai-settings">
                <div class="ai-settings__controls">
                  <div class="ai-settings__provider">
                    <h3>AI Page Fill</h3>
                    <p class="muted">
                      Choisissez le modèle OpenRouter utilisé pour lire l'image complète et remplir les champs visibles.
                    </p>
                  </div>
                  <button
                    type="button"
                    id="btnRefreshPageFillModels"
                    class="btn btn--small"
                  >
                    Actualiser les modèles
                  </button>
                </div>
                <div class="ai-model-picker">
                  <div class="ai-model-picker__left">
                    <label class="ai-model-picker__label" for="pageFillModelSearch">
                      Modèle image vers texte
                    </label>
                    <input
                      type="search"
                      id="pageFillModelSearch"
                      class="input"
                      placeholder="Rechercher un modèle OpenRouter..."
                      autocomplete="off"
                    />
                    <select
                      id="pageFillModelSelect"
                      class="input ai-model-picker__select"
                      aria-label="Modèles OpenRouter image vers texte pour AI Page Fill"
                    ></select>
                    <label class="ai-model-picker__label" for="pageFillProviderSelect">
                      Fournisseur
                    </label>
                    <select
                      id="pageFillProviderSelect"
                      class="input"
                      aria-label="Fournisseur OpenRouter pour AI Page Fill"
                      disabled
                    ></select>
                    <span
                      id="pageFillProviderStatus"
                      class="fields-save-feedback"
                      aria-live="polite"
                    ></span>
                    <div class="ai-model-picker__actions">
                      <button
                        type="button"
                        id="btnSavePageFillModel"
                        class="btn btn--small btn--primary"
                        disabled
                      >
                        Enregistrer
                      </button>
                      <span
                        id="pageFillModelStatus"
                        class="fields-save-feedback"
                        aria-live="polite"
                      ></span>
                    </div>
                  </div>
                  <div class="ai-model-picker__details" id="pageFillModelDetails">
                    <p class="muted">Sélectionnez un modèle pour voir ses détails.</p>
                  </div>
                </div>
              </div>
              <div class="ai-settings">
                <div class="ai-settings__controls">
                  <div class="ai-settings__provider">
                    <h3>Auto-correction AI</h3>
                    <p class="muted">
                      Choisissez le modèle OpenRouter utilisé pour corriger les champs hwr peu fiables à partir des rectangles image.
                    </p>
                  </div>
                  <button
                    type="button"
                    id="btnRefreshAutocorrectModels"
                    class="btn btn--small"
                  >
                    Actualiser les modèles
                  </button>
                </div>
                <div class="ai-model-picker">
                  <div class="ai-model-picker__left">
                    <label class="ai-model-picker__label" for="autocorrectModelSearch">
                      Modèle image vers texte
                    </label>
                    <input
                      type="search"
                      id="autocorrectModelSearch"
                      class="input"
                      placeholder="Rechercher un modèle OpenRouter..."
                      autocomplete="off"
                    />
                    <select
                      id="autocorrectModelSelect"
                      class="input ai-model-picker__select"
                      aria-label="Modèles OpenRouter image vers texte pour auto-correction AI"
                    ></select>
                    <div class="ai-model-picker__actions">
                      <button
                        type="button"
                        id="btnSaveAutocorrectModel"
                        class="btn btn--small btn--primary"
                        disabled
                      >
                        Enregistrer
                      </button>
                      <span
                        id="autocorrectModelStatus"
                        class="fields-save-feedback"
                        aria-live="polite"
                      ></span>
                    </div>
                  </div>
                  <div class="ai-model-picker__details" id="autocorrectModelDetails">
                    <p class="muted">Sélectionnez un modèle pour voir ses détails.</p>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section class="settings-page" data-settings-page="shortcuts">
            <div class="shortcuts-settings">
              <div class="shortcuts-settings__controls">
                <label class="fields-option" for="optShowShortcutsOnStartup">
                  <input type="checkbox" id="optShowShortcutsOnStartup" />
                  <span>Afficher le panneau des raccourcis au démarrage</span>
                </label>
                <button
                  type="button"
                  id="btnResetKeyboardShortcuts"
                  class="btn btn--small"
                >
                  Réinitialiser les raccourcis
                </button>
              </div>
              <div
                id="shortcutsSettingsList"
                class="shortcuts-list"
                aria-live="polite"
              ></div>
            </div>
          </section>
          <section class="settings-page" data-settings-page="appearance">
            <div class="appearance-settings">
              <div class="appearance-panel">
                <div class="appearance-panel__head">
                  <h3>Thème</h3>
                  <p class="muted">Choisissez le mode d’affichage.</p>
                </div>
                <div class="appearance-theme-picker">
                  <button
                    type="button"
                    id="btnThemeLight"
                    class="btn btn--small"
                    aria-label="Activer le mode clair"
                  >
                    Clair
                  </button>
                  <button
                    type="button"
                    id="btnThemeDark"
                    class="btn btn--small"
                    aria-label="Activer le mode sombre"
                  >
                    Sombre
                  </button>
                  <button
                    type="button"
                    id="btnThemeSystem"
                    class="btn btn--small"
                    aria-label="Utiliser le thème du système"
                  >
                    Système
                  </button>
                </div>
              </div>
              <div class="appearance-panel">
                <div class="appearance-panel__head">
                  <h3>Taille du texte</h3>
                  <p class="muted">
                    Ajuste la taille du texte de toute l’interface (mémorisée
                    sur cet appareil).
                  </p>
                </div>
                <div
                  class="appearance-font-presets"
                  role="group"
                  aria-label="Préréglages de taille du texte"
                >
                  <button
                    type="button"
                    class="btn btn--small appearance-font-presets__btn"
                    data-font-preset="90"
                  >
                    90%
                  </button>
                  <button
                    type="button"
                    class="btn btn--small appearance-font-presets__btn"
                    data-font-preset="100"
                  >
                    100%
                  </button>
                  <button
                    type="button"
                    class="btn btn--small appearance-font-presets__btn"
                    data-font-preset="110"
                  >
                    110%
                  </button>
                  <button
                    type="button"
                    class="btn btn--small appearance-font-presets__btn"
                    data-font-preset="120"
                  >
                    120%
                  </button>
                </div>
                <div class="appearance-settings__control appearance-panel__control">
                  <span class="appearance-settings__bound" aria-hidden="true"
                    >75%</span
                  >
                  <input
                    type="range"
                    id="uiFontSizeRange"
                    class="appearance-settings__range"
                    min="75"
                    max="135"
                    value="100"
                    step="5"
                    aria-valuemin="75"
                    aria-valuemax="135"
                    aria-label="Taille du texte de l’interface"
                  />
                  <span class="appearance-settings__bound" aria-hidden="true"
                    >135%</span
                  >
                </div>
                <p
                  class="appearance-settings__subhint muted appearance-panel__subhint"
                  id="appearanceFontPreviewHint"
                  hidden
                >
                  Relâchez le curseur pour appliquer cette taille partout.
                </p>
              </div>
              <div class="appearance-settings__row">
                <label class="fields-option" for="optMergeHwrOrigColumn">
                  <input type="checkbox" id="optMergeHwrOrigColumn" />
                  <span
                    >Fusionner hwr dans la colonne orig. et afficher le % hwr
                    s’il existe</span
                  >
                </label>
              </div>
              <div class="appearance-settings__row">
                <label class="fields-option" for="optShowMergedHwrText">
                  <input type="checkbox" id="optShowMergedHwrText" />
                  <span>Afficher « hwr: ... » dans la colonne orig. fusionnée</span>
                </label>
              </div>
              <div class="appearance-settings__row">
                <label class="fields-option" for="optShowLotAssignmentPrompt">
                  <input type="checkbox" id="optShowLotAssignmentPrompt" />
                  <span>Afficher la suggestion d'affectation de sous-projet à l'ouverture d'un lot</span>
                </label>
              </div>
            </div>
          </section>
        </div>
      </div>
    </section>

    <div
      id="shortcutsFloatingBackdrop"
      class="shortcuts-panel__backdrop"
      hidden
    ></div>
    <section
      id="shortcutsFloatingPanel"
      class="shortcuts-panel"
      aria-live="polite"
      hidden
    >
      <div class="shortcuts-panel__head">
        <h2>Raccourcis clavier</h2>
        <button
          type="button"
          id="btnShortcutsPanelClose"
          class="btn btn--small"
          aria-label="Fermer le panneau des raccourcis"
        >
          Fermer
        </button>
      </div>
      <div id="shortcutsFloatingList" class="shortcuts-list"></div>
    </section>
    <div
      id="shortcutRebindPopover"
      class="shortcut-rebind-popover"
      role="dialog"
      aria-modal="true"
      aria-labelledby="shortcutRebindTitle"
      hidden
    >
      <h3 id="shortcutRebindTitle" class="shortcut-rebind-popover__title"></h3>
      <p id="shortcutRebindHint" class="shortcut-rebind-popover__hint"></p>
      <div
        id="shortcutRebindLiveKeys"
        class="shortcut-rebind-popover__live"
        aria-live="assertive"
        aria-atomic="true"
      ></div>
      <p
        id="shortcutRebindFeedback"
        class="shortcut-rebind-popover__feedback shortcut-rebind-popover__feedback--error"
        hidden
      ></p>
      <div class="shortcut-rebind-popover__actions">
        <button type="button" id="shortcutRebindCancel" class="btn btn--small">
          Annuler
        </button>
      </div>
    </div>
    <div
      id="importerPanelBackdrop"
      class="shortcuts-panel__backdrop"
      hidden
    ></div>
    <section
      id="importerPanel"
      class="shortcuts-panel importer-panel"
      role="dialog"
      aria-modal="true"
      aria-labelledby="importerPanelTitle"
      hidden
    >
      <div class="shortcuts-panel__head">
        <h2 id="importerPanelTitle">Importer un Dictionnaire</h2>
        <button
          type="button"
          id="btnImporterClose"
          class="btn btn--small"
          aria-label="Fermer le panneau Importer"
        >
          Fermer
        </button>
      </div>
      <div class="importer-panel__body">
        <p class="muted importer-panel__intro">
          Importez des fichiers <code>.db3</code> Datafix ou des dictionnaires
          client JSON (<code>.txt</code>, <code>.json</code>). Les fichiers sont
          d'abord analys&eacute;s&nbsp;; le r&eacute;sum&eacute; s'affiche avant
          toute &eacute;criture dans le dictionnaire g&eacute;n&eacute;ral.
        </p>
        <input
          id="importerFileInput"
          type="file"
          accept=".db3,.txt,.json,application/octet-stream,text/plain,application/json"
          multiple
          hidden
        />
        <button
          type="button"
          id="importerDropzone"
          class="importer-dropzone"
          aria-label="Déposer ou choisir des fichiers dictionnaire"
        >
          <span class="importer-dropzone__title"
            >Déposez des fichiers DICTIONARY (.db3) ou client (.txt / .json)</span
          >
          <span class="importer-dropzone__hint"
            >ou cliquez ici pour les sélectionner</span
          >
        </button>
        <div id="importerPreview" class="importer-preview" hidden></div>
        <div class="importer-panel__actions">
          <button
            type="button"
            id="btnImporterRun"
            class="btn btn--small btn--primary"
            disabled
          >
            Importer
          </button>
        </div>
        <div
          id="importerFeedback"
          class="importer-feedback"
          aria-live="polite"
        ></div>
      </div>
    </section>

    <div
      id="recordInsertBackdrop"
      class="record-insert-overlay__backdrop"
      hidden
    ></div>
    <section
      id="recordInsertOverlay"
      class="record-insert-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <h2>Ajout du record en cours...</h2>
      <p>Déplacement des records existants pour conserver l'ordre final.</p>
    </section>
    <div
      id="headerAddBackdrop"
      class="header-add-overlay__backdrop"
      hidden
    ></div>
    <section
      id="headerAddOverlay"
      class="header-add-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <div class="header-add-overlay__spinner" aria-hidden="true"></div>
      <div class="header-add-overlay__text">
        Ajustement de l'ordre des Headers...
      </div>
    </section>
    <div
      id="headerDeleteBackdrop"
      class="header-delete-overlay__backdrop"
      hidden
    ></div>
    <section
      id="headerDeleteOverlay"
      class="header-delete-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <div class="header-delete-overlay__spinner" aria-hidden="true"></div>
      <div class="header-delete-overlay__text">Suppression du header...</div>
    </section>
    <div
      id="recordDeleteBackdrop"
      class="record-delete-overlay__backdrop"
      hidden
    ></div>
    <section
      id="recordDeleteOverlay"
      class="record-delete-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <div class="record-delete-overlay__spinner" aria-hidden="true"></div>
      <div class="record-delete-overlay__text">Suppression du record...</div>
    </section>
    <div
      id="docTypeChangeBackdrop"
      class="doc-type-change-overlay__backdrop"
      hidden
    ></div>
    <section
      id="docTypeChangeOverlay"
      class="doc-type-change-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <div class="doc-type-change-overlay__spinner" aria-hidden="true"></div>
      <div class="doc-type-change-overlay__text">
        Changement du DocType en cours. Veuillez patienter...
      </div>
    </section>
    <div
      id="reorderOverlayBackdrop"
      class="reorder-overlay__backdrop"
      hidden
    ></div>
    <section
      id="reorderOverlay"
      class="reorder-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <div class="reorder-overlay__spinner" aria-hidden="true"></div>
      <div class="reorder-overlay__text">
        Réorganisation en cours. Veuillez patienter...
      </div>
    </section>
    <div
      id="dictAutocorrectResultsBackdrop"
      class="dict-autocorrect-results__backdrop"
      hidden
    ></div>
    <section
      id="dictAutocorrectResultsPanel"
      class="dict-autocorrect-results"
      role="dialog"
      aria-modal="true"
      aria-labelledby="dictAutocorrectResultsTitle"
      hidden
    >
      <h2 id="dictAutocorrectResultsTitle">Résultats de la correction</h2>
      <p id="dictAutocorrectResultsSummary" class="dict-autocorrect-results__summary"></p>
      <div
        id="dictAutocorrectResultsList"
        class="dict-autocorrect-results__list"
        role="region"
        aria-label="Détail par champ"
      ></div>
      <div class="dict-autocorrect-results__buttons">
        <button
          type="button"
          id="btnDictAutocorrectResultsOk"
          class="btn btn--small btn--primary"
        >
          OK
        </button>
      </div>
    </section>
    <div
      id="dictAutocorrectBackdrop"
      class="dict-autocorrect-overlay__backdrop"
      hidden
    ></div>
    <section
      id="dictAutocorrectOverlay"
      class="dict-autocorrect-overlay"
      role="status"
      aria-live="polite"
      aria-busy="true"
      hidden
    >
      <div class="dict-autocorrect-overlay__header">
        <div class="dict-autocorrect-overlay__spinner" aria-hidden="true"></div>
        <div id="dictAutocorrectOverlayText" class="dict-autocorrect-overlay__text">
          Correction par dictionnaire en cours. Veuillez patienter...
        </div>
      </div>
      <ol
        id="dictAutocorrectOverlaySteps"
        class="dict-autocorrect-overlay__steps"
        hidden
      ></ol>
      <div
        id="dictAutocorrectOverlayTotal"
        class="dict-autocorrect-overlay__total"
        hidden
      ></div>
    </section>
    <div
      id="autocorrectChoiceBackdrop"
      class="confirm-action__backdrop"
      hidden
    ></div>
    <div
      id="gatewayActivationBackdrop"
      class="confirm-action__backdrop gateway-activation__backdrop"
      hidden
    ></div>
    <section
      id="gatewayActivationPanel"
      class="confirm-action gateway-activation"
      role="dialog"
      aria-modal="true"
      aria-labelledby="gatewayActivationTitle"
      aria-describedby="gatewayActivationDescription"
      hidden
    >
      <h2 id="gatewayActivationTitle">Activation Datafix</h2>
      <p id="gatewayActivationDescription">
        Saisissez le code à usage unique fourni par Infoscribe. Vous pourrez continuer à travailler manuellement sans activation, mais les fonctions AI resteront indisponibles.
      </p>
      <form id="gatewayActivationForm">
        <label class="gateway-activation__field" for="gatewayActivationCode">
          Code d'activation
        </label>
        <input
          type="text"
          id="gatewayActivationCode"
          class="input gateway-activation__input"
          placeholder="DFX-…"
          autocomplete="off"
          spellcheck="false"
          maxlength="200"
        />
        <p
          id="gatewayActivationStatus"
          class="gateway-activation__status"
          data-kind="neutral"
          role="status"
          aria-live="polite"
        ></p>
        <div class="confirm-action__buttons">
          <button
            type="button"
            id="btnGatewayActivationLater"
            class="btn btn--small"
          >
            Plus tard
          </button>
          <button
            type="submit"
            id="btnGatewayActivationSubmit"
            class="btn btn--small btn--primary"
          >
            Activer ce PC
          </button>
        </div>
      </form>
    </section>
    <section
      id="autocorrectChoicePanel"
      class="confirm-action autocorrect-choice"
      role="dialog"
      aria-modal="true"
      aria-labelledby="autocorrectChoiceTitle"
      hidden
    >
      <h2 id="autocorrectChoiceTitle">Choisir le système de correction</h2>
      <p>Quelle correction voulez-vous utiliser maintenant ?</p>
      <p id="autocorrectChoiceHint" class="autocorrect-choice__hint"></p>
      <div class="confirm-action__buttons autocorrect-choice__buttons">
        <button
          type="button"
          id="btnAutocorrectChoiceCancel"
          class="btn btn--small"
        >
          Annuler
        </button>
        <button
          type="button"
          id="btnAutocorrectChoiceDictionary"
          class="btn btn--small btn--primary"
        >
          Dictionnaire
        </button>
        <button
          type="button"
          id="btnAutocorrectChoiceAi"
          class="btn btn--small btn--primary"
        >
          AI
        </button>
      </div>
    </section>
    <div
      id="confirmActionBackdrop"
      class="confirm-action__backdrop"
      hidden
    ></div>
    <section
      id="confirmActionPanel"
      class="confirm-action"
      role="dialog"
      aria-modal="true"
      aria-labelledby="confirmActionTitle"
      hidden
    >
      <h2 id="confirmActionTitle">Confirmation</h2>
      <p id="confirmActionMessage"></p>
      <div class="confirm-action__buttons">
        <button
          type="button"
          id="btnConfirmActionCancel"
          class="btn btn--small"
        >
          Annuler
        </button>
        <button
          type="button"
          id="btnConfirmActionOk"
          class="btn btn--small btn--primary"
        >
          Confirmer
        </button>
      </div>
    </section>
    <div
      id="lotAssignmentBackdrop"
      class="confirm-action__backdrop"
      hidden
    ></div>
    <section
      id="lotAssignmentPanel"
      class="confirm-action lot-assignment-panel"
      role="dialog"
      aria-modal="true"
      aria-labelledby="lotAssignmentTitle"
      hidden
    >
      <h2 id="lotAssignmentTitle">Affectation du lot</h2>
      <p id="lotAssignmentMessage"></p>
      <p id="lotAssignmentHint" class="lot-assignment-panel__hint"></p>
      <p class="lot-assignment-panel__settings-note">
        Vous pouvez changer l'assignation depuis Paramètres &gt; Types de projet &gt; colonne Sous-Projet.
      </p>
      <label class="lot-assignment-panel__field" for="lotAssignmentSelect">
        Sous-projet
      </label>
      <select id="lotAssignmentSelect" class="lot-assignment-panel__select"></select>
      <label class="fields-option lot-assignment-panel__never-show" for="lotAssignmentNeverShow">
        <input type="checkbox" id="lotAssignmentNeverShow" />
        <span>Ne plus afficher ce message</span>
      </label>
      <div class="confirm-action__buttons">
        <button
          type="button"
          id="btnLotAssignmentAccept"
          class="btn btn--small btn--primary"
        >
          Accepter
        </button>
      </div>
    </section>
    <div
      id="subProjectAssignBackdrop"
      class="confirm-action__backdrop"
      hidden
    ></div>
    <section
      id="subProjectAssignPanel"
      class="confirm-action sub-project-assign-panel"
      role="dialog"
      aria-modal="true"
      aria-labelledby="subProjectAssignTitle"
      hidden
    >
      <h2 id="subProjectAssignTitle">Changer le sous-projet</h2>
      <p id="subProjectAssignMessage" class="lot-assignment-panel__hint"></p>
      <label class="lot-assignment-panel__field" for="subProjectAssignSelect">
        Sous-projet
      </label>
      <select id="subProjectAssignSelect" class="lot-assignment-panel__select"></select>
      <div class="confirm-action__buttons">
        <button
          type="button"
          id="btnSubProjectAssignCancel"
          class="btn btn--small"
        >
          Annuler
        </button>
        <button
          type="button"
          id="btnSubProjectAssignApplyThisLot"
          class="btn btn--small btn--primary"
        >
          Appliquer à ce lot
        </button>
        <button
          type="button"
          id="btnSubProjectAssignApplyAllLots"
          class="btn btn--small btn--primary"
        >
          Appliquer à tous les lots détectés
        </button>
      </div>
    </section>

    <div
      id="uiToastMessage"
      class="ui-toast"
      role="status"
      aria-live="polite"
      hidden
    ></div>

    <main class="layout" id="mainLayout">
      <aside class="sidebar">
        <div class="sidebar__head">
          <span class="sidebar__head-title">Images</span>
          <button
            type="button"
            id="btnImagesPanelToggle"
            class="btn btn--small btn--icon"
            aria-label="Afficher ou masquer la liste des images"
            aria-controls="imageList"
            aria-expanded="true"
            title="Afficher ou masquer la liste des images"
          >
            &#x25C0;
          </button>
        </div>
        <ul class="img-list" id="imageList"></ul>
      </aside>

      <div
        class="resizer resizer--sidebar"
        id="sidebarResizer"
        role="separator"
        aria-orientation="vertical"
        aria-label="Redimensionner la liste des images"
        tabindex="0"
      ></div>

      <section class="pane pane--image">
        <div class="img-wrap" id="imgWrap">
          <div class="img-pan" id="imgPan" hidden>
            <div id="imgCanvas" class="img-canvas">
              <img id="pageImg" alt="Document" draggable="false" />
              <div id="actRectsLayer" class="act-rects-layer" hidden></div>
              <div id="highlightRect" class="highlight-rect"></div>
              <input
                type="text"
                id="floatingInput"
                class="floating-input"
                autocomplete="off"
                spellcheck="false"
                hidden
              />
            </div>
          </div>
          <p id="noImg" class="muted">Sélectionnez un lot puis une image.</p>
        </div>
      </section>

      <div
        class="resizer"
        id="splitResizer"
        role="separator"
        aria-orientation="vertical"
        aria-label="Redimensionner le panneau formulaire"
        tabindex="0"
      ></div>

      <section class="pane pane--form" id="formPane">
        <div id="formEmpty" class="muted">Chargement…</div>
        <div id="formContent" hidden>
          <div class="form-pane__scroll">
            <div class="block" id="headerBlock">
              <h2>Header (sections)</h2>
              <div class="fields" id="headerFields"></div>
              <div class="header-add-section-wrap">
                <button
                  type="button"
                  id="btnAddHeaderSection"
                  class="btn btn--small"
                >
                  + Ajouter une section Header
                </button>
              </div>
              <div class="bdm-mixed-add-wrap" id="bdmMixedAddWrap" hidden>
                <button
                  type="button"
                  id="btnAddBdmHeaderSection"
                  class="btn btn--small"
                >
                  + Add BDM header section
                </button>
              </div>
            </div>
            <div class="form-record-count-bar" id="formRecordCountBar" hidden>
              <span class="form-record-count" aria-live="polite">
                <span class="form-record-count__label"
                  >Records sur cette image</span
                >
                <span class="form-record-count__value" id="formRecordCount"
                  >0</span
                >
              </span>
            </div>
            <div id="recordsBlock"></div>
          </div>
        </div>
      </section>
    </main>

    <footer class="status-bar" aria-label="Barre d'état">
      <span class="status-segment" id="statusContext">Lot/Image: -</span>
      <button
        type="button"
        class="status-segment status-segment--button"
        id="statusBar"
        title="Cliquer pour voir et copier le détail complet de l'état"
      >
        État: Chargement...
      </button>
      <span
        class="status-segment status-segment--pan status-segment--right"
        id="statusPan"
        hidden
        title="Manual pan (px) when auto zoom is off; use Zoom control for magnification"
      >
        <span class="bdm-view-toolbar__coords bdm-view-toolbar__coords--status">
          <label class="bdm-coord">
            <span class="muted">Pan X</span>
            <input
              type="text"
              id="bdmPanXInput"
              class="bdm-coord-input"
              inputmode="numeric"
              autocomplete="off"
              aria-label="Pan X pixels"
            />
          </label>
          <label class="bdm-coord">
            <span class="muted">Pan Y</span>
            <input
              type="text"
              id="bdmPanYInput"
              class="bdm-coord-input"
              inputmode="numeric"
              autocomplete="off"
              aria-label="Pan Y pixels"
            />
          </label>
        </span>
      </span>
      <span class="status-segment status-segment--zoom" id="statusZoom">
        <span class="status-zoom-label">Zoom:</span>
        <input
          type="number"
          id="zoomValueDisplay"
          class="status-zoom-value-input"
          min="10"
          max="400"
          step="1"
          value="100"
          inputmode="numeric"
          aria-label="Zoom percentage"
          title="Type a value from 10 to 400"
        />
        <input
          type="range"
          id="zoomRange"
          min="10"
          max="400"
          value="100"
          step="1"
          class="status-zoom-slider"
          aria-label="Zoom slider"
        />
      </span>
    </footer>

    <div
      id="statusDetailsBackdrop"
      class="status-details__backdrop"
      hidden
    ></div>
    <section
      id="statusDetailsDialog"
      class="status-details"
      aria-label="Détail de l'état"
      hidden
    >
      <div class="status-details__head">
        <h2>Détail complet de l'état</h2>
        <button type="button" id="btnStatusDetailsClose" class="btn btn--small">
          Fermer
        </button>
      </div>
      <textarea
        id="statusDetailsText"
        class="status-details__text"
        readonly
      ></textarea>
      <div class="status-details__actions">
        <button type="button" id="btnStatusDetailsCopy" class="btn btn--small">
          Copier
        </button>
      </div>
    </section>

    <input type="hidden" id="projectRoot" />

    <!-- Sub-project profile panel -->
    <div id="subProfileBackdrop" class="sub-profile-backdrop" hidden></div>
    <section
      id="subProfilePanel"
      class="sub-profile-panel"
      role="dialog"
      aria-modal="true"
      aria-labelledby="subProfileTitle"
      hidden
    >
      <div class="sub-profile-panel__head">
        <div class="sub-profile-panel__title-row">
          <span id="subProfileKindBadge" class="kind-badge"></span>
          <h2 id="subProfileTitle" class="sub-profile-panel__title"></h2>
          <input
            type="text"
            id="subProfileTitleInput"
            class="sub-profile-panel__title-input"
            hidden
            autocomplete="off"
            aria-label="Nom du sous-projet"
          />
        </div>
        <div class="sub-profile-panel__actions">
          <button
            type="button"
            id="btnProfileClose"
            class="btn btn--small"
            aria-label="Fermer"
          >
            &times;
          </button>
        </div>
      </div>
      <div class="sub-profile-panel__body">
        <div class="sub-profile-section sub-profile-section--language">
          <h3 class="sub-profile-section__title">Langue</h3>
          <div id="subProfileLanguageValue" class="sub-profile-language-value"></div>
          <input
            type="text"
            id="subProfileLanguageInput"
            class="sub-profile-language-input"
            hidden
            autocomplete="off"
            aria-label="Langue du sous-projet"
            placeholder="Ex. Français, English, Arabic"
          />
        </div>
        <div class="sub-profile-section">
          <h3 class="sub-profile-section__title">DocTypes</h3>
          <div
            id="subProfileDocTypes"
            class="doctype-tags-wrap sub-profile-doctypes"
          ></div>
        </div>
        <div class="sub-profile-section sub-profile-section--fields">
          <h3 class="sub-profile-section__title">Champs du projet</h3>
          <div
            id="subProfileFooterSearchWrap"
            class="sub-profile-panel__footer-search sub-profile-fields-search-wrap"
            hidden
          >
            <input
              type="search"
              id="subProfileFieldSearch"
              class="sub-profile-field-search"
              placeholder="Rechercher un champ…"
              autocomplete="off"
              aria-label="Rechercher un champ"
            />
          </div>
          <div class="sub-profile-fields-wrap">
            <table class="sub-profile-fields-table">
              <thead>
                <tr>
                  <th>Libellé</th>
                  <th>Nom du champ</th>
                  <th>Header</th>
                  <th>Priorité</th>
                  <th>Seuil Rekey</th>
                  <th>Review Blanks</th>
                  <th>Dictionnaire</th>
                </tr>
              </thead>
              <tbody id="subProfileFieldsBody"></tbody>
            </table>
          </div>
        </div>
        <div class="sub-profile-section sub-profile-section--keying-instructions">
          <h3 class="sub-profile-section__title">Keying Instructions</h3>
          <div
            id="subProfileCiImportWrap"
            class="sub-profile-ci-import-wrap"
            hidden
          >
            <button
              type="button"
              id="btnProfileCiImport"
              class="btn btn--small"
              title="Importer les Keying Instructions depuis le fichier CI (.xlsx) du lot"
            >
              Importer CI (.xlsx)
            </button>
            <input
              type="file"
              id="subProfileCiFile"
              accept=".xlsx,.xls"
              hidden
              aria-hidden="true"
            />
            <span
              id="subProfileCiImportStatus"
              class="ci-import-status"
              aria-live="polite"
            ></span>
          </div>
          <div class="sub-profile-keying-wrap">
            <table class="sub-profile-keying-table">
              <thead>
                <tr>
                  <th>Field Label</th>
                  <th>Keying Instructions</th>
                </tr>
              </thead>
              <tbody id="subProfileKeyingInstructionsBody"></tbody>
            </table>
          </div>
        </div>
      </div>
      <footer class="sub-profile-panel__footer">
        <div class="sub-profile-panel__footer-actions">
          <button
            type="button"
            id="btnProfileEdit"
            class="btn btn--small"
            title="Modifier le nom, la langue, les DocTypes et les seuils Rekey"
          >
            Modifier
          </button>
          <button type="button" id="btnProfileDelete" class="btn btn--small btn--danger">
            Supprimer
          </button>
          <button
            type="button"
            id="btnProfileThresholdSave"
            class="btn btn--small btn--primary"
            hidden
          >
            Enregistrer
          </button>
        </div>
      </footer>
    </section>

    <script type="module" src="{{ url_for('static', filename='app.js') }}?v=128"></script>
  </body>
</html>
