{% 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>

{% if prepopulated_fields and not object %}
<script>
(function() {
    // Slugify function - converts text to URL-safe slug
    function slugify(text) {
        return text
            .toString()
            .toLowerCase()
            .trim()
            .replace(/\s+/g, '-')        // Replace spaces with -
            .replace(/[^\w\-]+/g, '')    // Remove all non-word chars except -
            .replace(/\-\-+/g, '-')      // Replace multiple - with single -
            .replace(/^-+/, '')          // Trim - from start
            .replace(/-+$/, '');         // Trim - from end
    }

    // Setup prepopulated fields
    var prepopulatedFields = {
        {% for target, sources in prepopulated_fields.items %}
        "{{ target }}": [{% for src in sources %}"{{ src }}"{% if not forloop.last %}, {% endif %}{% endfor %}]{% if not forloop.last %},{% endif %}
        {% endfor %}
    };

    for (var targetField in prepopulatedFields) {
        if (prepopulatedFields.hasOwnProperty(targetField)) {
            (function(targetField) {
                var sourceFields = prepopulatedFields[targetField];
                var targetInput = document.getElementById('id_' + targetField);

                if (targetInput && !targetInput.value) {
                    // Mark as prepopulated (can be edited manually)
                    targetInput.dataset.prepopulated = 'true';

                    // Add event listeners to source fields
                    sourceFields.forEach(function(sourceField) {
                        var sourceInput = document.getElementById('id_' + sourceField);
                        if (sourceInput) {
                            sourceInput.addEventListener('input', function() {
                                if (targetInput.dataset.prepopulated === 'true') {
                                    // Combine values from all source fields
                                    var values = [];
                                    sourceFields.forEach(function(sf) {
                                        var input = document.getElementById('id_' + sf);
                                        if (input && input.value) {
                                            values.push(input.value);
                                        }
                                    });
                                    targetInput.value = slugify(values.join(' '));
                                }
                            });
                        }
                    });

                    // Stop auto-populating if user manually edits the target field
                    targetInput.addEventListener('input', function() {
                        this.dataset.prepopulated = 'false';
                    });
                }
            })(targetField);
        }
    }
})();
</script>
{% endif %}