{% load helpers %}
{% load form_helpers %}

<div class="mb-10 d-md-flex justify-content-center{% if field.errors %} has-error{% endif %}{% if container_class %} {{ container_class }}{% endif %}">
    {% if field|widget_type == 'checkboxinput' %}
        <div class="col-md-9 offset-md-3">
            <div class="form-check mt-6{% if field.errors %} has-error{% endif %}">
                {{ field }}
                <label class="form-check-label" for="{{ field.id_for_label }}">
                    {{ field.label }}
                </label>
            </div>
            {% if bulk_nullable %}
                <div class="form-check mt-6">
                    <input class="form-check-input" id="{{ field.id_for_label }}_nullify" name="_nullify" type="checkbox" value="{{ field.name }}">
                    <label class="form-check-label" for="{{ field.id_for_label }}_nullify">Set null</label>
                </div>
            {% endif %}
            {% if field.help_text %}
                <span class="form-text">{{ field.help_text|safe }}</span>
            {% endif %}
    {% elif field|widget_type == 'textarea' and not field.label %}
        <div class="col-md-12">
            {{ field }}
            {% if bulk_nullable %}
                <div class="form-check mt-6">
                    <input class="form-check-input" id="{{ field.id_for_label }}_nullify" name="_nullify" type="checkbox" value="{{ field.name }}">
                    <label class="form-check-label" for="{{ field.id_for_label }}_nullify">Set null</label>
                </div>
            {% endif %}
            {% if field.help_text %}
                <span class="form-text">{{ field.help_text|safe }}</span>
            {% endif %}
    {% else %}
        <label class="col-md-3 col-form-label{% if field.field.required %} nb-required{% endif %}" for="{{ field.id_for_label }}">
            {{ field.label }}
        </label>
        <div class="col-md-9{% if should_render_embedded_create or should_render_embedded_search %} align-items-start d-flex gap-8 flex-wrap{% endif %}">
            {% if should_render_embedded_create or should_render_embedded_search %}
                <div class="flex-grow-1 nb-w-0">{{ field }}</div>
                {% if should_render_embedded_create %}
                    {% with verbose_name=field.field.queryset.model|meta:"verbose_name" %}
                        <span data-bs-title="Add a new {{ verbose_name }}" data-bs-toggle="tooltip" data-bs-trigger="hover">
                            <button
                                class="btn btn-primary flex-grow-0 flex-shrink-0"
                                data-bs-toggle="modal"
                                data-bs-target="#embedded_action_modal"
                                hx-get="{% url field.field.queryset.model|viewname:'add' %}{% if embedded_create_query_string %}?{{ embedded_create_query_string }}{% endif %}"
                                hx-on:htmx:trigger="window.nb?.embeddedAction?.handleStart?.({ targetFieldName: '{{ field.name }}' });"
                                hx-target="#embedded_action_modal .modal-content"
                                type="button"
                                {% if field.field.disabled %}disabled=""{% endif %}
                            >
                                <span class="mdi mdi-plus-thick"></span>
                                <span class="visually-hidden">Add a new {{ verbose_name }}</span>
                            </button>
                        </span>
                    {% endwith %}
                {% endif %}
                {% if should_render_embedded_search %}
                    {% with verbose_name_plural=field.field.queryset.model|meta:"verbose_name_plural" %}
                        <span data-bs-title="Search {{ verbose_name_plural }}" data-bs-toggle="tooltip" data-bs-trigger="hover">
                            <button
                                class="btn btn-secondary flex-grow-0 flex-shrink-0"
                                data-bs-toggle="modal"
                                data-bs-target="#embedded_action_modal"
                                hx-get="{% url 'search_content_type' content_type=embedded_search_content_type %}{% if embedded_search_query_string %}?{{ embedded_search_query_string }}{% endif %}"
                                hx-on:htmx:trigger="window.nb?.embeddedAction?.handleStart?.({ targetFieldName: '{{ field.name }}' });"
                                hx-target="#embedded_action_modal .modal-content"
                                type="button"
                                {% if field.field.disabled %}disabled=""{% endif %}
                            >
                                <span class="mdi mdi-filter"></span>
                                <span class="visually-hidden">Search {{ verbose_name_plural }}</span>
                            </button>
                        </span>
                    {% endwith %}
                {% endif %}
            {% else %}
                {{ field }}
            {% endif %}
            {% if bulk_nullable %}
                <div class="form-check mt-6 w-100">
                    <input class="form-check-input" id="{{ field.id_for_label }}_nullify" name="_nullify" type="checkbox" value="{{ field.name }}">
                    <label class="form-check-label" for="{{ field.id_for_label }}_nullify">Set null</label>
                </div>
            {% endif %}
            {% if field.help_text %}
                <span class="form-text w-100">{{ field.help_text|safe }}</span>
            {% endif %}
    {% endif %}
    {% if field.errors %}
        <ul class="mb-0 mt-4 w-100">
            {% for error in field.errors %}
                {# Embed an HTML comment indicating the error for extraction by tests #}
                <!-- FORM-ERROR {{ field.name }}: {{ error }} -->
                <li class="text-danger">{{ error }}</li>
            {% endfor %}
        </ul>
    {% endif %}
</div>
</div>