{{! Migration Dialog — Chroniques de l'Étrange }}
<div class="cde-migration-body">

  {{! Drop zone / file picker }}
  <div class="cde-migration-drop-zone">
    <i class="fa-solid fa-file-import cde-migration-drop-icon"></i>
    <p class="cde-migration-drop-hint">{{ localize "CDE.MigrationDropHint" }}</p>
    <label class="cde-migration-file-btn">
      <i class="fa-solid fa-folder-open"></i>
      {{ localize "CDE.MigrationChooseFiles" }}
      <input type="file" class="cde-migration-file-input" accept=".json" multiple hidden>
    </label>
  </div>

  {{! Preview table }}
  {{#if (and hasPending (ne importState "importing"))}}
  <div class="cde-migration-preview">
    <div class="cde-migration-preview-header">
      <span>{{ localize "CDE.MigrationPreviewTitle" }}</span>
      <button type="button" class="cde-migration-clear-btn" data-action="clearFiles">
        <i class="fa-solid fa-xmark"></i>
        {{ localize "CDE.MigrationClear" }}
      </button>
    </div>
    <table class="cde-migration-table">
      <thead>
        <tr>
          <th></th>
          <th>{{ localize "CDE.MigrationColName" }}</th>
          <th>{{ localize "CDE.MigrationColType" }}</th>
          <th>{{ localize "CDE.MigrationColItems" }}</th>
          <th>{{ localize "CDE.MigrationColFile" }}</th>
        </tr>
      </thead>
      <tbody>
        {{#each pending}}
        <tr class="{{#if _duplicate}}cde-migration-row-duplicate{{/if}}">
          <td><img src="{{img}}" class="cde-migration-thumb" alt=""></td>
          <td class="cde-migration-name">
            {{#if _duplicate}}<i class="fa-solid fa-triangle-exclamation cde-migration-duplicate-icon" title="{{ localize 'CDE.MigrationDuplicate' }}"></i>{{/if}}
            {{name}}
          </td>
          <td>
            <span class="cde-migration-type-badge cde-migration-type-{{type}}">
              {{#if (eq type "character")}}
                <i class="fa-solid fa-user"></i> Personnage
              {{else}}
                <i class="fa-solid fa-skull"></i> PNJ
              {{/if}}
            </span>
          </td>
          <td class="cde-migration-items-count">{{items.length}}</td>
          <td class="cde-migration-srcfile">{{_srcFile}}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
  {{/if}}

  {{! Duplicate warning banner (confirmation step) }}
  {{#if (eq importState "confirm")}}
  <div class="cde-migration-confirm-bar">
    <p class="cde-migration-confirm-msg">
      <i class="fa-solid fa-triangle-exclamation"></i>
      {{ localize "CDE.MigrationImportConfirm" count=count }}
    </p>
    {{#if hasDuplicates}}
    <p class="cde-migration-confirm-duplicates">
      <i class="fa-solid fa-triangle-exclamation"></i>
      {{ localize "CDE.MigrationDuplicateCount" count=duplicateCount }}
    </p>
    {{/if}}
    <div class="cde-migration-confirm-actions">
      <button type="button" class="cde-migration-confirm-btn" data-action="confirmImport">
        <i class="fa-solid fa-download"></i>
        {{ localize "CDE.MigrationConfirmAction" }} ({{count}})
      </button>
      <button type="button" class="cde-migration-cancel-btn" data-action="cancelImport">
        <i class="fa-solid fa-xmark"></i>
        {{ localize "CDE.Cancel" }}
      </button>
    </div>
  </div>
  {{/if}}

  {{! Progress (importing state) }}
  {{#if (eq importState "importing")}}
  <div class="cde-migration-progress">
    <i class="fa-solid fa-spinner fa-spin"></i>
    <span>{{ localize "CDE.MigrationImporting" }}</span>
    <span class="cde-migration-progress-count">{{progress}}/{{total}}</span>
  </div>
  {{/if}}

  {{! Errors }}
  {{#if hasErrors}}
  <ul class="cde-migration-errors">
    {{#each errors}}
    <li><i class="fa-solid fa-triangle-exclamation"></i> {{this}}</li>
    {{/each}}
  </ul>
  {{/if}}

  {{! Action bar }}
  <div class="cde-migration-actions">
    {{#if (and hasPending (eq importState "idle"))}}
    <button type="button" class="cde-migration-import-btn" data-action="doImport">
      <i class="fa-solid fa-download"></i>
      {{ localize "CDE.MigrationImport" }} ({{count}})
    </button>
    {{else if (and (not hasPending) (eq importState "idle"))}}
    <p class="cde-migration-hint">{{ localize "CDE.MigrationHint" }}</p>
    {{/if}}
  </div>

</div>