{% extends "base.html" %}
{% block title %}Announcements — {{ cls['name'] }}{% endblock %}
{% block content %}
<div class="admin-page">

  <div class="breadcrumb">
    <a href="{{ url_for('teacher_dashboard') }}">My Classes</a>
    <span>›</span>
    <a href="{{ url_for('teacher_class', class_id=cls['id']) }}">{{ cls['name'] }}</a>
    <span>›</span><span>Announcements</span>
  </div>

  <div class="page-header">
    <div>
      <h1 class="page-title">📢 Announcements — {{ cls['name'] }}</h1>
      <p class="page-sub">{{ announcements|length }} announcement{{ 's' if announcements|length != 1 else '' }}</p>
    </div>
    <a href="{{ url_for('teacher_class', class_id=cls['id']) }}" class="btn btn-ghost">← Back to class</a>
  </div>

  <!-- Create form -->
  <div class="section-block">
    <h2 class="section-heading">+ New Announcement</h2>
    <form method="POST" action="{{ url_for('teacher_create_announcement', class_id=cls['id']) }}"
          class="ann-form">
      <div class="form-group">
        <label class="form-label">Title</label>
        <input type="text" name="title" class="form-input" required
               placeholder="e.g. Quiz next Monday!">
      </div>
      <div class="form-group">
        <label class="form-label">Message (optional)</label>
        <textarea name="body" class="form-input" rows="3"
                  placeholder="Additional details for students…"
                  style="resize:vertical"></textarea>
      </div>
      <div class="ann-form-options">
        <div class="form-group" style="flex:1">
          <label class="form-label">Expires on (optional — leave blank to never expire)</label>
          <input type="date" name="expires_at" class="form-input">
        </div>
        <div class="form-group" style="align-self:flex-end;padding-bottom:.1rem">
          <label class="checkbox-label">
            <input type="checkbox" name="pinned" value="1"> 📌 Pin this announcement
          </label>
        </div>
        <div class="form-group" style="align-self:flex-end">
          <button type="submit" class="btn btn-primary">Post Announcement</button>
        </div>
      </div>
      <p class="form-hint" style="margin-top:.5rem">
        Students in {{ cls['name'] }} will be notified by email when you post.
      </p>
    </form>
  </div>

  <!-- Existing announcements -->
  {% if announcements %}
  <div class="section-block">
    <h2 class="section-heading">All Announcements</h2>
    <div class="ann-manage-list">
      {% for a in announcements %}
      <div class="ann-manage-card {% if a['pinned'] %}ann-pinned{% endif %}">
        <div class="ann-manage-header">
          <div class="ann-manage-title">
            {% if a['pinned'] %}<span class="ann-pin-icon">📌</span>{% endif %}
            {{ a['title'] }}
          </div>
          <div class="ann-manage-meta">
            <span class="text-muted" style="font-size:.78rem">{{ a['created_at'][:10] }}</span>
            {% if a['expires_at'] %}
            <span class="text-muted" style="font-size:.78rem">
              · Expires {{ a['expires_at'] }}
              {% if a['expires_at'] < now_date %}
              <span class="overdue-tag">Expired</span>
              {% endif %}
            </span>
            {% endif %}
          </div>
        </div>
        {% if a['body'] %}
        <div class="ann-manage-body">{{ a['body'] }}</div>
        {% endif %}
        <div class="ann-manage-actions">
          <form method="POST"
                action="{{ url_for('teacher_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>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">📢</div>
    <div class="empty-title">No announcements yet</div>
    <div class="empty-sub">Use the form above to post your first announcement.</div>
  </div>
  {% endif %}

</div>
{% endblock %}