{% extends 'school/base_school.html' %}
{% block title %}Grade Setup | STD Lab{% endblock %}
{% block page_title %}Grading System Configuration{% endblock %}

{% block content %}
<style>
    .card { border-radius: 0; border: 1px solid #e2e8f0; background: #fff; margin-bottom: 20px; }
    .btn { border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 15px; cursor: pointer; text-decoration: none; display: inline-block; }
</style>

<div style="display: flex; justify-content: flex-end; margin-bottom: 20px;">
    <a href="{% url 'grade_config_add' %}" class="btn" style="background: #0f172a; color: #fff;"><i class="fas fa-plus"></i> NEW GRADE SCALE</a>
</div>

<div class="card">
    <table style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr style="background: #f8fafc; text-align: left; border-bottom: 1px solid #e2e8f0;">
                <th style="padding: 15px; font-size: 0.7rem; color: #94a3b8;">GRADE</th>
                <th style="padding: 15px; font-size: 0.7rem; color: #94a3b8;">MARK RANGE</th>
                <th style="padding: 15px; font-size: 0.7rem; color: #94a3b8;">GPA VALUE</th>
                <th style="padding: 15px; font-size: 0.7rem; color: #94a3b8; text-align: right;">DATE</th>
            </tr>
        </thead>
        <tbody>
            {% for g in configs %}
            <tr style="border-bottom: 1px solid #f1f5f9;">
                <td style="padding: 15px;"><span style="font-weight: 900; background: #f8fafc; border: 1px solid #e2e8f0; padding: 5px 12px; color: #0f172a;">{{ g.grade_name }}</span></td>
                <td style="padding: 15px; font-weight: 700; color: #64748b;">{{ g.min_marks }}% - {{ g.max_marks }}%</td>
                <td style="padding: 15px; font-weight: 800; color: #10b981;">{{ g.gpa_value }}</td>
                <td style="padding: 15px; text-align: right; color: #94a3b8; font-size: 0.8rem;">{{ g.created_at|date:"d M Y" }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" style="padding: 40px; text-align: center; color: #cbd5e1; font-weight: 800;">NO CUSTOM GRADES DEFINED. DEFAULT SYSTEM WILL BE USED.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<p style="font-size: 0.7rem; color: #94a3b8; font-weight: 700; margin-top: 10px;">* SYSTEM DYNAMICALLY CALCULATES GRADES DURING MARK ENTRY BASED ON THESE SCALES.</p>

{% endblock %}