{% load crispy_forms_tags %}

<div class="space-y-4">
    {% if upload_error %}
    <div class="alert alert-danger">
        {{ upload_error }}
    </div>
    {% endif %}

    {% if success_message %}
    <div class="alert alert-success">
        {{ success_message }}
    </div>
    {% endif %}

    {% if formset %}
    {{ formset.management_form }}

<div class="py-2">
    <div class="mb-4 flex items-start justify-between gap-4">
        <div>
            <h3 class="text-lg font-semibold text-slate-900">Preview imported rows</h3>
            <p class="text-sm text-slate-600">
                Review and adjust the parsed values before confirming the upload.
                {% if row_count %}{{ row_count }} row(s) detected.{% endif %}
            </p>
        </div>
    </div>

    <form hx-post="{{ submit_url }}" hx-target="#bulkUploadTarget" hx-swap="innerHTML">
    <div class="table-responsive-wrapper">
        <table class="table table-hover">
            <thead>
                <tr class="sticky-header">
                    <th width="60px">#</th>
                {% for field in formset.empty_form.visible_fields %}
                    <th >{{ field.label }}</th>
                {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for form in formset.forms %}
                <tr>
                    <td width="60px">{{ forloop.counter }}</td>
                    {% for field in form.visible_fields %}
                    <td>{{ field|as_crispy_field }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Hidden fields to store the content type and fields -->
    <div class="hidden">
        <input value="{{content_type_id}}" type="hidden" name="bulk_upload_content_type_id">
        {% for field in fields %}
            <input value="{{ field }}" type="hidden" name="bulk_upload_fields">
        {% endfor %}
    </div>
    <!-- End hidden fields -->

    <div class="flex justify-center py-2">
        <button type="submit" class="btn btn-primary">Create objects</button>
    </div>
</form>
</div>
    {% endif %}
</div>