{{template "admin/layout/base.html" .}}
        <div class="page-header">
            <h1>公告管理</h1>
            <p class="page-desc">管理前台首页公告栏展示内容</p>
        </div>

        <div class="toolbar">
            <button class="btn btn-primary" id="btnNewAnnouncement">+ 新建公告</button>
        </div>

        <table class="data-table" id="announcementTable">
            <thead>
                <tr>
                    <th style="width:60px">ID</th>
                    <th>标题</th>
                    <th style="width:80px">类型</th>
                    <th style="width:80px">状态</th>
                    <th style="width:140px">生效时间</th>
                    <th style="width:60px">排序</th>
                    <th style="width:160px">创建时间</th>
                    <th style="width:120px">操作</th>
                </tr>
            </thead>
            <tbody id="announcementList">
                <tr><td colspan="8" class="table-empty">加载中...</td></tr>
            </tbody>
        </table>

        <div class="pagination" id="pagination" style="display:none"></div>

        <!-- 编辑/新建弹窗 -->
        <div class="modal-overlay" id="modalOverlay">
            <div class="modal">
                <div class="modal-header">
                    <h3 id="modalTitle">新建公告</h3>
                    <button class="modal-close" id="modalClose">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="announcementForm">
                        <input type="hidden" id="announcementId">
                        <div class="form-group">
                            <label for="announcementTitle">标题</label>
                            <input type="text" id="announcementTitle" class="form-input" maxlength="200" required>
                        </div>
                        <div class="form-group">
                            <label for="announcementContent">内容</label>
                            <textarea id="announcementContent" class="form-textarea" rows="3" required></textarea>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="announcementType">类型</label>
                                <select id="announcementType" class="form-select">
                                    {{range $k, $v := .Types}}
                                    <option value="{{$k}}">{{$v.Label}}</option>
                                    {{end}}
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="announcementSort">排序（越小越前）</label>
                                <input type="number" id="announcementSort" class="form-input" value="0" min="0" style="width:100px">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="announcementStartAt">生效开始（可选）</label>
                                <input type="datetime-local" id="announcementStartAt" class="form-input">
                            </div>
                            <div class="form-group">
                                <label for="announcementEndAt">生效结束（可选）</label>
                                <input type="datetime-local" id="announcementEndAt" class="form-input">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="checkbox-label">
                                <input type="checkbox" id="announcementIsActive" checked>
                                启用
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" id="modalCancel">取消</button>
                    <button class="btn btn-primary" id="modalSave">保存</button>
                </div>
            </div>
        </div>

        <div class="toast" id="toast"></div>
{{template "admin/layout/footer.html" .}}