{% from "partials/components.html" import feedback %}

<section class="import-upload" data-import-upload>
  <header class="import-upload__header">
    <h3>{{ title or "Bulk Import" }}</h3>
    {% if description %}<p class="import-upload__description">{{ description }}</p>{% endif %}
  </header>

  <div class="import-upload__dropzone" data-import-dropzone>
    <span class="icon-upload" aria-hidden="true"></span>
    <p>Drag & drop CSV/XLSX files here or</p>
    <label class="btn secondary">
      Browse
      <input type="file" name="import-file" accept=".csv,.xlsx" hidden />
    </label>
    <p class="import-upload__hint">Maximum size {{ max_size_hint or "10 MB" }}. UTF-8 encoding required.</p>
  </div>

  <div class="import-upload__actions">
    <button type="button" class="btn primary" data-import-upload-trigger disabled>Upload & Preview</button>
    <button type="button" class="btn" data-import-reset hidden>Reset</button>
  </div>

  {{ feedback("import-upload-feedback", hidden=True, role="alert") }}
</section>