{% for task_name, task in tasks.items() %}
<tr id="task-row-{{ task_name }}">
    <td class="w-25">{{ task_name }}</td>
    <td class="w-50">{{ task.state }}</td>
    <td>
        {% if task.info.percent %}
        <div class="progress" style="height: 20px;">
            <div 
                class="progress-bar {% if task.info.percent|round(0) == 100 %}bg-success{% else %}bg-primary{% endif %}" 
                role="progressbar" 
                style="width: {{ task.info.percent|round(2) }}%;" 
                aria-valuenow="{{ task.info.percent|round(2) }}" 
                aria-valuemin="0" 
                aria-valuemax="100">
                {{ task.info.percent|round(2) }}%
            </div>
        </div>
        {% else %}
        <span class="text-muted">N/A</span>
        {% endif %}
    </td>
    <td>
        <div>
            <button hx-post="/run_task/{{ task_name }}" 
                    hx-target="#task-row-{{ task_name }}" 
                    hx-swap="outerHTML"
                    class="btn btn-primary">
                Run Task
            </button>
        </div>
    </td>
</tr>
{% endfor %}