{% extends "admin/base.html" %}

{% block title %}待办事项管理{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">
        <i class="fas fa-tasks me-2"></i>待办事项管理
        {% if filtered %}
            <small class="text-muted">- {{ device.name or device.device_id }}</small>
        {% endif %}
    </h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <a href="/admin/todos/add{% if filtered %}?device_id={{ device.device_id }}{% endif %}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-plus me-1"></i>添加待办事项
            </a>
        </div>
        {% if not filtered %}
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-filter me-1"></i>筛选设备
            </button>
            <ul class="dropdown-menu">
                {% for device in devices %}
                <li><a class="dropdown-item" href="/admin/todos?device_id={{ device.device_id }}">{{ device.name or device.device_id }}</a></li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>
</div>

{% if filtered %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/admin/todos">所有待办事项</a></li>
        <li class="breadcrumb-item active">{{ device.name or device.device_id }}</li>
    </ol>
</nav>
{% endif %}

<div class="row">
    <div class="col-12">
        {% if filtered %}
            {% if todos %}
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-list me-2"></i>待办事项列表
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>标题</th>
                                        <th>描述</th>
                                        <th>截止时间</th>
                                        <th>状态</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for todo in todos %}
                                    <tr>
                                        <td>
                                            <a href="/admin/todos/{{ todo.id }}" class="text-decoration-none">
                                                {{ todo.title }}
                                            </a>
                                        </td>
                                        <td>{{ todo.description or '-' }}</td>
                                        <td>
                                            {% if todo.due_date %}
                                                {{ todo.due_date.strftime('%Y-%m-%d %H:%M') }}
                                            {% else %}
                                                -
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if todo.is_completed %}
                                                <span class="badge bg-success">已完成</span>
                                                {% if todo.completed_at %}
                                                    <small class="text-muted d-block">{{ todo.completed_at.strftime('%Y-%m-%d %H:%M') }}</small>
                                                {% endif %}
                                            {% else %}
                                                <span class="badge bg-warning">未完成</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ todo.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <a href="/admin/todos/{{ todo.id }}" class="btn btn-outline-primary" title="查看详情">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <form method="post" action="/admin/todos/{{ todo.id }}/toggle" style="display: inline;">
                                                    <button type="submit" class="btn {% if todo.is_completed %}btn-outline-warning{% else %}btn-outline-success{% endif %}" title="{% if todo.is_completed %}标记为未完成{% else %}标记为已完成{% endif %}">
                                                        <i class="fas {% if todo.is_completed %}fa-undo{% else %}fa-check{% endif %}"></i>
                                                    </button>
                                                </form>
                                                <form method="post" action="/admin/todos/{{ todo.id }}/delete" style="display: inline;" onsubmit="return confirm('确定要删除这个待办事项吗？');">
                                                    <button type="submit" class="btn btn-outline-danger" title="删除">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="card">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">该设备暂无待办事项</h5>
                        <p class="text-muted">点击上方按钮添加第一个待办事项</p>
                        <a href="/admin/todos/add?device_id={{ device.device_id }}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i>添加待办事项
                        </a>
                    </div>
                </div>
            {% endif %}
        {% else %}
            {% if todo_list %}
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-list me-2"></i>所有待办事项
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>标题</th>
                                        <th>设备</th>
                                        <th>描述</th>
                                        <th>截止时间</th>
                                        <th>状态</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in todo_list %}
                                    <tr>
                                        <td>
                                            <a href="/admin/todos/{{ item.todo.id }}" class="text-decoration-none">
                                                {{ item.todo.title }}
                                            </a>
                                        </td>
                                        <td>
                                            <a href="/admin/devices/{{ item.device.device_id }}" class="text-decoration-none">
                                                {{ item.device.name or item.device.device_id }}
                                            </a>
                                        </td>
                                        <td>{{ item.todo.description or '-' }}</td>
                                        <td>
                                            {% if item.todo.due_date %}
                                                {{ item.todo.due_date.strftime('%Y-%m-%d %H:%M') }}
                                            {% else %}
                                                -
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if item.todo.is_completed %}
                                                <span class="badge bg-success">已完成</span>
                                                {% if item.todo.completed_at %}
                                                    <small class="text-muted d-block">{{ item.todo.completed_at.strftime('%Y-%m-%d %H:%M') }}</small>
                                                {% endif %}
                                            {% else %}
                                                <span class="badge bg-warning">未完成</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ item.todo.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <a href="/admin/todos/{{ item.todo.id }}" class="btn btn-outline-primary" title="查看详情">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <form method="post" action="/admin/todos/{{ item.todo.id }}/toggle" style="display: inline;">
                                                    <button type="submit" class="btn {% if item.todo.is_completed %}btn-outline-warning{% else %}btn-outline-success{% endif %}" title="{% if item.todo.is_completed %}标记为未完成{% else %}标记为已完成{% endif %}">
                                                        <i class="fas {% if item.todo.is_completed %}fa-undo{% else %}fa-check{% endif %}"></i>
                                                    </button>
                                                </form>
                                                <form method="post" action="/admin/todos/{{ item.todo.id }}/delete" style="display: inline;" onsubmit="return confirm('确定要删除这个待办事项吗？');">
                                                    <button type="submit" class="btn btn-outline-danger" title="删除">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="card">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">暂无待办事项</h5>
                        <p class="text-muted">点击上方按钮添加第一个待办事项</p>
                        <a href="/admin/todos/add" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i>添加待办事项
                        </a>
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>
</div>
{% endblock %}