{% load i18n htmx_admin_tags %}
<div id="htmx-modal" class="modal-backdrop {% if is_grappelli %}grp-modal{% endif %}">
    <div class="modal-dialog {% if is_grappelli %}grp-module{% endif %}">
        <div class="modal-header">
            <h3>
                {% if object %}
                    {% translate "Edit" %} {{ opts.verbose_name|title }}
                {% else %}
                    {% translate "Add" %} {{ opts.verbose_name|title }}
                {% endif %}
            </h3>
            <button type="button" class="modal-close" onclick="document.getElementById('htmx-modal').remove()">&times;</button>
        </div>

        <form hx-post="{% if object %}{% htmx_modal_url opts object.pk %}{% else %}{% htmx_modal_url opts 'add' %}{% endif %}"
              hx-target="#htmx-modal"
              hx-swap="outerHTML">
            {% csrf_token %}

            <div class="modal-body">
                {% if form.non_field_errors %}
                <div class="errornote">
                    {% for error in form.non_field_errors %}
                    <p>{{ error }}</p>
                    {% endfor %}
                </div>
                {% endif %}

                {% for field in form %}
                <div class="form-row{% if field.errors %} errors{% endif %}">
                    <div class="field-box">
                        {{ field.label_tag }}
                        {{ field }}
                        {% if field.help_text %}
                        <p class="help">{{ field.help_text|safe }}</p>
                        {% endif %}
                        {% if field.errors %}
                        <ul class="errorlist">
                            {% for error in field.errors %}
                            <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>

            <div class="modal-footer">
                <button type="button" class="btn-cancel" onclick="document.getElementById('htmx-modal').remove()">
                    {% translate "Cancel" %}
                </button>
                <button type="submit" class="btn-save">
                    {% translate "Save" %}
                </button>
            </div>
        </form>
    </div>
</div>