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

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

{% block content %}
<div class="container py-5">
    <div class="text-center mb-5 fade-in-up">
        <h2 class="fw-bold" style="color: #6f42c1;">
            <i class="bi bi-megaphone-fill me-2"></i>系统公告
        </h2>
        <p class="text-muted">获取最新的系统更新与维护通知</p>
    </div>

    <div class="row g-4 justify-content-center">
        {% for announcement in announcements %}
        <div class="col-lg-10 fade-in-up" style="animation-delay: 0.1s;">
            <div class="card border-0 shadow-sm hover-card announcement-card mb-3">
                <div class="card-border-start"></div>
                
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="flex-grow-1 pe-3">
                            <h4 class="card-title fw-bold text-dark mb-3">
                                {{ announcement.title }}
                            </h4>
                            <p class="card-text text-secondary mb-3" style="line-height: 1.6; white-space: pre-wrap;">{{ announcement.content }}</p>
                            
                            <div class="d-flex align-items-center mt-3">
                                <span class="badge bg-light text-muted border rounded-pill fw-normal px-3 py-2">
                                    <i class="bi bi-clock-history me-2"></i>发布于：{{ announcement.created_at }}
                                </span>
                            </div>
                        </div>

                        {% if user.is_authenticated and user.is_superuser %}
                        <div class="flex-shrink-0">
                            <a href="{% url 'announcement:delete_announcement' announcement.id %}" 
                               class="btn btn-outline-danger btn-sm rounded-circle p-2 delete-btn shadow-sm"
                               title="删除此公告">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-lg-10 text-center py-5 fade-in-up">
            <div class="empty-state p-5 bg-light rounded-4 border border-dashed">
                <div class="icon-circle bg-white text-muted mx-auto mb-3 shadow-sm">
                    <i class="bi bi-inbox" style="font-size: 2.5rem;"></i>
                </div>
                <h5 class="text-muted fw-bold">暂无公告</h5>
                <p class="text-secondary small mb-0">当前没有发布的系统消息</p>
            </div>
        </div>
        {% endfor %}
    </div>

    {% if user.is_authenticated and user.is_superuser %}
    <div class="text-center mt-5 mb-5 fade-in-up">
        <a href="{% url 'announcement:publish_announcement' %}" 
           class="btn btn-primary btn-lg rounded-pill px-5 shadow-hover" 
           style="background-color: #6f42c1; border: none;">
            <i class="bi bi-pencil-square me-2"></i>发布新公告
        </a>
    </div>
    {% endif %}
</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); }
    }

    /* 卡片基础样式 */
    .announcement-card {
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        background: #fff;
    }

    /* 悬浮效果 */
    .hover-card {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .hover-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
    }

    /* 左侧紫色装饰线条 */
    .card-border-start {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: linear-gradient(to bottom, #6f42c1, #a66efa);
    }

    /* 删除按钮样式 */
    .delete-btn {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    .delete-btn:hover {
        background-color: #dc3545;
        color: white;
    }

    /* 发布按钮悬浮效果 */
    .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;
    }

    /* 空状态图标圆圈 */
    .icon-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .border-dashed {
        border-style: dashed !important;
    }
</style>
{% endblock %}