{# Action form component #}
<div class="accordion-item design-control">
    <h2 class="accordion-header">
        <button class="accordion-button collapsed draggable-action" type="button" data-bs-toggle="collapse"
            data-bs-target="#{{name}}" aria-expanded="false" aria-controls="collapseExample" data-action="{{ name }}">
            {{ form.original_name if form.original_name else name | format_name }}
        </button>
    </h2>
    <div id="{{name}}" class="accordion-collapse collapse" data-bs-parent="#accordionActions">
        <div class="accordion-body">
            <form role="form" method='POST' action="{{ url_for('design.methods_handler', instrument=instrument) }}"
                name="add" id="add-{{name}}" 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
                        != 'batch_action' and field.name != 'consolidate_batch_args' %}
                            <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 == "FlexibleEnumField" %}
                                    <input type="text" id="{{ field.id }}" name="{{ field.name }}" value="{{ field._value() }}"
                                           list="{{ field.id }}_options"
                                           placeholder="{{ field.render_kw.placeholder if field.render_kw and field.render_kw.placeholder }}"
                                           class="form-control" oninput="updateConsolidateVisibility(this)">
                                    <datalist 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 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="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.batch_action %}
                <div class="input-group mb-3">
                    <label class="input-group-text">{{ form.batch_action.label.text | format_name }}</label>
                    {{ form.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 '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.workflow_name.description or "Docstring is not available" }}'>
                    </i>
                {% endif %}
            </form>
        </div>
    </div>
</div>