{% extends "base.html" %}
{% block title %}留言管理{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2>用户留言管理</h2>
    
    <table class="table table-striped">
        <thead>
            <tr>
                <th>用户ID</th>
                <th>用户名</th>
                <th>留言内容</th>
                <th>留言时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for message in messages %}
            <tr>
                <td>{{ message.user_id }}</td>
                <td>{{ message.username }}</td>
                <td>{{ message.message_content }}</td>
                <td>{{ message.created_at }}</td>
                <td>
                    <button class="btn btn-danger btn-sm" 
                            onclick="deleteMessage({{ message.message_id }})">删除</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
function deleteMessage(messageId) {
    if (confirm('确定删除这条留言吗？')) {
        // 调用Flask路由
        fetch(`/admin/messages/${messageId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer {{ session.token }}'
            }
        })
        .then(response => {
            if (response.ok) {
                location.reload();
            } else if (response.status === 403) {
                alert('权限不足');
            } else {
                response.json().then(data => alert(data.detail));
            }
        });
    }
}
</script>
{% endblock %}