{% extends "base.html" %}

{% block title %}任务列表{% endblock %}
{% block page_title %}任务列表{% endblock %}

{% block styles %}
<link href="{{ url_for('static', filename='css/pages/generate/tasks/list.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="tasks-container">
    <div class="tasks-header">
        <h2><i class="fas fa-tasks me-2"></i>我的任务</h2>
        <a href="{{ url_for('wizard.select_category') }}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i>新建任务
        </a>
    </div>
    
    <div class="tasks-list" id="tasksList">
        {% if tasks_by_category and sorted_category_ids %}
            <!-- 方向标签页 -->
            <ul class="nav nav-tabs category-tabs mb-4" role="tablist">
                {% for category_id in sorted_category_ids %}
                    {% set category = categories_dict.get(category_id, {}) %}
                    {% set category_name = category.get('name', category_id) %}
                    {% set category_icon = category.get('icon', 'folder') %}
                    {% set has_tasks = tasks_by_category.get(category_id, [])|length > 0 %}
                    {% if has_tasks or category_id in categories_dict %}
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {% if loop.first %}active{% endif %}" 
                                    id="tab-{{ category_id }}" 
                                    data-bs-toggle="tab" 
                                    data-bs-target="#panel-{{ category_id }}" 
                                    type="button" 
                                    role="tab">
                                <i class="{{ category_icon | icon_class }} me-2"></i>
                                {{ category_name }}
                                {% if has_tasks %}
                                    <span class="badge bg-primary ms-2">{{ tasks_by_category[category_id]|length }}</span>
                                {% endif %}
                            </button>
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
            
            <!-- 方向内容面板 -->
            <div class="tab-content">
                {% for category_id in sorted_category_ids %}
                    {% set category = categories_dict.get(category_id, {}) %}
                    {% set category_name = category.get('name', category_id) %}
                    {% set category_tasks = tasks_by_category.get(category_id, []) %}
                    {% if category_tasks|length > 0 or category_id in categories_dict %}
                        <div class="tab-pane fade {% if loop.first %}show active{% endif %}" 
                             id="panel-{{ category_id }}" 
                             role="tabpanel">
                            {% if category_tasks|length > 0 %}
                                <div class="row">
                                    {% for task_id, task in category_tasks %}
                                    <div class="col-md-6 col-lg-4 mb-3">
                                        <div class="task-card" data-task-id="{{ task_id }}" data-status="{{ task.status }}">
                                            <div class="task-card-header">
                                                <h5 class="task-name">{{ task.name }}</h5>
                                                <div class="task-status-group">
                                                    <span class="task-status badge 
                                                        {% if task.status == 'completed' %}bg-success
                                                        {% elif task.status == 'failed' %}bg-danger
                                                        {% elif task.status == 'cancelled' %}bg-secondary
                                                        {% else %}bg-primary{% endif %}">
                                                        {% if task.status == 'completed' %}已完成
                                                        {% elif task.status == 'failed' %}失败
                                                        {% elif task.status == 'cancelled' %}已取消
                                                        {% else %}运行中{% endif %}
                                                    </span>
                                                    {% if task.status == 'running' %}
                                                    <span class="task-running-indicator">
                                                        <i class="fas fa-circle-notch fa-spin"></i>
                                                    </span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="task-card-body">
                                                <div class="task-info">
                                                    <small class="text-muted">
                                                        <i class="fas fa-clock me-1"></i>
                                                        {{ task.created_at.strftime('%Y-%m-%d %H:%M:%S') if task.created_at else '未知时间' }}
                                                    </small>
                                                </div>
                                            </div>
                                            <div class="task-card-footer">
                                                <a href="{{ url_for('generate_tasks.task_detail', task_id=task_id) }}" class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye me-1"></i>查看详情
                                                </a>
                                                {% if task.challenge_id %}
                                                <a href="{{ url_for('generate_result.index', challenge_id=task.challenge_id) }}" class="btn btn-sm btn-outline-success">
                                                    <i class="fas fa-folder-open me-1"></i>查看结果
                                                </a>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="empty-state-category">
                                    <i class="{{ category.get('icon', 'folder') | icon_class }}"></i>
                                    <h4>暂无 {{ category_name }} 任务</h4>
                                    <p>该方向还没有生成任何题目</p>
                                    {% if category.get('enabled') %}
                                    <a href="{{ url_for('wizard.dynamic_wizard', category_id=category_id) }}" class="btn btn-primary">
                                        <i class="fas fa-plus me-2"></i>创建 {{ category_name }} 任务
                                    </a>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-state">
                <i class="fas fa-tasks"></i>
                <h4>暂无任务</h4>
                <p>点击"新建任务"开始生成题目</p>
                <a href="{{ url_for('wizard.select_category') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>新建任务
                </a>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/pages/generate/tasks/list.js') }}"></script>
{% endblock %}