{% extends 'superuser/base_super_user.html' %}

{% block title %}System Announcements | SaaS Command{% endblock %}

{% block page_title %}Network Announcements{% endblock %}
{% block page_subtitle %}Broadcast messages to institution dashboards.{% endblock %}

{% block content %}
<style>
    .ann-card { background: #fff; border: 2px solid #1e293b; margin-bottom: 25px; 
                box-shadow: 4px 4px 0px #1e293b; border-radius: 0; padding: 25px; }
    .ann-meta { font-size: 0.75rem; font-weight: 800; color: #64748b; margin-bottom: 15px; 
                text-transform: uppercase; letter-spacing: 1px; display: flex; gap: 15px; }
    .ann-body { font-size: 1rem; color: #0f172a; line-height: 1.6; font-family: 'Anek Bangla', 'Montserrat', sans-serif; 
                background: #f8fafc; padding: 20px; border-left: 4px solid #3b82f6; margin-bottom: 20px; }
    .btn-act { padding: 8px 15px; font-size: 0.75rem; font-weight: 800; border: 2px solid #1e293b; 
               background: #fff; color: #1e293b; cursor: pointer; text-decoration: none; text-transform: uppercase; }
    .btn-act:hover { background: #1e293b; color: #fff; }
    .btn-danger { border-color: #ef4444; color: #ef4444; }
    .btn-danger:hover { background: #ef4444; color: #fff; }
</style>

<div style="margin-bottom: 30px; text-align: right;">
    <a href="{% url 'super_announcement_add' %}" class="btn-act" style="background: #1e293b; color: #fff; padding: 12px 25px;">
        <i class="fas fa-bullhorn"></i> New Broadcast
    </a>
</div>

{% for ann in announcements %}
<div class="ann-card">
    <div class="ann-meta">
        <span><i class="fas fa-calendar"></i> {{ ann.created_at|date:"d M Y, h:i A" }}</span>
        <span><i class="fas fa-users"></i> 
            {% if ann.is_bulk %}All Institutions{% else %}{{ ann.schools.count }} Selected Institutions{% endif %}
        </span>
        <span style="color: #10b981;"><i class="fas fa-eye"></i> Seen by: {{ ann.seen_by.count }}</span>
    </div>
    
    <div class="ann-body">
        {{ ann.message|linebreaksbr }}
    </div>
    
    <div style="text-align: right;">
        <a href="{% url 'super_announcement_delete' ann.id %}" class="btn-act btn-danger" onclick="return confirm('Remove this broadcast?')">
            <i class="fas fa-trash"></i> DELETE
        </a>
    </div>
</div>
{% empty %}
<div style="text-align: center; padding: 100px; color: #94a3b8; font-weight: 800; background: #fff; border: 2px dashed #e2e8f0;">
    NO BROADCASTS FOUND.
</div>
{% endfor %}
{% endblock %}