{% extends 'base.html' %}

{% block title %}{% if object %}Edit Class{% else %}Add Class{% endif %} — Rapha-Bethel BNPS{% endblock %}

{% block content %}
<div class="rb-page-header">
    <div>
        <h1 class="rb-page-title">{% if object %}Edit Class: {{ object.name }}{% else %}Add New Class{% endif %}</h1>
        <p class="rb-page-subtitle">{% if object %}Update class details{% else %}Create a new class for {{ form.academic_year.value|default:"2025-2026" }}{% endif %}</p>
    </div>
    <a href="{% url 'academics:class_list' %}" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-arrow-left me-1"></i> Back to Classes
    </a>
</div>

<div class="row">
<div class="col-lg-7">
<form method="post">
{% csrf_token %}

<div class="card mb-3">
    <div class="card-header"><span style="font-weight:600;font-size:.875rem"><i class="fas fa-chalkboard me-2" style="color:var(--rb-red)"></i>Class Details</span></div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-sm-8">
                <label class="form-label">Class Name <span class="text-danger">*</span></label>
                {{ form.name }}
                <div style="font-size:.75rem;color:#aaa;margin-top:.2rem">e.g. Nursery 1A, Grade 3B</div>
                {% if form.name.errors %}<div class="text-danger" style="font-size:.8rem">{{ form.name.errors }}</div>{% endif %}
            </div>
            <div class="col-sm-4">
                <label class="form-label">Code</label>
                {{ form.code }}
                <div style="font-size:.75rem;color:#aaa;margin-top:.2rem">Short code e.g. N1A</div>
            </div>
            <div class="col-sm-6">
                <label class="form-label">Level <span class="text-danger">*</span></label>
                {{ form.level }}
                {% if form.level.errors %}<div class="text-danger" style="font-size:.8rem">{{ form.level.errors }}</div>{% endif %}
            </div>
            <div class="col-sm-3">
                <label class="form-label">Section</label>
                {{ form.section }}
                <div style="font-size:.75rem;color:#aaa;margin-top:.2rem">A, B, C…</div>
            </div>
            <div class="col-sm-3">
                <label class="form-label">Section Type</label>
                {{ form.section_type }}
            </div>
            <div class="col-sm-4">
                <label class="form-label">Capacity</label>
                {{ form.capacity }}
            </div>
            <div class="col-sm-4">
                <label class="form-label">Room Number</label>
                {{ form.room_number }}
            </div>
            <div class="col-sm-4">
                <label class="form-label">Academic Year</label>
                {{ form.academic_year }}
            </div>
            <div class="col-12">
                <label class="form-label">Class Teacher</label>
                {{ form.class_teacher }}
                <div style="font-size:.75rem;color:#aaa;margin-top:.2rem">The teacher primarily responsible for this class</div>
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-end gap-2 mb-4">
    <a href="{% url 'academics:class_list' %}" class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-rb-primary px-4">
        <i class="fas fa-save me-2"></i> {% if object %}Save Changes{% else %}Create Class{% endif %}
    </button>
</div>

</form>
</div>

<div class="col-lg-5">
    <div class="card">
        <div class="card-header"><span style="font-weight:600;font-size:.875rem">Rapha-Bethel Class Structure</span></div>
        <div class="card-body" style="font-size:.82rem;color:#666">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:.4rem .75rem">
                <span style="font-weight:600;color:#444">Pre-Nursery</span><span>Ages 2–3</span>
                <span style="font-weight:600;color:#444">Nursery 1–2</span><span>Ages 3–5</span>
                <span style="font-weight:600;color:#444">Moyenne Section</span><span>Ages 4–5</span>
                <span style="font-weight:600;color:#444">Grande Section</span><span>Ages 5–6</span>
                <span style="font-weight:600;color:#444">Class 1–6</span><span>Primary school</span>
            </div>
            <hr style="margin:.85rem 0;border-color:#f0ebe5">
            <p class="mb-0"><i class="fas fa-language" style="color:var(--rb-gold)"></i> Set <strong>Section Type</strong> to English or French to reflect the bilingual stream.</p>
        </div>
    </div>
</div>
</div>
{% endblock %}