{# Action form component: one action in a toolbox group (actions_panel.html sets action_id).
   Its row opens the form in place and drags onto the canvas; see action_handlers.js. #}
<div class="toolbox-action">
    <button class="toolbox-action-toggle" type="button" aria-expanded="false" aria-controls="{{ action_id }}"
            data-action="{{ name }}">
        <i class="bi bi-grip-vertical toolbox-grip" aria-hidden="true"></i>
        <span class="toolbox-action-name">{{ form.original_name if form.original_name else name | format_name }}</span>
        <i class="bi bi-chevron-down toolbox-chevron" aria-hidden="true"></i>
    </button>
    <div id="{{ action_id }}" class="toolbox-action-body" hidden>
            <form role="form" method='POST' action="{{ url_for('design.methods_handler', instrument=instrument) }}"
                name="add" id="add-{{ action_id }}" onsubmit="addMethodToDesign(event, this); return false;">
                <div class="form-group">
                    {{ form.hidden_tag() }}
                    {% for field in form %}
                        {% if field.type not in ['CSRFTokenField', 'HiddenField'] and field.name != 'return' and field.name
                        != 'ivoryos_batch_action' %}
                            <div class="input-group mb-3">
                                <label class="input-group-text">{{ field.label.text | format_name }}
                                    {% if field.flags.required %}
                                        <span class="text-danger ms-1">*</span>
                                    {% endif %}
                                </label>

                                {% if field.type == "SubmitField" %}
                                    {{ field(class="btn btn-dark") }}
                                {% elif field.type == "BooleanField" %}
                                    {{ field(class="form-check-input") }}
                                {% elif field.type in ["FlexibleEnumField", "FlexibleLiteralField"] %}
                                    <input type="text" id="{{ field.id }}" name="{{ field.name }}" value="{{ field._value() }}"
                                           list="{{ action_id }}-{{ field.id }}-options"
                                           placeholder="{{ field.render_kw.placeholder if field.render_kw and field.render_kw.placeholder }}"
                                           class="form-control" oninput="updateConsolidateVisibility(this)">
                                    {# per action, so two open groups with an Enum field of the same name keep their own choices #}
                                    <datalist id="{{ action_id }}-{{ field.id }}-options">
                                        {% for key in field.choices %}
                                            <option value="{{ key }}">{{ key }}</option>
                                        {% endfor %}
                                    </datalist>
                                {% else %}
                                    {{ field(class="form-control", list="variables_datalist",
                                    oninput="updateConsolidateVisibility(this)") }}
                                {% endif %}

                                {% if field.description and field.type != 'BooleanField' %}
                                    {# the field's safety limit: its unit and allowed range #}
                                    <span class="input-group-text small text-muted" title="Safety limit: {{ field.description }}">{{ field.description }}</span>
                                {% endif %}
                                {% if form.arg_types is defined and form.arg_types and form.arg_types.get(field.name) == 'list' %}
                                    <div class="input-group-text consolidate-wrapper" style="display: none;"
                                        title="Consolidate batch arguments">
                                        <input class="form-check-input mt-0" type="checkbox" name="ivoryos_consolidate_batch_args"
                                            value="{{ field.name }}" aria-label="Consolidate">
                                        <span class="ms-1 small">Consolidate</span>
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>

                {# Dynamic Arguments Section #}
                {% if form.has_kwargs %}
                <div class="mb-3 dynamic-args-container">
                    {# New args will be added here #}
                </div>
                <button type="button" class="btn btn-sm btn-outline-teal mb-3" onclick="addDynamicArg(this)">
                    <i class="bi bi-plus"></i> Add Parameter
                </button>
                {% endif %}

                {# Manual rendering of batch_action and return #}
                {% if form.ivoryos_batch_action %}
                <div class="input-group mb-3">
                    <label class="input-group-text">{{ form.ivoryos_batch_action.label.text | format_name }}</label>
                    {{ form.ivoryos_batch_action(class="form-check-input", onchange="handleBatchActionChange(this)") }}
                </div>
                {% endif %}

                {% if form.return %}
                <div class="input-group mb-3">
                    <label class="input-group-text">{{ form.return.label.text | format_name }}</label>
                    {{ form.return(class="form-control") }}
                </div>
                {% endif %}

                <button type="submit" class="btn btn-primary">Add</button>
                {% if 'hidden_name' in form %}
                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" data-bs-placement="top"
                       title='{{ form.hidden_name.description or "Docstring is not available" }}'>
                    </i>
                {% elif 'ivoryos_workflow_name' in form %}
                    <!-- handle info tooltip for flow control / workflows -->
                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" data-bs-placement="top"
                       title='{{ form.ivoryos_workflow_name.description or "Docstring is not available" }}'>
                    </i>
                {% endif %}
            </form>
    </div>
</div>