{% extends 'base.html' %}

{% block css %}
<style>
    body {
        background-color: #f8f9fa;
        font-family: Arial, sans-serif;
    }
    
    .container {
        max-width: 1000px;
        margin: 50px auto;
    }
    
    h1 {
        margin-bottom: 30px;
        color: #333;
    }
    
    .danmu-table {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    
    .table th, .table td {
        vertical-align: middle;
    }
    
    .danmu-content {
        max-width: 400px;
        word-break: break-all;
    }
    
    .danmu-image {
        max-width: 100px;
        max-height: 100px;
        border-radius: 5px;
    }
    
    .action-buttons {
        display: flex;
        gap: 10px;
    }
    
    .empty-state {
        text-align: center;
        padding: 50px 0;
        color: #6c757d;
    }
</style>
{% endblock %}

{% block content %}
    <div class="container">
        <h1>弹幕审核</h1>
        
        {% if danmus %}
            <div class="danmu-table">
                <table class="table table-bordered table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th>姓名</th>
                            <th>内容</th>
                            <th>图片</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for danmu in danmus %}
                            <tr>
                                <td>{{ danmu.name }}</td>
                                <td class="danmu-content">{{ danmu.content }}</td>
                                <td>
                                    {% if danmu.image %}
                                        <img src="{{ danmu.image.url }}" alt="图片" class="danmu-image">
                                    {% else %}
                                        -无-
                                    {% endif %}
                                </td>
                                <td>{{ danmu.created_at|date:"Y-m-d H:i:s" }}</td>
                                <td>
                                    <div class="action-buttons">
                                        <form method="post" style="margin: 0;">
                                            {% csrf_token %}
                                            <input type="hidden" name="danmu_id" value="{{ danmu.id }}">
                                            <input type="hidden" name="action" value="approve">
                                            <button type="submit" class="btn btn-success btn-sm">通过</button>
                                        </form>
                                        <form method="post" style="margin: 0;">
                                            {% csrf_token %}
                                            <input type="hidden" name="danmu_id" value="{{ danmu.id }}">
                                            <input type="hidden" name="action" value="reject">
                                            <button type="submit" class="btn btn-danger btn-sm">不通过</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="empty-state">
                <h3>暂无待审核的弹幕</h3>
            </div>
        {% endif %}
    </div>
{% endblock %}