{% extends "base.html" %}
{% block title %}Assignments — {{ 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>Assignments</span>
  </div>

  <div class="page-header">
    <div>
      <h1 class="page-title">Assignments — {{ cls['name'] }}</h1>
      <p class="page-sub">{{ assignments|length }} assignment{{ 's' if assignments|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 assignment form ── -->
  <div class="section-block">
    <h2 class="section-heading">+ New Assignment</h2>
    <form method="POST" action="{{ url_for('teacher_create_assignment', class_id=cls['id']) }}"
          class="assign-form">
      <div class="assign-form-row">
        <div class="form-group" style="flex:2">
          <label class="form-label">Program</label>
          <select name="program_n" class="form-input" required>
            <option value="">Select a program…</option>
            {% for p in prog_map.values() %}
            <option value="{{ p['n'] }}">#{{ p['n'] }} — {{ p['title'] }} ({{ p['mod'] }})</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group" style="flex:1">
          <label class="form-label">Due date</label>
          <input type="date" name="due_date" class="form-input" required
                 min="{{ now_date }}">
        </div>
        <div class="form-group" style="flex:2">
          <label class="form-label">Note for students (optional)</label>
          <input type="text" name="note" class="form-input"
                 placeholder="e.g. Focus on edge cases">
        </div>
        <div class="form-group" style="justify-content:flex-end;padding-top:1.4rem">
          <button type="submit" class="btn btn-primary">Assign →</button>
        </div>
      </div>
    </form>
  </div>

  <!-- ── Existing assignments ── -->
  {% if assignments %}
  <div class="section-block">
    <h2 class="section-heading">Current Assignments</h2>
    <div class="table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>Program</th>
            <th>Due date</th>
            <th>Note</th>
            {% for s in students %}<th>{{ s['username'] }}</th>{% endfor %}
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for a in assignments %}
          {% set prog = prog_map.get(a['program_n']) %}
          <tr class="{% if a['due_date'] < now_date %}row-overdue{% endif %}">
            <td>
              <strong>#{{ a['program_n'] }}</strong>
              {% if prog %} — {{ prog['title'] }}{% endif %}
            </td>
            <td>
              {{ a['due_date'] }}
              {% if a['due_date'] < now_date %}
              <span class="overdue-tag">Overdue</span>
              {% endif %}
            </td>
            <td class="text-muted">{{ a['note'] or '—' }}</td>
            {% for s in students %}
            <td style="text-align:center">
              {% if status.get(s['id'],{}).get(a['id']) %}
              <span class="done-tick">✓</span>
              {% else %}
              <span class="not-done-tick">○</span>
              {% endif %}
            </td>
            {% endfor %}
            <td>
              <form method="POST"
                    action="{{ url_for('teacher_delete_assignment', assignment_id=a['id']) }}"
                    onsubmit="return confirm('Remove this assignment?')">
                <button type="submit" class="btn btn-sm btn-ghost" style="color:var(--coral)">
                  Remove
                </button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">📋</div>
    <div class="empty-title">No assignments yet</div>
    <div class="empty-sub">Use the form above to assign a program with a due date.</div>
  </div>
  {% endif %}

</div>
{% endblock %}