{% macro render_item(item) %}
    <li class="process-item status-{{ item.status }}">
        <div class="item-header">
            {% if item.children %}
                <button class="toggle-btn" onclick="toggleNode(this)" aria-label="Toggle children">
                    <span class="toggle-icon">▶</span>
                </button>
            {% else %}
                <span class="toggle-spacer"></span>
            {% endif %}
            <span hx-get="/content/{{ item.id }}" hx-target="#right-panel" hx-swap="innerHTML" class="item-name clickable">
                <span class="status-icon">
                    {% if item.status == 'completed' %}✅
                    {% elif item.status == 'in_progress' %}⏳
                    {% elif item.status == 'error' %}❌
                    {% else %}⏸️
                    {% endif %}
                </span>
                {{ item.name }}
            </span>
        </div>
        {% if item.children %}
            <ul class="item-children collapsed">
                {% for child in item.children %}
                    {{ render_item(child) }}
                {% endfor %}
            </ul>
        {% endif %}
    </li>
{% endmacro %}

<div id="overall-progress-bar" hx-swap-oob="true" style="width:{{ app_state.overall_progress }}%;"></div>
<span id="overall-progress-text" hx-swap-oob="true">{{ app_state.overall_progress }}% ({{ app_state.overall_status }})</span>

<div id="left-panel-content" hx-get="/status" hx-trigger="every 5s" hx-swap="innerHTML">
    <h2>Execution Status</h2>
    {% if tree %}
        <ul class="execution-tree">
            {% for item in tree %}
                {{ render_item(item) }}
            {% endfor %}
        </ul>
    {% else %}
        <p>No process running. Start a new one from the configuration.</p>
    {% endif %}
</div>