{# The toolbox: what can be added to the workflow. Flow control, each instrument, each method
   category and the workflows sit under a divider of their own, which folds them away when
   clicked. Every group's actions load with the page, folded or not, so opening one is
   instant (see action_handlers.js). #}
{% macro group(key, label, open=True) %}
    {% set group_id = 'toolbox-' ~ (key | replace('.', '-')) %}
    <div class="toolbox-group">
        <button class="toolbox-divider" type="button"
                aria-expanded="{{ 'true' if open else 'false' }}" aria-controls="{{ group_id }}">
            <span>{{ label }}</span>
            <i class="bi bi-chevron-down toolbox-chevron" aria-hidden="true"></i>
        </button>
        <div id="{{ group_id }}" class="toolbox-group-body"{{ '' if open else ' hidden' }}>
            <div class="toolbox-actions" data-url="{{ url_for('design.get_operation_sidebar', instrument=key) }}">
                <div class="small text-muted py-2 px-3">Loading…</div>
            </div>
        </div>
    </div>
{% endmacro %}

<div class="toolbox" id="toolbox">
    {% if design_agent_enabled %}
        <div class="accordion accordion-flush mb-2">
            {% include 'components/design_agent_panel.html' %}
        </div>
    {% endif %}

    {% include 'components/autofill_toggle.html' %}

    {{ group('flow_control', 'Flow control', open=False) }}

    {% for instrument in defined_variables %}
        {{ group(instrument, instrument | format_name) }}
    {% else %}
        <div class="small text-muted px-2 my-2">No instruments on this deck.</div>
    {% endfor %}

    {% for instrument in local_variables %}
        {{ group(instrument, instrument) }}
    {% endfor %}

    {% for category in block_variables %}
        {{ group(category, category | format_name) }}
    {% endfor %}

    {{ group('workflows', 'Workflows') }}

    {# the workflow's variables, suggested in every action's fields; refreshed as steps are added #}
    <datalist id="variables_datalist">
        {% if script %}
            {% for var_name in script.get_autocomplete_variables() %}
                <option value="{{ var_name }}">{{ var_name }}</option>
            {% endfor %}
        {% endif %}
    </datalist>
</div>