{% extends "base.html" %}
{% set show_nav = true %}

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

{% block content %}
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col">
            <h2>发布组任务列表</h2>
        </div>
        <div class="col text-end admin-only" style="display:none;">
            <a href="/tasks/create" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> 创建任务
            </a>
        </div>
    </div>
    
    <!-- 筛选器 -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">状态</label>
                    <select id="filter-status" class="form-select">
                        <option value="">全部</option>
                        <option value="pending">待认领</option>
                        <option value="claimed">已认领</option>
                        <option value="completed">已完成</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">查看范围</label>
                    <select id="filter-scope" class="form-select">
                        <option value="all">全部任务</option>
                        <option value="my">我的任务</option>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button class="btn btn-primary" onclick="loadTasks()">
                        <i class="bi bi-search"></i> 查询
                    </button>
                    <button class="btn btn-secondary ms-2" onclick="resetFilters()">
                        <i class="bi bi-arrow-clockwise"></i> 重置
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 任务表格 -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>剧集名称</th>
                            <th>更新日期</th>
                            <th>优先级</th>
                            <th>状态</th>
                            <th>认领人</th>
                            <th>种子ID</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="task-list">
                        <tr>
                            <td colspan="9" class="text-center">加载中...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            <nav>
                <ul class="pagination justify-content-center" id="pagination">
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 认领任务模态框 -->
<div class="modal fade" id="claimModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">认领任务</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="claim-form">
                    <input type="hidden" id="claim-task-id">
                    <div class="mb-3">
                        <label class="form-label">认领备注（可选）</label>
                        <textarea class="form-control" id="claim-note" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitClaim()">确认认领</button>
            </div>
        </div>
    </div>
</div>

<!-- 完成任务模态框 -->
<div class="modal fade" id="completeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">完成任务</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="complete-form">
                    <input type="hidden" id="complete-task-id">
                    <div class="mb-3">
                        <label class="form-label">种子ID <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="torrent-id" required placeholder="例如：12345">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">完成备注（可选）</label>
                        <textarea class="form-control" id="complete-note" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" onclick="submitComplete()">确认完成</button>
            </div>
        </div>
    </div>
</div>

<!-- 任务详情模态框 -->
<div class="modal fade" id="detailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">任务详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="task-detail">
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/task_list.js') }}"></script>
{% endblock %}