<div class="sp-preset-import-dialog">
  <div class="sp-dialog-content">
    <p class="sp-import-description">
      {{localize "scrying-pool.presetImport.description"}}
    </p>

    {{#if hasExistingPresets}}
    <div class="sp-warning-box">
      <i class="fas fa-exclamation-triangle"></i>
      <span>{{localize "scrying-pool.presetImport.existingPresetsWarning" existingPresetCount=existingPresetCount}}</span>
    </div>
    {{/if}}

    {{!-- File Selection --}}
    <div class="sp-form-group">
      <label class="sp-form-label">{{localize "scrying-pool.presetImport.selectFile"}}</label>
      <div class="sp-file-upload">
        <input type="file" class="sp-file-input" accept=".json" />
        <label class="sp-file-label">
          <i class="fas fa-upload"></i>
          <span class="sp-file-text">{{localize "scrying-pool.presetImport.chooseFile"}}</span>
        </label>
      </div>
      {{#if selectedFileName}}
      <div class="sp-file-selected">
        <i class="fas fa-check-circle"></i>
        <span>{{selectedFileName}}</span>
      </div>
      {{/if}}
    </div>

    {{!-- Mode Selection --}}
    <div class="sp-form-group">
      <label class="sp-form-label">{{localize "scrying-pool.presetImport.importMode"}}</label>
      <div class="sp-radio-group">
        <label class="sp-radio-label">
          <input type="radio" name="import-mode" class="sp-mode-merge" value="merge" {{checked (eq mode "merge")}} />
          <span class="sp-radio-text">{{mergeLabel}}</span>
          <span class="sp-radio-hint">{{localize "scrying-pool.presetImport.importModeMergeHint"}}</span>
        </label>
        <label class="sp-radio-label">
          <input type="radio" name="import-mode" class="sp-mode-replace" value="replace" {{checked (eq mode "replace")}} />
          <span class="sp-radio-text">{{replaceLabel}}</span>
          <span class="sp-radio-hint">{{localize "scrying-pool.presetImport.importModeReplaceHint"}}</span>
        </label>
      </div>
    </div>

    {{!-- Preview Section --}}
    {{#if previewItems.length}}
    <div class="sp-preview-section">
      <h3 class="sp-preview-title">{{localize "scrying-pool.presetImport.previewTitle"}}</h3>
      <ul class="sp-preview-list">
        {{#each previewItems as |item|}}
        <li class="sp-preview-item {{unless item.valid 'sp-preview-item--invalid'}}">
          <i class="fas {{if item.valid 'fa-check-circle sp-valid' 'fa-exclamation-circle sp-invalid'}}"></i>
          <span class="sp-preview-name">{{item.name}}</span>
          {{#if item.error}}
          <span class="sp-preview-error" title="{{item.error}}">{{item.error}}</span>
          {{/if}}
        </li>
        {{/each}}
      </ul>
    </div>
    {{/if}}

    {{!-- Confirmation Section (shown for replace mode) --}}
    {{#if requiresConfirmation}}
    <div class="sp-confirmation-section">
      <div class="sp-confirmation-warning">
        <i class="fas fa-exclamation-triangle"></i>
        <span>{{localize "scrying-pool.presetImport.replaceConfirmation" existingPresetCount=existingPresetCount}}</span>
      </div>
    </div>
    {{/if}}
  </div>

  <div class="sp-dialog-buttons">
    {{#unless requiresConfirmation}}
    <button type="button" class="sp-btn sp-btn-primary sp-import-btn" {{disabled (not previewItems.length) }}>
      <i class="fas fa-file-import"></i> {{localize "scrying-pool.presetImport.import"}}
    </button>
    {{else}}
    <button type="button" class="sp-btn sp-btn-danger sp-confirm-btn">
      <i class="fas fa-check"></i> {{localize "scrying-pool.presetImport.confirmReplace"}}
    </button>
    {{/unless}}
    <button type="button" class="sp-btn sp-btn-secondary sp-cancel-btn">
      {{localize "scrying-pool.presetImport.cancel"}}
    </button>
  </div>
</div>
