{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h2>公告管理</h2>
    <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#createModal">新建公告</button>

    <table class="table table-hover">
        <thead class="thead-light">
            <tr>
                <th>ID</th>
                <th>内容</th>
                <th>时间范围</th>
                <th>颜色</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for ann in announcements %}
            <tr>
                <td>{{ ann.id }}</td>
                <td>{{ ann.text }}</td>
                <td>
                    <small class="text-muted">
    {{ ann.start_time|datetime }} 至 {{ ann.end_time|datetime }}
</small>
                </td>
                <td>
                    <div class="color-preview" style="width:30px;height:30px;background-color:{{ ann.color }}"></div>
                </td>
                <td>
                    <form method="POST" action="{{ url_for('announcements.delete_announcement', announcement_id=ann.id) }}">
                        <button type="submit" class="btn btn-danger btn-sm" 
                            onclick="return confirm('确定删除该公告？')">删除</button>
                    </form>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="6" class="text-center text-muted">暂无公告</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- 创建模态框 -->
    <div class="modal fade" id="createModal" 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="close" data-dismiss="modal">&times;</button>
                </div>
                <form method="POST" action="{{ url_for('announcements.create_announcement') }}">
                    <div class="modal-body">
                        <div class="form-group">
                            <label>内容</label>
                            <textarea name="text" class="form-control" rows="3" required></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>开始时间</label>
                                    <input type="datetime-local" name="start_time" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>结束时间</label>
                                    <input type="datetime-local" name="end_time" class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>背景颜色</label>
                            <input type="color" name="color" class="form-control" value="#ffffff">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">创建</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}