{% load crispy_forms_tags %}

{{ formset.management_form }}

<div class="py-2">
    <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="d-none">
        <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="d-flex justify-content-center py-2">
        <button type="submit" class="btn btn-primary">Import objects</button>
    </div>


</div>
<style>
    /* Hide the labels in the form */
    label {
        display: none;
    }

    /* Make the header sticky */
    .sticky-header {
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 1000; /* Ensure it stays on top */
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); /* Optional: Add shadow to differentiate */
    }

    /* Ensure the table is scrollable */
    .table-responsive-wrapper {
        overflow-y: auto; /* Enable vertical scroll */
        overflow-x: auto; /* Enable horizontal scroll, if needed */
        max-height: 400px; /* Adjust height as necessary */
    }

    /* Keep table layout consistent */
    .table {
        width: 100%;
        table-layout: fixed;
    }
</style>
