{% macro render_item(item) %}
    <li class="process-item status-{{ item.status }}">
        <span hx-get="/content/{{ item.id }}" hx-target="#right-panel" hx-swap="innerHTML" class="item-name">{{ item.name }}</span>
        {% if item.children %}
            <ul>
                {% 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 2s" hx-swap="innerHTML">
    <h2>Execution Status</h2>
    {% if tree %}
        <ul>
            {% for item in tree %}
                {{ render_item(item) }}
            {% endfor %}
        </ul>
    {% else %}
        <p>No process running. Start a new one from the configuration.</p>
    {% endif %}
</div>