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

{# Initialize date/time widgets - convert to HTML5 native inputs #}
<script>
(function() {
    var modal = document.getElementById('htmx-modal');
    if (!modal) return;

    // Convert Django's text inputs to HTML5 date/time inputs for better UX
    // DateField inputs have class 'vDateField'
    modal.querySelectorAll('input.vDateField').forEach(function(input) {
        if (input.type === 'text') {
            var value = input.value;
            input.type = 'date';
            if (value) {
                // Django uses YYYY-MM-DD format which is already correct for HTML5 date
                input.value = value;
            }
        }
    });

    // TimeField inputs have class 'vTimeField'
    modal.querySelectorAll('input.vTimeField').forEach(function(input) {
        if (input.type === 'text') {
            var value = input.value;
            input.type = 'time';
            if (value) {
                // Handle HH:MM:SS format - trim seconds for HTML5 time input
                var timeParts = value.split(':');
                if (timeParts.length >= 2) {
                    input.value = timeParts[0].padStart(2, '0') + ':' + timeParts[1].padStart(2, '0');
                }
            }
        }
    });

    // DateTimeField in Django admin is split into two inputs:
    // - Date part: input[name$="_0"] with class vDateField
    // - Time part: input[name$="_1"] with class vTimeField
    // These are already handled by the above code

    // Also try to initialize Django's built-in calendar widgets if available
    if (typeof DateTimeShortcuts !== 'undefined') {
        try {
            DateTimeShortcuts.init();
        } catch (e) {
            // Ignore errors - HTML5 inputs will work as fallback
        }
    }
})();
</script>

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