{% load crispy_forms_tags %}

<div class="space-y-4">
    <div class="rounded-lg border border-primary-100 bg-primary-50 p-4 text-sm text-primary-900">
        {{ form.intro_text }}
    </div>

    <form method="post" action="{{ post_url }}" id="bloomerp-bulk-form-{{ content_type_id }}">
        {% csrf_token %}
        {% if form.non_field_errors %}
        <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
            {% for error in form.non_field_errors %}
                <p>{{ error }}</p>
            {% endfor %}
        </div>
        {% endif %}

        <div class="space-y-6">
            <div>
                {{ form.file_type|as_crispy_field }}
                {{ form.content_type_id }}
            </div>

            <div class="space-y-3">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
                    <h3 class="text-sm font-semibold text-slate-900">Included fields</h3>
                    <div class="flex flex-wrap gap-2">
                        <button type="button" class="btn btn-secondary btn-sm" data-bulk-select-all="true">
                            Select all
                        </button>
                        <button type="button" class="btn btn-secondary btn-sm" data-bulk-clear-all="true">
                            Clear all
                        </button>
                    </div>
                </div>

                <div>
                    <p class="text-sm text-slate-600">{{ form.selection_help_text }}</p>
                </div>

                <div class="grid gap-3 sm:grid-cols-2">
                    {% for field in form.visible_fields %}
                        {% if field.name != "file_type" %}
                        <label class="flex items-start gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 {% if field.field.disabled %}opacity-80{% else %}hover:border-primary hover:bg-primary-50/40{% endif %}">
                            <span class="pt-0.5">{{ field }}</span>
                            <span class="min-w-0">
                                <span class="block text-sm font-medium text-slate-900">
                                    {{ field.label }}
                                    {% if field.field.disabled %}
                                    <span class="ml-2 inline-flex rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-slate-600">Required</span>
                                    {% endif %}
                                </span>
                                {% if field.help_text %}
                                <span class="mt-1 block text-xs leading-5 text-slate-500">{{ field.help_text }}</span>
                                {% endif %}
                                {% if field.errors %}
                                <span class="mt-1 block text-xs text-red-700">{{ field.errors|striptags }}</span>
                                {% endif %}
                            </span>
                        </label>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="flex justify-start mt-4">
            <button type="submit" class="btn btn-primary">{{ form.submit_label }}</button>
        </div>
    </form>
</div>

<script>
(() => {
    const form = document.getElementById("bloomerp-bulk-form-{{ content_type_id }}");
    if (!form) {
        return;
    }

    const checkboxes = Array.from(
        form.querySelectorAll('input[type="checkbox"]:not([disabled])')
    );
    const selectAllButton = form.querySelector("[data-bulk-select-all='true']");
    const clearAllButton = form.querySelector("[data-bulk-clear-all='true']");

    selectAllButton?.addEventListener("click", () => {
        checkboxes.forEach((checkbox) => {
            checkbox.checked = true;
        });
    });

    clearAllButton?.addEventListener("click", () => {
        checkboxes.forEach((checkbox) => {
            checkbox.checked = false;
        });
    });
})();
</script>