{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
  <h3 class="d-flex align-items-center gap-2">
    <i class="bi bi-megaphone-fill"></i> Announcements
  </h3>

  {% if broadcasts and broadcasts|length > 0 %}
    <div class="list-group mt-3">
      {% for b in broadcasts %}
        <div class="list-group-item" id="b-{{ b.id }}">
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <h5 class="mb-1">{{ b.title }}</h5>
              <small class="text-muted">
                Posted on {{ b.created_on.strftime('%d %b %Y %I:%M %p') }}
                {% if b.start_date or b.end_date %}
                  • Active
                  {% if b.start_date %}from {{ b.start_date.strftime('%d %b %Y') }}{% endif %}
                  {% if b.end_date %}to {{ b.end_date.strftime('%d %b %Y') }}{% endif %}
                {% endif %}
              </small>
            </div>
          </div>

          {% if b.content %}
            <!-- Replace newlines with <br> and mark safe -->
            <p class="mt-2 mb-2">{{ b.content | replace('\n', '<br>') | safe }}</p>
          {% endif %}

          <div class="d-flex align-items-center gap-3">
            {% if b.attachment_path %}
              <a class="btn btn-outline-primary btn-sm"
                 href="{{ url_for('static', filename=b.attachment_path.replace('static/', '').replace('\\','/')) }}"
                 target="_blank">
                <i class="bi bi-paperclip"></i> View Attachment
              </a>
            {% endif %}
            <form method="POST" action="{{ url_for('broadcast.mark_read', broadcast_id=b.id) }}">
              <button class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-check2-circle"></i> Mark Read
              </button>
            </form>
          </div>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="alert alert-info mt-3">
      No announcements for your department/role right now.
    </div>
  {% endif %}
</div>
{% endblock %}