{% extends 'school/base_school.html' %}
{% block title %}{% if is_edit %}Edit{% else %}Create{% endif %} Subject | STD Lab{% endblock %}
{% block page_title %}{% if is_edit %}Modify{% else %}New{% endif %} Academic Subject{% endblock %}

{% block content %}
<style>
    .card { border-radius: 0; border: 1px solid #e2e8f0; box-shadow: none; margin-bottom: 20px; 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, select { 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; }
</style>

<div class="card">
    <form method="post">
        {% csrf_token %}
        <div style="margin-bottom: 20px;">
            <label>Subject Name</label>
            <input type="text" name="name" value="{{ subject.name|default:'' }}" required placeholder="PHYSICS">
        </div>
        <div style="margin-bottom: 20px;">
            <label>Academic Group (Optional)</label>
            <select name="group_id">
                <option value="">-- NO GROUP / REGULAR --</option>
                {% for g in groups %}
                <option value="{{ g.id }}" {% if subject.group_id == g.id %}selected{% endif %}>{{ g.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div style="margin-bottom: 30px;">
            <label>Subject Code</label>
            <input type="text" name="code" value="{{ subject.code|default:'' }}" placeholder="PHY101">
        </div>
        <div style="display: flex; gap: 10px;">
            <button type="submit" class="btn" style="background: #0f172a; color: #fff; flex: 2;">{% if is_edit %}UPDATE SUBJECT{% else %}CREATE SUBJECT{% endif %}</button>
            <a href="{% url 'subject_list' %}" class="btn" style="background: #f1f5f9; color: #64748b; text-decoration: none; text-align: center; flex: 1;">CANCEL</a>
        </div>
    </form>
</div>
{% endblock %}