{% extends 'school/base_school.html' %}

{% block title %}{% if is_edit %}Edit Class{% else %}Add Class{% endif %} | STD Lab{% endblock %}

{% block page_title %}{% if is_edit %}Edit Class{% else %}Add New Class{% endif %}{% endblock %}

{% block content %}
<style>
    .card-sharp { max-width: 600px; margin: 40px auto; background: #fff; padding: 32px; border: 1px solid #e2e8f0; }
    .btn-sharp { padding: 12px 24px; font-weight: 800; border-radius: 0; cursor: pointer; border: none; text-transform: uppercase; letter-spacing: 1px; }
    .form-group label { display: block; font-size: 0.75rem; font-weight: 900; color: #64748b; text-transform: uppercase; margin-bottom: 8px; }
    input, select { width: 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 0; outline: none; font-weight: 700; color: #0f172a; }
</style>

<div class="card-sharp">
    <form method="post">
        {% csrf_token %}
        <div class="form-group">
            <label>Class Name</label>
            <input type="text" name="name" value="{{ class.name|default:'' }}" required placeholder="e.g. CLASS 01">
        </div>

        <div class="form-group" style="margin-top: 24px;">
            <label>Assigned Class Teacher</label>
            <select name="teacher_id">
                <option value="">-- NO TEACHER ASSIGNED --</option>
                {% for t in teachers %}
                <option value="{{ t.id }}" {% if class.teacher_id == t.id %}selected{% endif %}>{{ t.user.get_full_name }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group" style="margin-top: 30px;">
            <label>Assign Subjects (Students of this class will take these subjects)</label>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 1px solid #f1f5f9; padding: 15px; max-height: 200px; overflow-y: auto;">
                {% for s in subjects_all %}
                <label style="display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 700; cursor: pointer; margin: 0; color: #1e293b;">
                    <input type="checkbox" name="subject_ids" value="{{ s.id }}" 
                           {% if s in class.subjects.all %}checked{% endif %}
                           style="width: 18px; height: 18px; accent-color: #0f172a;">
                    {{ s.name }} 
                    {% if s.group %}<span style="font-size: 0.6rem; color: #94a3b8;">({{ s.group.name|upper }})</span>{% endif %}
                </label>
                {% endfor %}
            </div>
            <p style="font-size: 0.65rem; color: #94a3b8; font-weight: 700; margin-top: 5px;">* CHECK ALL SUBJECTS THAT APPLY TO THIS CLASS.</p>
        </div>

        <div style="display: flex; gap: 12px; margin-top: 40px;">
            <button type="submit" class="btn-sharp" style="flex: 2; background: #0f172a; color: #fff;">{% if is_edit %}UPDATE CLASS{% else %}CREATE CLASS{% endif %}</button>
            <a href="{% url 'class_list' %}" class="btn-sharp" style="flex: 1; text-align: center; background: #f1f5f9; color: #64748b; text-decoration: none;">CANCEL</a>
        </div>
    </form>
</div>
{% endblock %}