{% load static %}
{{ form.media }}
{% load crispy_forms_tags %}
<div data-htmx-modal-root>
  <div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
  <div id="modal" class="modal fade show" tabindex="-1" style="display:block;">
	<div class="{% block modal_dialog_class %}modal-dialog modal-lg modal-dialog-centered{% endblock %}">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="modal-invoice-title">{% block modal_title %}{{ modal_title | safe }}{% endblock %}</h5> {{ top_buttons }}
		</div>
		{% if unsold_lot_warning %}<div class="modal-header"><span class='text-warning text-dark'>{{ unsold_lot_warning }}</span></div>{% endif %}
		<div class="modal-body">
            <span class="">{{ tooltip|safe }}</span>
            {% if invoice %}{% include "auctions/partials/invoice_membership_renewal.html" %}{% endif %}
			{% block modal_body %}<p>{% crispy form form.helper %}</p>{% endblock %}
	  </div>
	  {% block modal_footer %}{% endblock %}
	</div>
  </div>
</div>
</div>
<script>window.mountHtmxModal(document.currentScript.previousElementSibling);</script>
{% block form_scripts %}
<script>
(function tryInit(retries) {
    // Wait for select2.full.js (jQuery.fn.select2) and autocomplete_light.min.js (yl) to load.
    // These are fetched asynchronously by HTMX even though they have no async attribute.
    if (typeof yl === 'undefined' || typeof jQuery === 'undefined' || !jQuery.fn.select2) {
        if (retries > 0) setTimeout(function() { tryInit(retries - 1); }, 100);
        return;
    }
    // select2.min.js registers yl.functions.select2 via a 'dal-init-function' event listener.
    // Dispatch the event now so it registers (harmless if already registered, guard prevents double-dispatch).
    if (!yl.functions || !yl.functions.select2) {
        document.dispatchEvent(new CustomEvent('dal-init-function'));
    }
    // If yl.functions.select2 is still missing, select2.min.js hasn't finished loading — retry.
    if (!yl.functions || !yl.functions.select2) {
        if (retries > 0) setTimeout(function() { tryInit(retries - 1); }, 100);
        return;
    }
    // Trigger DAL's load-time initialization (sets window.__dal__initialize, MutationObserver, etc.)
    // This callback never auto-fires for dynamically injected scripts since window.load already fired.
    if (!window.__dal__initialize) {
        window.dispatchEvent(new Event('load'));
    }
    // Initialize DAL widgets and any plain select2 multiselects in this modal
    setTimeout(function() {
        var $ = (window.django && django.jQuery) || jQuery;
        $('[data-autocomplete-light-function=select2]').not('.select2-hidden-accessible').each(function() {
            if (window.__dal__initialize) { window.__dal__initialize(this); }
            else { yl.functions.select2($, this); }
        });
        // Re-apply dropdownParent so the Select2 dropdown renders inside the modal
        // and isn't clipped by the modal's overflow.
        $('[data-autocomplete-light-function=select2].select2-hidden-accessible').each(function() {
            var $el = $(this);
            var opts = $.extend({}, $el.data('select2').options.options, { dropdownParent: $('#modal') });
            $el.select2('destroy').select2(opts);
        });
        $.fn.select2 && $('.js-services-multiselect').not('.select2-hidden-accessible').select2();
    }, 50);
})(30);
</script>
{{ extra_script }}
{% endblock %}