{# Operations panel component #}
<div style="margin-bottom: 4vh;"></div>
<div class="accordion accordion-flush">
    {% if design_agent_enabled %}
    {% include 'components/design_agent_panel.html' %}
    {% endif %}
    <div class="accordion-item design-control">
        <h5 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#flow" role="button"
                aria-expanded="false" aria-controls="collapseExample">
                Flow control
            </button>
        </h5>
        <div class="accordion-collapse collapse show" id="flow">
            <ul class="list-group">
                <button class="list-group-item list-group-item-action"
                        type="button"
                        name="device"
                        value="flow_control"
                        data-get-url="{{ url_for('design.get_operation_sidebar', instrument='flow_control') }}"
                        onclick="updateInstrumentPanel(this)">
                    Flow control
                </button>
            </ul>
        </div>
        <h5 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#deck" role="button"
                aria-expanded="false" aria-controls="collapseExample">
                Instruments
            </button>
        </h5>
        <div class="accordion-collapse collapse show" id="deck">
            <ul class="list-group">
                {% for instrument in defined_variables %}
                        <button class="list-group-item list-group-item-action"
                                type="button"
                                name="device"
                                value="{{instrument}}"
                                data-get-url="{{ url_for('design.get_operation_sidebar', instrument=instrument) }}"
                                onclick="updateInstrumentPanel(this)">
                            {{ instrument | format_name }}
                        </button>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="accordion-item design-control">
        <h5 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#workflow" role="button"
                aria-expanded="false" aria-controls="collapseExample">
                Workflows
            </button>
        </h5>
        <div class="accordion-collapse collapse show" id="workflow">
            <ul class="list-group">
                <button class="list-group-item list-group-item-action" type="button" name="device" value="workflows"
                    data-get-url="{{ url_for('design.get_operation_sidebar', instrument='workflows') }}"
                    onclick="updateInstrumentPanel(this)">
                    Workflows
                </button>
            </ul>
        </div>
    </div>
    {% if block_variables %}
    <div class="accordion-item  design-control">
        <h5 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#block" role="button"
                aria-expanded="false" aria-controls="collapseExample">
                Methods
            </button>
        </h5>
        <div class="accordion-collapse collapse show" id="block">
            <ul class="list-group">
                {% for category in block_variables %}
                <button class="list-group-item list-group-item-action" type="button" name="device" value="{{category}}"
                    data-get-url="{{ url_for('design.get_operation_sidebar', instrument=category) }}"
                    onclick="updateInstrumentPanel(this)">
                    {{ category|format_name }}
                </button>
                {% endfor%}
            </ul>
        </div>
    </div>
    {% endif %}
    {% if local_variables %}
        <div class="accordion-item  design-control">
            <h5 class="accordion-header">
                <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#local" role="button"
                    aria-expanded="false" aria-controls="collapseExample">
                    Temp instruments
                </button>
            </h5>
            <div class="accordion-collapse collapse show" id="local">
                <ul class="list-group">
                    {% for instrument in local_variables %}
                        <button class="list-group-item list-group-item-action"
                                type="button"
                                name="device"
                                value="{{instrument}}"
                                data-get-url="{{ url_for('design.get_operation_sidebar', instrument=instrument) }}"
                                onclick="updateInstrumentPanel(this)">
                            {{instrument}}
                        </button>
                    {% endfor%}
                </ul>
            </div>
        </div>
    {% endif %}
</div>