{% extends 'school/base_school.html' %}
{% block title %}Add Grade | STD Lab{% endblock %}
{% block page_title %}New Grade Scale Entry{% endblock %}

{% block content %}
<style>
    .card { border-radius: 0; border: 1px solid #e2e8f0; background: #fff; max-width: 500px; padding: 25px; }
    .btn { border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 25px; cursor: pointer; border: none; }
    input { width: 100%; height: 45px; border: 1px solid #e2e8f0; border-radius: 0; padding: 0 10px; margin-top: 5px; font-weight: 700; outline: none; }
    label { font-size: 0.65rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; display: block; }
</style>

<div class="card">
    <form method="post">
        {% csrf_token %}
        <div style="margin-bottom: 20px;">
            <label>Grade Name (e.g. A+)</label>
            <input type="text" name="grade_name" required placeholder="A+">
        </div>
        <div style="display: flex; gap: 15px; margin-bottom: 20px;">
            <div style="flex: 1;">
                <label>Min Marks (%)</label>
                <input type="number" step="0.01" name="min_marks" required placeholder="80">
            </div>
            <div style="flex: 1;">
                <label>Max Marks (%)</label>
                <input type="number" step="0.01" name="max_marks" required placeholder="100">
            </div>
        </div>
        <div style="margin-bottom: 30px;">
            <label>GPA Value</label>
            <input type="number" step="0.01" name="gpa_value" required placeholder="5.00">
        </div>
        <div style="display: flex; gap: 10px;">
            <button type="submit" class="btn" style="flex: 2; background: #0f172a; color: #fff;">SAVE SCALE</button>
            <a href="{% url 'grade_config_list' %}" class="btn" style="flex: 1; background: #f1f5f9; color: #64748b; text-decoration: none; text-align: center;">CANCEL</a>
        </div>
    </form>
</div>
{% endblock %}