{# HTMX fragment loaded into PvDialog for workflow transition stage forms. #}
<form class="space-y-4"
      hx-post="{{ post_url }}"
      hx-target="closest [data-pv-form-shell]"
      hx-swap="innerHTML">
    {% if form_error %}
    <div class="px-3 py-2 rounded-md bg-danger-soft border border-fg-danger/30 text-fg-danger text-sm">
        {{ form_error }}
    </div>
    {% endif %}

    {% for ff in form_fields %}
    <label class="block text-sm">
        <span class="font-medium text-heading">{{ ff.label or ff.name }}</span>
        {% if ff.required %}<span class="text-fg-danger">*</span>{% endif %}
        {% set val = values.get(ff.name, '') %}
        {% set ftype = ff.type or 'char' %}
        {% if ftype == 'text' %}
        <textarea name="{{ ff.name }}" rows="4" placeholder="{{ ff.placeholder or '' }}"
                  class="mt-1 w-full text-sm rounded-md border border-default px-3 py-2
                         {% if errors.get(ff.name) %}border-fg-danger{% endif %}"
                  {% if ff.required %}required{% endif %}>{{ val }}</textarea>
        {% elif ftype == 'boolean' %}
        <div class="mt-2">
            <label class="inline-flex items-center gap-2">
                <input type="checkbox" name="{{ ff.name }}" value="1"
                       class="rounded border-default"
                       {% if val in (True, '1', 'true', 'on') %}checked{% endif %}
                       {% if ff.required %}required{% endif %}>
                <span class="text-body">{{ ff.help or 'Yes' }}</span>
            </label>
        </div>
        {% elif ftype == 'integer' %}
        <input type="number" step="1" name="{{ ff.name }}" value="{{ val }}"
               placeholder="{{ ff.placeholder or '' }}"
               class="mt-1 w-full text-sm rounded-md border border-default px-3 py-2
                      {% if errors.get(ff.name) %}border-fg-danger{% endif %}"
               {% if ff.required %}required{% endif %}>
        {% elif ftype == 'float' %}
        <input type="number" step="any" name="{{ ff.name }}" value="{{ val }}"
               placeholder="{{ ff.placeholder or '' }}"
               class="mt-1 w-full text-sm rounded-md border border-default px-3 py-2
                      {% if errors.get(ff.name) %}border-fg-danger{% endif %}"
               {% if ff.required %}required{% endif %}>
        {% elif ftype == 'date' %}
        <input type="date" name="{{ ff.name }}" value="{{ val }}"
               class="mt-1 w-full text-sm rounded-md border border-default px-3 py-2
                      {% if errors.get(ff.name) %}border-fg-danger{% endif %}"
               {% if ff.required %}required{% endif %}>
        {% elif ftype == 'datetime' %}
        <input type="datetime-local" name="{{ ff.name }}" value="{{ val }}"
               class="mt-1 w-full text-sm rounded-md border border-default px-3 py-2
                      {% if errors.get(ff.name) %}border-fg-danger{% endif %}"
               {% if ff.required %}required{% endif %}>
        {% elif ftype == 'selection' and ff.options %}
        <select name="{{ ff.name }}"
                class="mt-1 w-full text-sm rounded-md border border-default px-3 py-2
                       {% if errors.get(ff.name) %}border-fg-danger{% endif %}"
                {% if ff.required %}required{% endif %}>
            {% if not ff.required %}<option value="">—</option>{% endif %}
            {% for opt in ff.options %}
            <option value="{{ opt[0] if opt is sequence else opt }}"
                    {% if val == (opt[0] if opt is sequence else opt) %}selected{% endif %}>
                {{ opt[1] if opt is sequence else opt }}
            </option>
            {% endfor %}
        </select>
        {% else %}
        <input type="text" name="{{ ff.name }}" value="{{ val }}"
               placeholder="{{ ff.placeholder or '' }}"
               class="mt-1 w-full text-sm rounded-md border border-default px-3 py-2
                      {% if errors.get(ff.name) %}border-fg-danger{% endif %}"
               {% if ff.required %}required{% endif %}>
        {% endif %}
        {% if ff.help and ftype != 'boolean' %}
        <p class="mt-1 text-xs text-body-subtle">{{ ff.help }}</p>
        {% endif %}
        {% if errors.get(ff.name) %}
        <p class="mt-1 text-xs text-fg-danger">{{ errors[ff.name] }}</p>
        {% endif %}
    </label>
    {% endfor %}

    <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">
            Continue
        </button>
    </div>
</form>