{% extends 'base.html' %}
{% block title %}Grades{% endblock %}
{% block page_title %}Grades{% endblock %}

{% block content %}
<div class="page-header">
<div class="page-header-left">
<h1 class="page-title">Grades</h1>
<p class="page-subtitle">Recent grade records</p>
</div>
<a href="{% url 'grade_add' %}" class="btn btn-primary">
<i data-lucide="plus" style="width:15px;height:15px;"></i> Record Grade
</a>
</div>

<div class="table-wrapper">
<table>
<thead>
  <tr><th>Student</th><th>Subject</th><th>Term</th><th>Score</th><th>%</th><th>Grade</th><th>Year</th><th>Remarks</th></tr>
</thead>
<tbody>
  {% for grade in grades %}
  <tr>
    <td>
      <div style="display:flex;align-items:center;gap:8px;">
        <div class="avatar-sm">{{ grade.student.first_name|first }}</div>
        <a href="{% url 'student_grades' grade.student.pk %}" style="font-weight:500;color:var(--primary);text-decoration:none;">{{ grade.student.full_name }}</a>
      </div>
    </td>
    <td><span class="badge badge-secondary">{{ grade.subject.name }}</span></td>
    <td>{{ grade.get_term_display }}</td>
    <td style="font-weight:600;">{{ grade.score }}/{{ grade.max_score }}</td>
    <td>
      <div style="display:flex;align-items:center;gap:8px;">
        <div class="progress" style="width:60px;">
          <div class="progress-bar {% if grade.percentage >= 70 %}success{% elif grade.percentage >= 50 %}warning{% else %}danger{% endif %}"
               style="width:{{ grade.percentage }}%;" data-width="{{ grade.percentage }}%"></div>
        </div>
        <span style="font-size:12px;color:var(--text-muted);">{{ grade.percentage }}%</span>
      </div>
    </td>
    <td>
      <span class="grade-{% if grade.letter_grade == 'A+' %}a-plus{% elif grade.letter_grade == 'A' %}a{% elif grade.letter_grade == 'B' %}b{% elif grade.letter_grade == 'C' %}c{% elif grade.letter_grade == 'D' %}d{% else %}f{% endif %}" style="font-size:16px;">
        {{ grade.letter_grade }}
      </span>
    </td>
    <td style="font-size:13px;color:var(--text-muted);">{{ grade.academic_year }}</td>
    <td style="font-size:13px;color:var(--text-secondary);">{{ grade.remarks|default:"—"|truncatechars:40 }}</td>
  </tr>
  {% empty %}
  <tr><td colspan="8">
    <div class="empty-state">
      <div class="empty-state-icon">📊</div>
      <div class="empty-state-title">No grades recorded yet</div>
    </div>
  </td></tr>
  {% endfor %}
</tbody>
</table>
</div>
{% endblock %}