{% extends 'base.html' %}
{% load static %}

{% block title %}发布公告 - 茄子在线检测系统{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-10 fade-in-up">
            
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
                <div class="card-header text-center py-4 border-0" style="background: linear-gradient(135deg, #6f42c1, #20c997);">
                    <h3 class="fw-bold text-white mb-0">
                        <i class="bi bi-pencil-square me-2"></i>发布新公告
                    </h3>
                    <p class="text-white-50 mb-0 small mt-2">向全系统广播重要通知</p>
                </div>

                <div class="card-body p-5 bg-white">
                    <form method="post" class="custom-django-form">
                        {% csrf_token %}
                        
                        {{ form.as_p }}
                        
                        <div class="text-center mt-5">
                            <button type="submit" class="btn btn-primary btn-lg rounded-pill px-5 shadow-hover" 
                                    style="background-color: #6f42c1; border: none;">
                                <i class="bi bi-send-fill me-2"></i>立即发布
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

<style>
    /* 进场动画 */
    .fade-in-up {
        animation: fadeInUp 0.6s ease-out forwards;
        opacity: 0;
        transform: translateY(20px);
    }
    @keyframes fadeInUp {
        to { opacity: 1; transform: translateY(0); }
    }

    /* 按钮悬浮效果 */
    .shadow-hover {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .shadow-hover:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(111, 66, 193, 0.3) !important;
    }
    
    
    .custom-django-form p {
        margin-bottom: 1.5rem;
    }

    /* Label */
    .custom-django-form label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #495057;
        font-size: 0.95rem;
    }
    /* Label装饰 */
    .custom-django-form label::after {
        content: ":";
    }

    /* 输入框 (Input 和 Textarea) */
    .custom-django-form input[type="text"],
    .custom-django-form input[type="password"],
    .custom-django-form input[type="email"],
    .custom-django-form textarea,
    .custom-django-form select {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: #f8f9fa;
        background-clip: padding-box;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem; /* 圆角 */
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        outline: none;
    }

    /* 输入框聚焦效果 */
    .custom-django-form input:focus,
    .custom-django-form textarea:focus,
    .custom-django-form select:focus {
        background-color: #fff;
        border-color: #6f42c1; /* 紫色边框 */
        box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.15); /* 紫色光晕 */
    }

    /* textarea */
    .custom-django-form textarea {
        min-height: 150px;
        resize: vertical;
    }
    
    .helptext {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: #6c757d;
    }
</style>
{% endblock %}