{% extends "base.html" %}
{% block title %}All Announcements — Admin{% endblock %}
{% block content %}
<div class="admin-page">

  <div class="page-header">
    <div>
      <h1 class="page-title">📢 All Announcements</h1>
      <p class="page-sub">{{ announcements|length }} total across all classes</p>
    </div>
  </div>

  {% if announcements %}
  <div class="table-wrap">
    <table class="data-table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Class</th>
          <th>Teacher</th>
          <th>Posted</th>
          <th>Expires</th>
          <th>Pinned</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for a in announcements %}
        <tr>
          <td>
            <strong>{{ a['title'] }}</strong>
            {% if a['body'] %}
            <div class="text-muted" style="font-size:.78rem;margin-top:.15rem">
              {{ a['body'][:80] }}{% if a['body']|length > 80 %}…{% endif %}
            </div>
            {% endif %}
          </td>
          <td>{{ a['class_name'] }}</td>
          <td>{{ a['teacher_name'] }}</td>
          <td>{{ a['created_at'][:10] }}</td>
          <td>
            {% if a['expires_at'] %}
              {{ a['expires_at'] }}
              {% if a['expires_at'] < now_date %}
              <span class="overdue-tag">Expired</span>
              {% endif %}
            {% else %}
              <span class="text-muted">Never</span>
            {% endif %}
          </td>
          <td>{% if a['pinned'] %}📌{% else %}—{% endif %}</td>
          <td>
            <form method="POST"
                  action="{{ url_for('admin_delete_announcement', ann_id=a['id']) }}"
                  onsubmit="return confirm('Delete this announcement?')"
                  style="display:inline">
              <button type="submit" class="btn btn-sm btn-ghost" style="color:var(--coral)">
                Delete
              </button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">📢</div>
    <div class="empty-title">No announcements yet</div>
    <div class="empty-sub">Teachers post announcements from their class pages.</div>
  </div>
  {% endif %}

</div>
{% endblock %}