{# Inline form body for list/form toolbar actions (PvDialog). #}
<form class="space-y-4" data-pv-inline-action-form data-submit-url="{{ submit_url }}">
    <h3 class="text-base font-semibold text-heading">{{ title }}</h3>

    {% for field in fields %}
    {% set name = field.name %}
    {% set label = field.label or name %}
    {% set required = field.required %}
    {% set ftype = field.type or 'char' %}
    {% set value = field.value %}
    <label class="block text-sm">
        <span class="font-medium text-heading">{{ label }}</span>
        {% if required %}<span class="text-fg-danger">*</span>{% endif %}

        {% if ftype == 'boolean' %}
        <span class="mt-1 flex items-center gap-2">
            <input type="checkbox"
                   name="{{ name }}"
                   value="1"
                   class="rounded border-default w-3.5 h-3.5"
                   {% if value %}checked{% endif %}>
            <span class="text-body-subtle">{{ 'Yes' if value else 'No' }}</span>
        </span>
        {% elif ftype == 'many2one' %}
        <select name="{{ name }}"
                class="mt-1 w-full text-sm rounded-md border border-default px-3 py-2"
                {% if required %}required{% endif %}>
            <option value="">—</option>
            {% for opt in field.options or [] %}
            <option value="{{ opt.id }}"
                    {% if value is not none and value|string == opt.id|string %}selected{% endif %}>
                {{ opt.label }}
            </option>
            {% endfor %}
        </select>
        {% elif ftype == 'text' or field.multiline %}
        <textarea name="{{ name }}" rows="4"
                  class="mt-1 w-full text-sm rounded-md border border-default px-3 py-2"
                  {% if required %}required{% endif %}>{{ value if value is not none else '' }}</textarea>
        {% elif ftype == 'integer' %}
        <input type="number" name="{{ name }}"
               value="{{ value if value is not none else '' }}"
               class="mt-1 w-full text-sm rounded-md border border-default px-3 py-2"
               {% if required %}required{% endif %}>
        {% else %}
        <input type="text" name="{{ name }}"
               value="{{ value if value is not none else '' }}"
               class="mt-1 w-full text-sm rounded-md border border-default px-3 py-2"
               {% if required %}required{% endif %}>
        {% endif %}
    </label>
    {% endfor %}

    <p class="hidden text-sm text-fg-danger" data-pv-inline-action-error></p>

    <div class="flex justify-end gap-2 pt-2 border-t border-default">
        <button type="button"
                onclick="window.PvDialog && window.PvDialog.close()"
                class="px-3 py-1.5 text-sm rounded-md border border-default hover:bg-neutral-secondary">
            Cancel
        </button>
        <button type="submit"
                class="px-3 py-1.5 text-sm font-medium text-white rounded-md bg-fg-brand hover:opacity-90">
            {{ 'Save' if record_id else 'Create' }}
        </button>
    </div>
</form>

<script>
document.querySelectorAll('[data-pv-inline-action-form]').forEach((form) => {
    if (form.dataset.bound) return;
    form.dataset.bound = '1';

    form.addEventListener('submit', async (event) => {
        event.preventDefault();
        const errorEl = form.querySelector('[data-pv-inline-action-error]');
        if (errorEl) {
            errorEl.textContent = '';
            errorEl.classList.add('hidden');
        }

        const values = {};
        new FormData(form).forEach((raw, key) => {
            const input = form.querySelector(`[name="${key}"]`);
            if (input && input.type === 'checkbox') {
                values[key] = input.checked;
                return;
            }
            values[key] = raw;
        });
        form.querySelectorAll('input[type="checkbox"][name]').forEach((input) => {
            if (!(input.name in values)) values[input.name] = false;
        });

        try {
            const response = await fetch(form.dataset.submitUrl, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    Accept: 'application/json',
                    'X-CSRF-Token': window.pvCsrf ? window.pvCsrf() : '',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify(values),
            });

            let payload = null;
            try {
                payload = await response.json();
            } catch (_) {
                payload = null;
            }

            if (!response.ok) {
                const message = (payload && payload.message) || 'Could not save.';
                if (errorEl) {
                    errorEl.textContent = message;
                    errorEl.classList.remove('hidden');
                } else {
                    window.pvAlert && window.pvAlert(message, { variant: 'danger' });
                }
                return;
            }

            if (window.PvDialog) {
                window.PvDialog.close(payload);
            }
            window.dispatchEvent(new CustomEvent('pv-list-reload'));
        } catch (_) {
            const message = 'Could not save.';
            if (errorEl) {
                errorEl.textContent = message;
                errorEl.classList.remove('hidden');
            } else {
                window.pvAlert && window.pvAlert(message, { variant: 'danger' });
            }
        }
    });
});
</script>