{% for task in tasks %}
    <div data-task="{{ task.id }}" class="col mb-3">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">{{ task.name }}</h3>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Статус: {{ task.status }}</li>
                    <li class="list-group-item">Сообщение: {{ task.status_message }}</li>
                    <li class="list-group-item">Действие: {{ task.type }}</li>
                    <li class="list-group-item">Сессия: {{ task.session.name }}</li>
                </ul>
            </div>
            <div class="card-body">
                <button
                    hx-delete="/api/tasks/{{task.id}}"
                    hx-swap="delete"
                    hx-target='[data-task="{{ task.id }}"]'
                    hx-confirm="Вы уверены, что хотите удалить эту задачу?"
                    class="btn btn-outline-danger mt-2 mx-2"
                >
                    Удалить
                </button>
                <button hx-put="/api/tasks/{{task.id}}/stop" hx-swap="none" class="btn btn-outline-secondary mt-2 mx-2">
                    Стоп
                </button>
                <button hx-put="/api/tasks/{{task.id}}/start" hx-swap="none" class="btn btn-outline-success mt-2 mx-2">
                    Запустить
                </button>
            </div>
        </div>
    </div>
{% else %}
    <small id="helpId" class="form-text">Здесь ничего нет.</small>
{% endfor %}