{% extends 'core/base.html' %}

{% block content %}
<h2>家庭事项</h2>

<!-- 添加事项按钮 -->
<div class="mb-4">
    <a href="{% url 'add_family_task' %}" class="btn btn-primary">添加家庭事项</a>
</div>

<div class="card">
    <div class="card-header bg-primary text-white">
        <h5 class="card-title mb-0">家庭事项列表</h5>
    </div>
    <div class="card-body">
        {% if tasks %}
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>类型</th>
                    <th>内容</th>
                    <th>优先级</th>
                    <th>状态</th>
                    <th>截止日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for task in tasks %}
                <tr>
                    <td>{{ task.get_type_display }}</td>
                    <td>{{ task.content }}</td>
                    <td>
                        <span class="badge {% if task.priority == 'high' %}bg-danger{% elif task.priority == 'medium' %}bg-warning{% else %}bg-info{% endif %}">
                            {{ task.get_priority_display }}
                        </span>
                    </td>
                    <td>
                        <span class="badge {% if task.status == 'completed' %}bg-success{% else %}bg-warning{% endif %}">
                            {{ task.get_status_display }}
                        </span>
                    </td>
                    <td>{{ task.deadline|default:"-" }}</td>
                    <td>
                        <a href="{% url 'edit_family_task' task.id %}" class="btn btn-sm btn-warning" title="编辑">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <a href="{% url 'delete_family_task' task.id %}" class="btn btn-sm btn-danger" title="删除">
                            <i class="bi bi-trash"></i>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="text-muted">还没有家庭事项，点击上方按钮添加</p>
        {% endif %}
    </div>
</div>
{% endblock %}