{% load common_extras %}
<!-- Step 2: Column Mapping (loaded via HTMX after upload) -->
<div class="space-y-6">
    <div class="bg-white rounded-xl border border-stone-200 p-6">
        <div class="flex items-center gap-3 mb-4">
            <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white" style="background: var(--primary);">2</div>
            <h2 class="text-sm font-semibold text-stone-800">Map Columns</h2>
        </div>

        <form hx-post="{% url 'composer:csv_preview' workspace_id=workspace.id %}"
              hx-target="#csv-import-container"
              hx-swap="innerHTML">
            {% csrf_token %}

            <p class="text-xs text-stone-500 mb-4">Match each CSV column to the corresponding post field. Leave unmapped columns as "Skip".</p>

            <!-- Preview table -->
            <div class="overflow-x-auto mb-6 rounded-lg border border-stone-200">
                <table class="w-full text-xs">
                    <thead>
                        <tr class="bg-stone-50">
                            {% for header in headers %}
                            <th class="px-3 py-2 text-left font-semibold text-stone-600 border-b border-stone-200 whitespace-nowrap">{{ header }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in preview_rows %}
                        <tr class="{% if not forloop.last %}border-b border-stone-100{% endif %}">
                            {% for cell in row %}
                            <td class="px-3 py-1.5 text-stone-600 whitespace-nowrap max-w-[200px] truncate">{{ cell|truncatechars:40 }}</td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Map by field: one select per post field -->
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3"
                 x-data="{ autoMapping: {{ auto_mapping|json_attr }} }"
                 x-init="$nextTick(() => {
                     Object.entries(autoMapping).forEach(([field, colIdx]) => {
                         const sel = $el.querySelector(`[name='map_${field}']`);
                         if (sel) sel.value = String(colIdx);
                     });
                 })">
                {% for field in field_choices %}
                <div>
                    <label class="block text-[11px] font-semibold text-stone-500 mb-1 uppercase tracking-wide">{{ field }}</label>
                    <select name="map_{{ field }}" class="form-input w-full text-xs py-1.5">
                        <option value="">- Skip -</option>
                        {% for header in headers %}
                        <option value="{{ forloop.counter0 }}">{{ header }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% endfor %}
            </div>

            <div class="mt-5 flex justify-end">
                <button type="submit" class="btn-brand text-sm py-2 px-5">
                    Validate &amp; Preview
                </button>
            </div>
        </form>
    </div>
</div>