{% 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.datetime }}</li>
                    <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">
                        <label class="form-label">Сессия:</label>
                        <select
                            name="session"
                            hx-put="/api/tasks/{{task.id}}/change"
                            hx-trigger="change"
                            hx-confirm="Вы уверены, что хотите поменять сессию?"
                            hx-swap="none"
                            class="form-select form-select-lg mb-3"
                        >
                            {% for session in sessions %}
                                {% if task.session.name == session.name %}
                                    <option selected value="{{ session.id }}">{{ session.name }}</option>
                                {% else %}
                                    <option value="{{ session.id }}">{{ session.name }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </li>
                </ul>
            </div>
            <div class="card-footer">
                <div class="btn-group mx-2" role="group">
                    <button
                        hx-delete="/api/tasks/{{task.id}}"
                        hx-swap="delete"
                        hx-target='[data-task="{{ task.id }}"]'
                        hx-confirm="Вы уверены, что хотите удалить эту задачу?"
                        class="btn btn-outline-danger"
                    >
                        Удалить
                    </button>
                    <button hx-put="/api/tasks/{{task.id}}/stop" hx-swap="none" class="btn btn-outline-secondary">
                        Стоп
                    </button>
                    <button hx-put="/api/tasks/{{task.id}}/start" hx-swap="none" class="btn btn-outline-success">
                        Запустить
                    </button>
                </div>
            </div>
        </div>
    </div>
{% else %}
    <small id="helpId" class="form-text">Здесь ничего нет.</small>
{% endfor %}