{% if announcements %}
<div class="col-12">
    <div class="alert alert-info border-info" role="alert">
        <div class="d-flex align-items-center">
            <div class="me-3">
                <i class="fas fa-bullhorn fa-2x text-info"></i>
            </div>
            <div class="flex-grow-1">
                <h6 class="alert-heading mb-2">
                    <i class="fas fa-info-circle me-2"></i>Hospital Announcements
                </h6>
                {% for announcement in announcements %}
                <div class="mb-2 {% if not forloop.last %}border-bottom pb-2{% endif %}">
                    <strong class="text-{% if announcement.priority == 'CRITICAL' %}danger{% elif announcement.priority == 'HIGH' %}warning{% else %}info{% endif %}">
                        {{ announcement.title }}
                    </strong>
                    <p class="mb-1">{{ announcement.content|truncatechars:150 }}</p>
                    <small class="text-muted">
                        <i class="fas fa-clock me-1"></i>{{ announcement.created_datetime|date:"M d, Y H:i" }}
                        {% if announcement.end_datetime %}
                            <i class="fas fa-calendar-times ms-3 me-1"></i>Expires: {{ announcement.end_datetime|date:"M d, Y" }}
                        {% endif %}
                    </small>
                </div>
                {% endfor %}
            </div>
            <div class="text-end">
                <a href="{% url 'communications:announcement_list' %}?status=active" class="btn btn-outline-info btn-sm">
                    View All
                </a>
            </div>
        </div>
    </div>
</div>
{% endif %}