{% extends 'base.html' %}

{% block title %}添加公告 - 图书管理系统{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/announcement-form.css') }}">
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="announcement-form-container">
    <div class="page-header">
        <h1>添加公告</h1>
    </div>

    <div class="card">
        <div class="card-body">
            {% if error %}
            <div class="alert alert-danger">{{ error }}</div>
            {% endif %}

            <form method="post" action="{{ url_for('announcement.add_announcement') }}" id="announcementForm">
                <div class="form-group">
                    <label for="title">公告标题 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="title" name="title" required>
                </div>

                <div class="form-group">
                    <label for="editor">公告内容 <span class="text-danger">*</span></label>
                    <div id="editor" style="height: 250px;"></div>
                    <input type="hidden" name="content" id="content">
                </div>

                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="is_top" name="is_top">
                    <label class="form-check-label" for="is_top">置顶公告</label>
                </div>

                <div class="form-buttons">
                    <button type="button" class="btn btn-secondary" onclick="history.back()">取消</button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">发布公告</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="{{ url_for('static', filename='js/announcement-form.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化富文本编辑器
        const quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    [{ 'align': [] }],
                    ['link', 'image'],
                    ['clean']
                ]
            },
            placeholder: '请输入公告内容...'
        });

        // 提交表单前获取富文本内容
        document.getElementById('announcementForm').addEventListener('submit', function(e) {
            const content = document.getElementById('content');
            content.value = quill.root.innerHTML;

            // 简单验证
            if (!document.getElementById('title').value.trim()) {
                e.preventDefault();
                alert('请输入公告标题');
                return false;
            }

            if (quill.getText().trim().length <= 1) {
                e.preventDefault();
                alert('请输入公告内容');
                return false;
            }
        });
    });
</script>
{% endblock %}